共计 1654 个字符，预计需要花费 5 分钟才能阅读完成。
在网页中，在咱们须要收集用户信息的时候，就会用到表单。比方注册账号时有时候须要用户的名字、性别、出生日期、电话、邮箱等，就能够用表单来解决。
一个残缺的表单通常由 表单域 、 表单控件（表单元素）和 提示信息 3 个局部形成。
一、表单域
表单域是一个蕴含表单控件的区域，在 HTML 标签中，<form> 标签用来定义表单域，以实现用户信息的收集和传递。<form> 会把它范畴内的表单元素信息提交给服务器。
<form action="url" method="post" name="test">
... // 表单控件
</form>- action：值为 url 地址，用于指定接管并解决表单数据的服务器程序的 url 地址
- method：值为 get 或 post，用于设置表单数据的提交形式
- name：用于指定表单的名称，因为同一个页面中可能有多个表单域。
二、表单控件
1、<input> 表单控件
input 是输出的意思，在表单控件中，<input> 标签用于收集用户信息。
在 <input> 标签中，蕴含一个 必须的 type 属性，依据 type 不同的值，<input> 能够有多种形式：文本、复选框、单选按钮、按钮等。
<input type="text" /> <!-- <input> 也是单标签 -->| type 属性值 | 阐明 |
|---|---|
| text | 定义单行的输出字段，用户能够在外面输出文本，例如输出用户名 |
| password | 定义明码字段，用户输出后看不到明文，个别输出明码时用到 |
| radio | 定义单选按钮，比方在抉择性别时，实现多选一（多个 radio 必须有雷同的 name 能力实现真正的多选一） |
| checkbox | 定义复选框，比方在抉择“我喜爱的栏目”时，能够同时抉择多个（多个 checkbox 有雷同的 name 能力把所有的抉择都正确传到服务端） |
| button | 定义可点击按钮，value 值能够设置按钮文字 |
| file | 定义输出字段和“浏览”按钮，供文件上传 |
| reset | 定义重置按钮，重置按钮会革除表单中的所有数据 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| hidden | 定义暗藏的输出字段 |
| image | 定义图像模式的提交按钮 |
<input> 标签其余罕用属性：
| 属性 | 属性值 | 阐明 |
|---|---|---|
| name | 自定义 | 定义 input 控件的名称 |
| value | 自定义 | 定义 input 控件的值 |
| checked | checked | 此 input 控件首次加载时该当被选中 |
| maxlength | 正整数 | 输出文字时字符的最大长度 |
- name 和 value 是每个表单控件都有的属性值，次要给后盾人员应用
- name 是表单控件的名字，要求
单选按钮和复选框都要有雷同的 name 值
2、<label> 标签
<label> 标签用于绑定一个表单控件，当点击 <lable> 标签内的文本时，浏览器就会主动将光标转到对应的表单控件上，晋升用户体验。（能够了解为增大点击区域了）
<!-- 这样在点击“男”这个字时，也会选中该单选框 -->
<label for="sex"> 男 </label>
<input type="radio" name="sex" id="sex" />留神：<label> 标签的 for 属性该当与相干控件的 id 属性雷同
3、<select> 下拉表单控件
当页面中有多个选项让用户抉择时，想要节约页面空间，咱们能够应用 <select> 标签控件定义下拉列表。例如咱们在抉择省份和地区时。
<select>
<option> 北京 </option>
<option> 天津 </option>
<option> 河北 </option>
<option selected="selected"> 山西 </option>
<!-- 在 <option> 中定义 selected="selected"，以后项为默认选中项 -->
...
</select>4、<label> 文本域控件
当用户须要输出较多内容时，能够应用 <textarea> 标签，它用于定义多行文本输出的控件。比方留言板、评论等。
<textarea rows="3" cols="20">
默认的文本内容
</textarea>其中属性 cols 为每行中的字符数，rows 为显示的行数，理论开发中用 CSS 来管制。