表单的起源比js还要早，功能也已经很完善了，兼容性也很好。通过表单，网站管理员可以和用户进行交互。

创建表单

使用form标签创建表单，并设置method和action属性

method属性值post或get，post用于向服务器提交数据，get会向服务器提交并将返回的数据显示在浏览器地址栏

action属性是表单提交后服务器上用于处理的脚本的url

如：

组织表单元素

使用fieldset标签将表单中相关的元素包含为一个组，使之更容易组织和理解。

还可以在fieldset标签中使用legend标签添加标题(会显示在浏览器)，用于描述每个组的目的。

fieldset默认会显一个边框线，legend会显示在边框左上角

创建输入框

使用input标签并将type属性值设为text创建输入框

输入框有如下属性可以使用

提交到服务器的识别标志：name=”dataname”
与label进行关联：将laber标签的for值与input标签的id值设置相同即可
(可选)输入框初始文本：value=”default”
(可选)提示文本：placeholder
(可选)非空不能提交：required=”required”
(可选)自动获得焦点：autofocus或autofocus=”autofocus”
(可选)文本大小：size=”n”, n为字符个数(默认为20)
(可选)输入限制：maxlength=”n”, n为允许输入的最多字符个数
(可选)关闭自动完成：autocomplete=”off”(此属性可运用于整个form标签)
注意：input标签无结束标签

创建说明标签

使用label创建说明标签

使用for属性可以关联相关的表单字段，使之点击label时关联的字段会获取焦点(试试点击上面的文本框前面的文本)。

关联方法：将for值设为要关联字段元素的id

创建密码框

使用input标签并将type属性值设为password创建输入框

其属性和输入框相同

创建电子邮件框

使用input标签并将type属性值设为email创建电子邮件框

其属性和输入框相同

浏览器会自动验证邮箱的有效性（格式）

创建搜索框

使用input标签并将type属性值设为search创建搜索框

其属性和输入框相同

创建电话框

使用input标签并将type属性值设为tel创建电话框

其属性和输入框相同

创建URL框

使用input标签并将type属性值设为url创建url框

其属性和输入框相同

创建单选按钮

使用input标签并将type属性值设为radio创建电话框

设置好如下属性：

name=”radioset” 同上面一样，name是用来设置识别数据的, 同一组的name应该设为相同
id=”label-id” id值应该和相关联的label的for值一样
value=”data” 按钮被选中时发送到服务器的文本
checked或checked=”checked” 一组按钮中默认被选中的
最后创建label文本用于识别该按钮

创建复选框

使用input标签并将type属性值设为checkbox创建电话框

属性设置和单选框相同

创建文本区域

使用textarea标签创建文本区域
设置好如下属性：

id=”label-id” id值应该和相关联的label的for值一样
name=”radioset” 同上面一样，name是用来设置识别数据的
cols=”n” 文本区域的宽度，单位是字符
rows=”n” 文本区域的高度，单位是字符
开始标签和结束标签之间的内容即是初始文本内容
(可选)maxlength=”n” 可输入最大的字符数

创建选择框

使用select标签创建选择框

设置好如下属性：

id=”label-id” id值应该和相关联的label的for值一样
name=”radioset” 同上面一样，name是用来设置识别数据的
(可选)size=”n” 选择框高度，单位为行
使用option标签创建选择框选项，并设置好如下属性：

value=”option-value” 值会发送到服务器
(可选)selected=”selected” 设置此选项为默认选中
使用optgroup标签对选项进行分组，只要将标签包含要分组的option标签即可，并且可以使用label属性添加分组说明

例子 你最喜欢的运动？

创建文件上传

使用input标签并将type属性值设为file创建文件选择按钮

设置好如下属性：

id=”label-id” id值应该和相关联的label的for值一样
name=”dataname” 同上面一样，name是用来设置识别数据的
(可选)size=”n” 文件全路径长度
(可选)multiple或multiple=”multiple” 设置可以上传多个文件
例子 选择文件: 选择文件

创建隐藏字段

使用input标签并将type属性值设为hidden创建隐藏字段(隐藏字段不会显示在浏览器中)

设置好如下属性：

name=”dataname” 同上面一样，name是用来设置识别数据的
value=”data” 要提交的信息本身
创建提交按钮

使用input标签并将type属性值设为submit创建提交按钮

使用value值设置显示在按钮上的文本

使用图像作为提交按钮：

例子 description

使用图像和文本作为提交按钮：

使用button标签将type属性设为submit，并包围使用img标签和文字即可

禁用表单元素

对要禁用的元素使用disabled属性即可，之后可以通过js将表单元素改为可用。

根据状态设置样式

使用伪类选择

• :focus 获得焦点的字段
• :checked 选中的单选按钮或者复选框
• :disabled 禁用的字段
• :enable 可用的字段
• :required yourequired的字段
• :option 和required相反
• :invalid 值与pattern不匹配的字段
• :valid 与invalid相反