表单（form）是用户输入信息与网页互动的一种形式。大多数情况下，用户提交的信息会发给服务器，比如网站的搜索栏就是表单。 表单由一种或多种小部件组成，比如输入框、按钮、单选框或复选框，小部件称为控件。

1、<form>

form标签定义一个表单，所有表单内容放到这个容器元素之中。

<form action="https://example.com/api" method="post">
  <label for="POST-name">用户名：</label>
  <input id="POST-name" type="text" name="user">
  <input type="submit" value="提交">
</form>

上面表单包含三个控件：label标签，文本输入框和提交按钮。 form有以下属性：

• accept-charset：服务器接受的字符编码列表
• action：服务器接收数据的URL
• autocomplete：若用户未填写某个控件，浏览器是否自动填写，值：off/on
• method：提交数据的HTTP方法，值：post/get/dialog
• enctype：method属性等于post时，该属性指定提交给服务器的MIME类型
• name：表单的名称，在网页中是唯一的
• novalidate：布尔属性，表单提交时是否取消验证
• target：在哪个窗口展示服务器返回的数据，值：_self/_blank/_parent/_top/iframe标签的name属性

1.2 enctype属性

form表单的enctype属性，指定了采用POST方法提交数据时，浏览器给出的数据的MIME类型。 enctype属性可以取以下值：

• application/x-www-form-urlencoded 默认类型，控件名和控件值都要转义，控件名和控件值之间用=分隔。控件按照出现顺序排列，控件之间用&分隔。
• multipart/form-data 主要用于文件上传，这个类型上传大文件时，会将文件分成多块传送，每一块的HTTP头信息都有Content-Disposition属性，值为form-data，以及一个name属性，值为控件名。

2、<fieldset>,<legend>

fieldset标签是一个块级容器标签，表示控件的集合，用于将一组相关控件组合成一组。 fieldset有以下属性：

• disabled：布尔属性，设置后内部控件不可用，变成灰色状态
• form：指定控件组所属的form，值等于form的id属性
• name：该控件组的名称 legend标签用来设置fieldset控件组的标题，通常是fieldset内部的第一个元素，嵌入显示在控件组的上边框里面。

3、<label>

label标签是一个行内元素，提供控件的文字说明，帮助用户理解控件的目的。 label标签的一大优势是增加控件的可用性。控件比较小时，不容易点击，那么点击对应的label标签，也能选中该控件，点击label，就相当于控件本身的click事件。 label标签的for属性关联相对应的控件，值为对应控件的id属性。 label属性如下：

• for：关联控件的id属性
• form：关联表单的id属性。 一个控件可以有多个关联的label标签。

4、<input>

4.1 简介

input标签是一个行内元素，用来接收用户的输入。单标签。 input标签的共同属性：

• autofocus：布尔属性，是否在页面加载时自动获得焦点
• disabled：布尔属性，是否禁用该控件
• form：关联表单的id属性
• list：关联datalist的id属性，设置该控件相关的数据列表
• name：控件的名称，用于向服务器提交数据时，控件键值对的键名。只有设置了name属性的控件，才会向服务器提交。
• readonly：布尔属性，是否为只读
• required：布尔属性，是否为必填
• type：控件类型
• value：控件的值

4.2 类型

type属性决定了input的形式，有以下取值：

• text：普通的文本输入框， 有以下配套属性：maxlength/minlength/pattern/placeholder/readonly/size/spellcheck
• search：用于搜索的文本输入框
• button：没有默认行为的按钮，通常指定click事件的监听函数使用，建议尽量不使用
• submit：表单的提交按钮，点击后表单提交给服务器， 有以下配套属性：formaction/formenctype/formmethod/formnovalidate/formtarget
• image：表示将一个图像文件作为提交按钮， 有以下配套属性：alt/src/height/width/formaction/formenctype/formmethod/formnovalidate/formtarget
• reset：一个重置按钮，点击后所有表格控件重置为初始值，不建议使用
• checkbox：复选框
• radio：单选框。多个单选框的name属性值应该一致， 有以下配套属性：
• checked：布尔属性，表示是否默认选中当前项
• value：用户选中该项时，提交到服务器的值，默认为on
• email：只能输入电子邮箱的文本输入框， 有以下配套属性：maxlength/minlength/multiple/pattern/placeholder/readonly/size/spellcheck 可以搭配datalist标签，提供输入的备选项。
• password：密码输入框， 有以下配套属性：maxlength/minlength/pattern/placeholder/readonly/size/autocomplete/inputmode
• file：文件选择框，允许用户选择一个或多个文件，用于文件上传功能， 有以下配套属性：accept/capture(user/environment)/multiple
• hidden：一个不显示在页面的控件，用来向服务器传递隐藏信息：为每个表单生成一个独一无二的隐藏编号，防止伪造表单提交
• number：数字输入框，只能输入数字， 有以下配套属性：max/min/placeholder/readonly/step
• range：一个滑块，用户拖动滑块，选择给定范围之中的一个数值，常用于调节音量， 有以下配套属性：max/min/step， 与datalist标签配合使用，可以在滑动区域产生刻度
• url：一个只能输入网址的文本框， 有以下配套属性：maxlength/minlength/pattern/placeholder/readonly/size/spellcheck, 与datalist标签搭配使用，可以形成下拉列表供用户选择
• tel：一个只能输入电话号码的输入框， 有以下配套属性：maxlength/minlength/pattern/placeholder/readonly/size
• color：一个选择颜色的控件，值为#rrggbb格式
• date：只能输入日期的输入框，可以输入年月日，不能输入时分秒， 有以下配套属性：max/min/step
• time：只能输入时间的输入框，可以输入时分秒，不能输入年月日， 有以下配套属性：max/min/readonly/step
• month：只能输入年份和月份， 有以下配套属性：max/min/readonly/step
• week：输入一年中第几周的输入框， 有以下配套属性：max/min/readonly/step
• datetime-local：时间输入框，让用户输入年月日和时分，不支持秒， 有以下配套属性：max/min/step

5、<button>

button标签生成一个可点击的按钮，没有默认行为，需要用type属性或脚本指定按钮的功能。 有以下属性：

• autofocus：布尔属性，网页加载时，焦点在这个按钮
• disabled：布尔属性，表示按钮不可用
• name：按钮名称，与value配合使用，提交到服务器
• value：按钮值，与name配合使用，提交到服务器
• type：按钮类型：submit/reset/button/menu？
• form：指定按钮关联的form表单，值为form的id属性
• formaction：数据提交到服务器的目标URL，会覆盖form元素的action属性
• formenctype：数据提交到服务器的编码方式，会覆盖form元素的enctype属性：application/x-www-form-urlencoded,multipart/form-data,text/plain
• formmethod：数据提交到服务器使用的HTTP方法，会覆盖form元素的method属性：post/get
• formnovalidate：布尔属性，数据提交到服务器时关闭本地验证，会覆盖form元素的novalidate属性
• formtarget：数据提交到服务器后，展示服务器返回数据的窗口，会覆盖form元素的target属性：_self/_blank/_parent/_top

6、<select>

select标签用于生成一个下拉菜单。 有如下属性：

• autofocus：布尔属性，页面加载时是否自动获得焦点
• disabled：布尔属性，是否禁用当前控件
• form：关联表单的id属性
• multiple：布尔属性，是否可以选择多个菜单项
• name：控件名
• required：布尔属性，是否为必填控件
• size：

7、<option>,<optgroup>

option标签用在select、optgroup、datalist里面，表示一个菜单项。 有如下属性：

• disabled：布尔属性，是否禁用该项
• label：该项的说明
• selected：布尔属性，是否为默认值
• value：该项提交到服务器的值 optgroup表示菜单项的分组，通常用在select的内部 有如下属性：
• disabled：布尔属性，是否禁用该组
• label：菜单项分组的标题

8、<datalist>

datalist标签是一个容器标签，用于为指定控件提供一组相关数据，通常用于生成输入提示。

9、<textarea>

textarea是一个块级元素，用来生成多行的文本框， 有如下属性：

• autofocus：布尔属性，是否自动获得焦点
• cols：文本框宽度，默认为20
• rows：文本框高度
• disabled：布尔属性，是否禁用该控件
• form：关联表单的id属性
• maxlength：允许输入的最大字符数
• mixlength：允许输入的最小字符数
• name：控件的名称
• placeholder：输入为空时显示的提示文本
• readonly：布尔属性，是否为只读
• required：布尔属性，是否为必填
• spellcheck：是否打开浏览器的拼写检查
• wrap：输入的文本是否自动换行

10、<output>

output标签是一个行内元素，用于显示用户操作的结果， 有如下属性：for/form/name

11、<progress>

progress标签是一个行内元素，表示任务的完成进度，浏览器通常会显示为进度条。 有如下属性：max/value

12、<meter>

meter标签是一个行内元素，表示指示器，显示已知范围内的一个值，适用于任务的当前进度、磁盘已用控件、充电量等带有比例性质的场合，浏览器通常会显示为一个不会滚动的指示条。 有如下属性：min/max/value/low/high/optimum