1表单.jpg

  • 表单用于搜集用户信息

    一、表单域

    <form action="" method="" name=""> </form>

  • action=”xxx.php” 提交的服务器地址

  • method=”get默认值,明文提交 / post密文提交 “
  • name=”” 起个名字

    拓展：get与post的区别

  1. 从功能上讲，GET一般用来从服务器上获取资源，POST一般用来更新服务器上的资源；
  2. 从REST服务角度上说，GET是幂等的，即读取同一个资源，总是得到相同的数据，而POST不是幂等的，因为每次请求对资源的改变并不是相同的；进一步地，GET不会改变服务器上的资源，而POST会对服务器资源进行改变；
  3. 从请求参数形式上看，GET请求的数据会附在URL之后，即将请求数据放置在HTTP报文的 请求头 中，以?分割URL和传输数据，参数之间以&相连。特别地，如果数据是英文字母/数字，原样发送；否则，会将其编码为 application/x-www-form-urlencoded MIME 字符串(如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII)；而POST请求会把提交的数据则放置在是HTTP请求报文的 请求体 中。
  4. 就安全性而言，POST的安全性要比GET的安全性高，因为GET请求提交的数据将明文出现在URL上，而且POST请求参数则被包装到请求体中，相对更安全。

  5. 从请求的大小看，GET请求的长度受限于浏览器或服务器对URL长度的限制，允许发送的数据量比较小，而POST请求则是没有大小限制的。

    二、表单元素

  6. 文本框

<input type="text" name="username" value="请输入您的姓名">

  • name=”” 起个名字
  • value=”” 提示内容,可选
    1. 密码框

<input type="password" name="pwd">

  • name=”” 起个名字
    1. 单选按钮
      1. <input type="radio" name="gender" value="male">男
      2. <input type="radio" name="gender" value="female">女

  1. 复选框

    <input type="checkbox" name="hobby" value="bb" checked> 篮球
<input type="checkbox" name="hobby" value="fb"> 足球
<input type="checkbox" name="hobby" value="vb"> 排球
    • 单选按钮和复选框要有相同的name和不同的value，必有
    • checked=”checked” 或 checked 代表默认被选中
  2. 提交按钮

<input type="submit" value="免费注册">

  • value=”” 改变按钮上的文本
    1. 重置按钮

<input type="reset" value="清除">

  • value=”” 改变按钮上的文本
    1. 普通按钮

<input type="button" value="更换昵称">

  • value=”” 设置按钮上的文本
    1. 文件上传

<input type="file">

  1. 图像形式的提交按钮

<input type="image" src="./img14.jpg">

  • 同时会提交点击位置的坐标
    1. 隐藏域

<input type="hidden" name="pp" value="11">

  1. 下拉菜单

    • 不同的value值
    • size 显示的条数
    • selected 默认被选中
      <select name="cities" size="5">
<option value="bj">北京</option>
<option value="sh" selected>上海</option>
<option value="gz">广州</option>
<option value="sz">深圳</option>
</select>

  2. 多行文本域

<textarea name="" cols="40" rows="4"></textarea>

  • cols=”40” 一行所能容纳的字符数
  • rows=”4” 设置行数
  • 默认是可以通过拖拽改变元素尺寸的，CSS3提供的属性resize:none;可以禁止
    1. label 关联文本

  • 方法一：label 包裹住控件与文本,但是要删除 label 的 for 属性

    <label>
<input type="radio" name="" value=""> 男
</label>

  • 方法二：label 的 for 属性关联控件的 id 属性

    <div>
<input type="radio" name="" value="" id="box">
</div>
<div>
<label for="box">男</label> 
</div>
  1. 表单字段集
    • 语法：
    • 说明：相当于一个方框，在字段集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以在设置多个fieldset对象。disabled定义空间禁制可用；
  • 字段级标题：
    • 语法：
    • 说明：legend元素可以在fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的唯一个元素。
      <fieldset>
<legend>标题</legend>
</fieldset>

      三、课堂练习

      2021-10-30_233931.jpg
      <h2>增加管理员</h2>
<table>
<form action="" method="post" name="guanli">
<tr>
 <td>
   <label for="username">姓名：</label> 
 </td>
 <td>
   <input type="text" name="username" id="username">
 </td>
 <td>10个字符以内</td>
</tr>
<tr>
 <td>密码：</td>
 <td>
   <input type="password" name="pwd">
 </td>
 <td>10个字符以内</td>
</tr>
<tr>
 <td>性别：</td>
 <td>
   <label>
     <input type="radio" name="gender" value="female">女士
   </label>
   <label>
     <input type="radio" name="gender" value="male">男士
   </label>
 </td>
 <td></td>
</tr>
<tr>
 <td>角色：</td>
 <td>
   <label>
     <input type="checkbox" name="" value="">超级管理员1
   </label>
   <br>
   <label>
     <input type="checkbox" name="" value="">超级管理员2
   </label>
 </td>
 <td>至少选择一个角色</td>
</tr>
<tr>
 <td>头像：</td>
 <td>
   <input type="file">
 </td>
 <td></td>
</tr>
<tr>
 <td></td>
 <td>
   <input type="submit" value="保存">
   <input type="reset" value="重填">
 </td>
 <td></td>
</tr>
</form>
</table>