1.1.1 label控件
顾名思义，label 控件用来为每个表单元素添加有意义的描述，并且，单击它将导致相关联的表单元素获得焦点。因此， label 控件可以优雅地扩大表单元素的点击区域，能够改善表单的易用性和可访问性。
比如，单纯的复选框，用户要点击那个小方框才能进行选择。由于这个点击区域本身很小，用户很难点击到合适的位置。如果使用 label 元素，用户就可以单击 label 元素来操作复选框，可以大大提升表单的可访问性和可用性。
图 33 label控件
将 label 控件与表单控件关联起来非常容易，并且有两种方式来实现：
一种是隐式关联，即把表单控件放在 label 控件中，让 label 控件包含表单控件，两个控件便会自动关联：
另一种是显式关联，即把 label 控件 for 属性的值，设置为所要关联的表单控件的 id，两个控件就被显式地关联起来：
显式关联对提升表单的可用性和可访问性都有帮助，假如访问者与标签有交互，与之对应的表单控件就会获得焦点。
这种关联还可以让屏幕阅读器将文本标签与相应的控件一起念出来，这对不了解表单字段含义的视觉障碍用户来说是多么重要。因此，强烈建议在 label 元素中包含 for 属性。
说明：
在提升表单的可用性和可访问性方面，除了使用 label 控件来扩大表单元素的点击区域，还可以通过 accesskey属性，为表单元素设置快捷键。这样的话，就可以通过键盘操作，让表单元素获得焦点，更加方便。如：
这样一来，当用通过鼠标户点击这个 label 控件，或在键盘上同时按下 alt + a 键，都可以让 的文本输入控件获得焦点。
需要注意的是，accessKey属性所设置的快捷键，不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。
如果在CSS中，为 label 指定cursor: pointer;，当访问者指向标签时，就会显示为手形，而不是默认的箭头，就会提示用户这是一个可以操作的元素，也能提升表单的可用性和可访问性。
1.1.2 input控件
input 控件是单行输入型控件，用来接受用户输入的信息。可以在 form 元素的开始标签和结束标签之间，添加 input 元素来创建 input 控件。input 元素是一个带有属性的空元素，格式为：
其中， type 属性用来指定控件的类型；name 属性用来指定控件的名称，服务器端脚本就根据名称来获得文本框中的值；value 属性指定控件的默认值。基本控件类型见表 31。
表 31 基本输入型控件
除了上述这些基本的输入型控件，在HTML5中，又新增了很多输入型控件，使控件类型更加丰富。新增的输入型控件类型见表 32。
表 32 新增的输入型控件
开发人员不必担心这些控件的兼容性问题，在不支持这些新类型的浏览器中，它们会被优雅降级，退化成普通的单行文本输入框。接下来对这些输入型控件进行简单的介绍。
text控件
type=text 定义单行文本输入框，用户可在其中输入文本。如果未显式设置 type 属性，则 input 控件的默认类型就是 text。
必须为每个文本框设置 name 属性，只有在文本框需要默认值的情况下，才需要设置 value 属性。除此之外，还可以设置其他属性，如required、placeholder 属性等。如：
运行结果如图 34 所示：
图 34 单行文本框
另外，对于文本输入框，包括 text、password、file、search、tel 、url、email，还可以通过 minlength 属性指定最少必须输入的字符数，通过 maxlength 属性指定最多可输入的字符数。
当用户输入的字符数小于 minlength 属性值，浏览器就会阻止用户提交表单；当用户输入的字符数超过 maxlength 属性值，浏览器就会阻止用户继续输入。
hidden控件
type=hidden定义隐藏的文本框，它不会直接显示给用户。在提交表单时，隐藏文本框的信息也会被提交到服务器。因此，通常用它来存储表单先前收集到的信息，并连同当前表单的数据一起发送给服务器，供表单处理程序使用。如：
尽管用户不会看到这个文本框，但在提交表单时，名称“country”和值“China”会随着表单一起发送给服务器。
切记，虽然隐藏的文本框不会直接显示在网页中，但不要将密码、信用卡号等敏感信息放到隐藏的文本框中，因为用户仍然可以通过查看HTML源代码看到它。
password控件
type=password定义密码输入框。密码框与文本框的唯一区别是，密码框中输入的文本不会直接显示，而是显示为星号或实心圆。如：
运行结果如图 35 所示：
图 35 密码框
事实上，密码框提供的唯一保护措施，就是防止其他人看到用户输入的密码，以星号或实心圆代替而已。在提交表单时，还是以明文的方式，将用户输入的真实值发送到服务器，信息在发送过程中并没有加密。
radio控件
type=radio 定义单选框，通过 name 属性定义单选框的名称，通过 value 属性定义单选框的值。
一个表单上，name 属性值相同的单选框被归为一组，为不同 radio 设定不同的 value 值，通过获取指定 name 的值，就知道哪个按钮被选中了，不用单独判断。
一组单选框中，最多只能有一个选项被选中。当用户点击一个选项时，该选项被选中，其他选项都会自动变为非选中状态。可以通过 checked 属性，定义默认选中状态。如：
性别：男
女
运行结果如图 36 所示：
图 36 单选框
上述代码中，value="male" 的选项定义了 checked 属性，当页面打开时，它默认被选中。当然，它只是默认被选中而已，用户可以通过点击来自由选择其他选项。提交表单时，单选框的名称和被选中的单选框对应的值，将会被提交到服务器端。
原则上，只能有一个选项定义 checked 属性，但如果多个选项同时定义了 checked 属性，则是最后一个选项被默认选中。
checkbox控件
type=checkbox 定义复选框，通过 name 属性定义复选框的名称，通过 value 属性定义复选框的值。
表单上 name 属性值相同的复选框被归为一组，为不同 checkbox 设定不同的 value 值。提交表单时，每个复选框的名称及复选框对应的值，都会被提交到服务器端。
一组复选框中，可以有任意多个选项被选中。当用户点击一个选项时，该选项被选中，再次点击时，该选项会取消选中。可以通过checked属性，定义某些选项默认被选中。如：
爱好：音乐
游泳
足球
轮滑
运行结果如图 37 所示：
图 37 复选框
file控件
type=file 定义文件选择框，供用户用户向服务器上传文件。如：
头像:
文件选择框在HTML4之前就已经存在，并表现为一个单行文本输入框和一个“浏览…” 按钮。
图 38 文件选择框外观
在HTML5中，不再有文本输入框，而是一个“选择文件”的按钮。在用户未选择文件时，显示“未选择任何文件”字样，用户选择文件后，在按钮的右侧显示文件的名称。
图 39 选择文件前后
在HTML5中，文件选择框增加了两个属性：一个是 accept 属性，用来指定允许的文件类型，多个MIME类型用英文逗号分开；一个是 multiple属性，表示允许选择多个文件。如：
添加 accept 属性后，点击“选择文件”的按钮，在弹出的对话框中，默认的文件类型就是所设置的文件类型。当然，accept 属性只是设置默认的文件类型，它并不是禁止用户选择其他类型的文件。如图 310 所示：
图 310 限制文件类型
从上图可以看出，用户仍然可以将文件类型改为所有文件，来选择任意类型的文件。因此，如果要禁止其他类型的文件，则要在提交表单时进行检查，如果不符合要求，给出相应的提示信息，并拒绝上传。
添加multiple属性后，点击“选择文件”的按钮后，就可以按住Ctrl键，在弹出的对话框中选择多个文件。如：
多文件上传:
选择多文件后，在“选择文件”按钮的右侧显示诸如“4个文件”字样，表示用户选择了4个文件。当鼠标移动到文字上时，浏览器自动显示这4个文件的名称。如图 311 所示：
图 311 显示选择的文件列表
在浏览器的默认方式下，用户选择文件后，只能看见文件的名称，但有时候却希望看到更多的信息，如文件的大小、类型等。
事实上，当用户选择文件时，浏览器会将文件列表保存在 files 属性中，同时还会触发 onchange 事件。FileList 对象是 file 对象的列表，file 对象的name、size、type、lastModifiedDate属性，分别用来保存文件的名称、大小、类型、最后修改日期信息。因此，要实现这个功能也不难，只需少量的 Javascript 代码即可。
首先，为文件选择框注册 onchange 事件，并定义一个显示区域：
nChange="showFiles " name="picture" multiple />
然后，在 onchange 事件的处理函数中，遍历FileList 对象，获取每个文件的名称、大小、类型，保存在一个表格中，并在 的区域中显示出来：
function showFiles {
var strText = "
| 文件名称 | 文件类型 | 文件大小 |
|---|---|---|
| " + files[i].name + " | ";" + files[i].type + " | ";" + files[i].size + " byte | ";
document.getElementById.innerHTML = strText;
}
运行结果如图 312 所示：
图 312 显示选择的文件详细信息
需要注意的是，要让用户能够上传文件，必须将 form元素的 method 属性设置为 post，并将 enctype 属性设置为 multipart/form-data，enctype 属性可以确保文件采用正确的格式上传。
除了上述这些基本的输入型控件，在HTML5中，又新增了很多输入型控件。在不支持这些新类型的浏览器中，它们会被优雅降级，成为普通的文本输入框。HTML5新增的输入型控件有：
search控件
type=search 定义搜索框，在外观上，它跟普通的文本输入框没什么区别，但是浏览器可能会为搜索自动渲染成圆角。当用户在搜索框中输入文本后，它右边会有一个小×，方便用户清除输入的数据。运行结果如图 313 所示：
图 313 搜索框
tel控件
type=tel 定义电话号码输入框。由于国际上没有统一的电话号码格式，因此，电话号码输入框跟普通的文本输入框没什么区别。
虽然看起来它跟普通的文本输入框没什么区别，但它却有一些很有用的特性，用于帮助验证用户输入的内容。如，使用 pattern 属性来定制验证规则：
上述代码使用正则表达式，来对用户输入的内容进行限制，对于这个电话输入框，pattern 属性要求“只接受以下格式的输入：xxx-xxxxxxxx，其中x 均为数字”，因为中国的固定电话号码都是这样的格式。
在提交表单时，现代浏览器会对 tel 框中输入的文本进行检查，确保其符合验证规则的格式。如果格式不合法，会显示警告信息，阻止提交表单，并让该文本框获得焦点，以方便用户修改文本。运行结果如图 314 所示：
图 314 电话号码输入框
此外，当电话号码输入框获得焦点后，许多触屏设备，会弹出电话号码键盘方便用户输入，这不仅使输入大为简化，也能防止在移动设备上输入无效字符。
url控件
type=url 定义URL输入框，在外观上，它跟普通的文本输入框看上去没什么区别。但是，在提交表单时，现代浏览器会对URL框中输入的文本进行检查，确保其符合URL的格式。如果格式不合法，会显示警告信息，阻止提交表单，并让该文本框获得焦点，以方便用户修改文本。运行结果如图 315 所示：
图 315 URL输入框
需要注意的是，www.waibo.wang 并不是有效的URL，因为URL 必须以http:// 或https:// 开头。因此，最好使用占位符提示访问者，或者通过解释文本中给出合法的格式。
此外，当URL输入框获得焦点后，许多触屏设备，会根据输入类型改变键盘模式，如键盘上出现Go、斜杠、.com等。
email控件
type=email 定义 email 输入框，在外观上，它跟普通的文本输入框看上去没什么区别。但是，在提交表单时，现代浏览器会对 email 框中输入的文本进行检查，确保其符合电子邮件地址的格式。如果格式不合法，会显示警告信息，阻止提交表单，并让该文本框获得焦点，以方便用户修改文本。运行结果如图 316 所示：
图 316 email输入框
email输入框的一个非常有用的功能是，它能够阻止用户在该字段填入多个 email 地址。 除非你在input标签中设置multiple属性，否则只允许使用一个单一地址：
此外，许多触屏设备，会根据输入类型改变键盘模式，如键盘上出现邮箱地址的@符号等。
number控件
type=number 定义数字输入框。默认情况下，对输入的数值没有范围限制，可以通过min 和max属性设定允许输入的最小值和最大值、通过 step 属性设定步长、value属性设置默认值。如：
用户可以直接在文本框中输入数字。不过，为了方便输入，当数字输入框获得焦点后，浏览器会为它提供控制按钮，允许用户点击向上或向下箭头来改变文本框中的值。运行结果如图 317 所示：
图 317 数字输入框
range控件
type=range 定义有取值范围的数字输入框，让用户在指定的数值范围内进行选择。默认情况下，其取值范围为0~100，默认值为其中间值50。可以通过设置min、max属性来改变其取值范围，通过设置value属性来改变其默认值。
range类型控件在浏览器将显示一个滑动条，让用户拖动鼠标来选择某数值，在两个方向移动时，以其步长增大或减小当前值。默认步长为1，可以通过设置step改变其步长。如：
上述数字输入框的取值范围将是 60~100，默认值为80，步长是5。运行结果如图 318所示：
图 318 有范围的数字输入框
有点遗憾的是，浏览器并不显示其取值范围和用户当前选择的值。这样，用户无从得知自己当前选择的值，而人们常常有又想看到取值范围和当前值。
其实，这个功能实现起来并不难，只需使用 output 控件和简单的Javascript即可实现。output控件是HTML5中专门用来定义不同类型输出的控件。
首先，在 range 控件后面增加 output 控件。然后，为range元素增加 onChange 事件的处理程序，当 range 的值改变时，就显示在 output 控件中，onChange="
output.value = value"，就这么简单。需要注意的是，onChange事件中元素的 id 必须与 range 控件的 id相同。代码如下：
nChange="output.value=value">
这样一来，一旦移动滑动条，就会在 output 控件中显示当前选择的值。当然，除显示当前值外，如果能在range控件上显示其取值范围，这样就更人性化了。其实这也很简单，只需要简单的CSS即可实现，代码如下：
input[type=range]:before {
content: attr;
}
input[type=range]:after {
content: attr;
}
这里是通过CSS的属性选择器和伪元素选择器，在 range 控件的前面显示其最小值，后面显示其最大值。运行结果如图 319 所示：
图 319 显示范围和当前值
color控件
type=color 定义颜色选择器控件，相当的给力，使用也很简单。可以通过 name 属性定义控件的名称，通过 value 属性定义控件的默认颜色。如：
选取颜色：
在Google Chrome浏览器中的运行结果如图 320 所示：
图 320 颜色选择框
在 input 控件有个颜色为 #34538b 的背景，当在控件上点击，则会弹出操作系统自带的颜色拾取器，使用起来非常方便。如图 321 所示：
图 321 颜色拾取器
date pickers控件
Date Pickers是HTML5新增的日期选择框，方便用户根据预定的格式输入日期、时间等信息。
为了方便输入，浏览器会为日期选择框提供控制按钮，允许用户点击向上或向下箭头来改变文本框中的值，当用户输入数据后，在它右边会有一个小×，方便用户清除输入的数据。对于Date类型，浏览器默认还提供一个箭头，供选择日历。如图 322 所示：
图 322 日期选择框
Date Pickers有以下几种类型，每种类型有相应的日期格式：
表 32 Date Pickers类型
1.1.3 textarea控件
textarea控件用来创建一个支持多行的文本输入区域，如果没有使用 maxlength 属性限制文本区域的最大字符数量，访问者可以输入多达 32700 个字符。
可以通过 rows 属性和 cols 属性，来定义 textarea 控件的默认尺寸，即可见的行数和列数。由于 textarea 控件没有 value 属性，在定义 textarea 控件时，出现在
上述代码定义了一个多行输入文本区域，其默认尺寸为 5 行×50 列，并包含默认值。运行结果如图 323 所示：
图 323 textarea控件
定义 rows 属性后，当用户输入的行数超过 rows 属性设定的值后，textarea 控件会自动添加滚动条。因此，为了方便用户使用，可以根据应用场景，大概预测一下用户要输入文本的行数，并设定合理的行数。当然，用户可以通过拖曳 textarea 控件右下角的斜线，来改变控件的大小。但是，如果设置了textarea { resize: none; }，就无法执行拖曳操作了。
虽然可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过，在实际应用中，最好还是使用 CSS 的 height 和 width 属性，来显式设置 textarea 控件的宽度和高度。
可以通过 placeholder 属性来定义 textarea 控件的占位文本，如果同时定义了默认值和 placeholder 属性，则优先显示默认值。
提交表单时，textarea 元素的 name 属性值和用户在
1.1.4 select控件
select控件用于创建下拉列表框，并通过 option 元素创建列表中的选项，供用户从中选择。
定义 select 控件时，在 select 元素中设置 name 属性，并在每个option 元素中，通过 value 属性定义每个选项的值，通过 selected 属性指定该选项被默认选中。在 之间的文本，为该选项的显示值。
select 控件支持单选，也支持多选，还可以对选项进行分组显示。提交表单时，select 元素的 name 属性值，以及所有被选中的 option 元素的 value 属性值，都将会被提交到服务器端。
1） 单选的select控件
默认情况下，select控件是单选的，即用户只能从下拉列表中选择一项。如：
上述代码定义了一个只能单选的下拉列表，由于为Snipey 设置了selected属性，在页面加载时，它默认处于选中状态。运行结果如图 324 所示：
图 324 选项默认被选中
事实上，selected属性只是让某个选中默认被选中而已，页面加载完成后，用户可以随意选择任意一个选项。如，用户可以选择 Max，让它处于被选中状态，如图 325 所示：
图 325 改变被选中的选项
2）可多选的select控件
当设置multiple属性后，列表就支持多选，就可以有多个选项被同时选中。当然，也可以让多个选项默认被选中。
对于单选的下拉列表，只有一个选项可见的。支持多选后，就可以通过 size 属性，来定义可见的选项数目。size属性的值必须大于0，否则设置无效，并使用浏览器的默认值。如：
上述代码定义了一个可多选的下拉列表，运行结果如图 326 所示：
图 326 可多选的下拉列表
如果 size 属性的值小于选项的个数，就会显示为一个有滚动条的列表；如果 size 属性的值大于选项的个数，用户就可以通过点击空白区域，让所有的选项处于未选中状态。
说明：
关于size的默认值，各浏览器不尽相同。一般都是4，也就是说，默认有四个元素可见，即便是选项数少于四个，它默认也会保留显示四个元素的空间。
关于size的设置，各浏览器的支持也不尽相同，比如Google Chrome和Opera，如果用户设置的size小于默认值4，则设置无效，它要求最少有4个元素可见。Foxfire则不同，允许设置的size小于默认值，以用户设置的数目为准。
3） select的选项分组显示
当使用一个较长的选项列表时，对相关的选项进行组合显得更人性化。可以使用optgroup标签对选项进行分组，并通过 optgroup 标签的 label 属性来定义分组的标题。
如，把选项分为三组，它们分别是 group1、group2 和 group3：
浏览器通常会对 optgroup 中的 option 缩进，从而将它们和optgroup 的标题文本区分开来。运行结果如图 327 所示：
图 327 选项分组显示
optgroup 标签中的内容不能被选择，它的值也不会提交给服务器。事实上，optgroup 标签只是让选项分组显示而已，并没有对 select 控件产生其他任何影响。你仍然可以设置 multiple属性，让菜单支持多选，也可以为 option 增加 selected 来设置默认选项等。
1.1.5 keygen控件
keygen控件用于定义表单的密钥对生成器，其作用是提供一种验证用户的可靠方法。
当提交表单时，会生成两个密钥，一个是私钥，一个公钥。私钥存储于客户端，公钥则被发送到服务器。公钥可用于之后验证用户的客户端证书。
1.1.6 progress控件
progress控件用来定义一个进度条，用来表示页面中某个任务完成的进度。
progress控件可以是确定的进度，则当前进度是介于某个最小值与最大值之间的值。这种情况下，进度条处于一个静止状态。
则表示进度值介于0到100之间，当前进度是35。则进度条静止在35的地方，如图 328 所示：
图 328 progress控件
progress控件也可以是不确定的进度，仅表示任务正在进行中，而不知道什么时候结束。这种情况下，浏览器默认会显示一个活动的进度条，仅表示任务正在进行中。当然，也可以通过Javascript来更新进度，实现真正的进度条。
progress控件具有可读写value、max两个属性：
value属性表示任务已完成的进度值，可通过DOM元素progress.value进行操作；
max属性表示任务所需的总进度值，可通过DOM元素progress.max进行操作；
对于一个确定性的任务，只要能知道已完成进度值及总进度值，就可以通过Javascript实现真实的动态进度条。
1.1.7 meter控件
meter控件用来表示已知范围，且可度量的等级标量或分数值，如考试成绩等。
其中，value属性规定标量的实际测量值，如果不指定，默认为0；min属性规定标量的最小值，如果不指定，则为0；max属性规定标量的最大值，如果不指定，则为1；low属性规定标量的实际最小值；high属性规定标量的实际最大值；optimum 属性规定标量的最优值的位置。如果浏览器不支持meter标签，则显示标签之间的文本。
low、high、optimum都必须在min与max值之间，用这三个属性值把meter控件展示的测量范围划分为low、medium、high三部分，以此来判断该测量的哪个部分是最优的。
如，low、high将考试成绩[0 ~ 100]划分为[0 ~ 60]、[60 ~ 90]、[90 ~ 100]三个范围，optimum指明最优位置在100处，此时该值比high值大，那么表示value值越大越好；类似的，如果optimum值比low小，则表示value值越小越好；如果optimum值落在low值与high值之间，则表示value不高不低最好。
1.1.8 fieldset控件
如果一个表单上有很多信息需要填写，可以使用 fieldset 控件将相关的元素组合在一起，使表单更容易理解。表单越容易理解，访问者就越有可能正确地填写表单。
fieldset即field set，顾名思义，就是表单中field的集合。从名称就能知道，它会生成 field 的集合，用于对表单中的元素进行分组。一个表单中可以有多个fieldset。
为了识别每个 fieldset 的作用，还可以使用 legend 元素为每个 fieldset 提供一个标题，用于描述每个组的目的。legend 是 fieldset 的第一个子元素。如：
浏览器会以特殊方式来显示 fieldset，一般会为每个分组添加一个边框，把 fieldset 中的所有元素包围起来，让用户很容易就能看出它们是一组。运行结果如图 329 所示：
图 329 fieldset控件
当然，如果你不喜欢浏览器的默认样式，也可以自己为 fieldset 和 legend 添加样式，让表单更吸引人，更便于使用。
