HTML 5(三)——HTML 5表单相关元素与属性

HTML 使用表单向服务器提交请求，表单、表单控件的主要作用就是收集用户输入，当用户提交表单时，用户输入内容将被作为请求参数提交到远程服务器。因此在Web编程中，表单主要用于收集用户输入的数据。在需要与用户交互的Web页面中，表单、表单控件都是极为常用的。

HTML 5在保留原有HTML表单控件、属性的基础上，大大增强了表单、表单控件的功能，包括为所有表单控件都增加了form属性，这样就避免了表单控件必须放在<form.../>元素中的硬性规定；为所有表单控件都增加了formaction、formxxx属性，这样就可以避免书写大量的JavaScript代码……不仅如此，HTML 5新增的校验API，可以直接在表单控件中通过required、pattern等属性来指定客户端校验规则，这完全可以代替原来用JavaScript执行的客户端校验。

一、HTML原有的表单及表单控件

1.表单元素

<form.../>元素可以指定id、style、class等核心属性，哈可以指定onclick等事件属性。除此之外还可以指定如下几个属性。

• action:指定当单机表单内的“确认”按钮时，该表单被提交到哪个地址。该属性既可以是一个绝对地址，也可以指定一个相对地址。该属性必填。
• method:指定提交表单时发送何种类型的请求，该属性值可为get或post，分别用于发送GET或POST请求。通常建议发送POST请求。该属性必填。
• enctype:指定对表单内容进行编码所使用的字符集
• name:指定表单的唯一名称，建议该属性值与id属性值保持一致
• target:指定使用哪种方式打开目标URL。该属性在之前已经讲过，在此不再赘述。

表单的enctype属性用于指定表单数据的编码方式，该属性有如下三个值。

• application/x-www-form-urlencoded:这是默认的编码方式，它只处理表单空间里的value属性值，采用这种编码方式的表单会将表单控件的值处理成URL编码方式。
• multipart/form-data:这种编码方式会以二进制流的方式来处理表单数据，这种编码方式会把文件域指定文件的内容也封装到请求参数里。当需要通过表单上传文件时使用该属性值。
• text/plain:该编码方式主要适用于直接通过表单发送邮件的方式。

大部分表单控件都可以获得鼠标焦点，响应鼠标时间，因此他们都可以指定onfocus、onblur属性，分别用于设置得到焦点、失去焦点的时间响应。而这些表单控件都可以指定一个tabIndex属性，按Tab键将导致输入焦点转移到tabIndex属性值+1的空间上。通过设置tabIndex属性，让用户无需使用鼠标，就可以让输入焦点在个表单控件上转移。

2.使用input元素

input元素时表单控件元素中功能最丰富的，通过设置input元素的type属性，就可以生成以下几种输入元素：

输入元素	type属性值
单行文本框	text
密码输入框	password
隐藏框	hidden
单选框	radio
复选框	checkbox
图像域	image
文件上传域	file
提交、重设、无动作按钮	分别submit、reset、button

input元素除id、style、class、onclick、onfocus、onblur等属性外，还可以指定如下几个属性：

• checked
• disabled
• maxlength
• readonly
• size
• src

3.使用label定义标签

虽然<label.../>元素定义的标签确实只是输出普通文本，但<label.../>元素生成的标签有一个额外的作用：当用户单击<label.../>所生成的标签时，该标签关联的表单控件元素就会获得焦点。

让标签和表单控件关联有两种方式。

• 隐式使用for属性：指定<label.../>元素的for属性值为所关联表单控件的id属性值。
• 显示关联：将普通文本、表单控件移液器放在<label.../>元素内部即可。

4. 使用button定义按钮

<button.../>按钮与<input type="button" />相比，提供了更为强大的功能和更丰富的内容。<button>与</botton>标签之间的所有内容都是该按钮的内容，其中包括任何可接受的正文内容，不如文本或图像。

<button.../>元素可以指定id、style、class等核心属性，还可以指定onclick等事件响应属性。除此之外，还可以指定如下几个属性。

• disabled：指定是否禁用此按钮。
• name：指定该按钮的唯一名称。
• type：指定该按钮属于哪种按钮，该属性值只能是button、reset或submit其中之一。
• value：指定该按钮的初始值。此值可通过脚本进行修改。

5. 列表框和下拉菜单

<select.../>元素用于创建列表框或下拉菜单，该元素必须和<option.../>元素结合使用，每个<option.../>元素代表一个列表项或菜单项。

<select.../>元素可以指定id、style、class等核心属性，该元素仅可以指定onchange事件属性——当该列表框或下拉列表项内的选中选项发生改变时，出发onchange事件。除此之外<select.../>元素还可以指定如下几个属性

• disabled:
• multiple:设置该列表框和下拉菜单是否允许多选。
• size:指定该列表框内可同时显示多少个列表项。

一个<select.../>元素到底是生成列表框，还是生成下拉菜单，完全是由指定了size或multiple属性来决定，只要为<select.../>元素指定了这两个属性之一，浏览器就会生成列表框，否则就是下拉菜单。

在<select.../>元素里，只能包含如下两种子元素。

• <option>:
• <optgroup>:

<option.../>元素可以指定id、style、class等核心属性，还可以指定onclick等事件响应属性。除此之外，还可以指定如下几个属性。

• disabled:
• selected:指定该列表项初始状态是否处于被选中状态。
• value:

<optgroup.../>元素可以指定id、style、class等核心属性，还可以指定onclick等事件响应属性。除此之外，还可以指定如下两个属性。

• label
• disabled

6. 使用textarea定义文本域

<textarea.../>元素用于生成多行文本域，<textarea.../>元素可以指定id、style、class等核心属性，还可以指定onclick等事件响应属性。由于textarea的特殊性，它可以接收用户输入，用户可以选中文本域内的文本，所以还可以指定onselect、onchange两个属性，分别用于响应文本域内文本被选中、文本被修改事件。除此之外，该元素也可以指定如下几个属性。

• cols:用来指定文本域的宽度，必填。
• rows:用来指定文本域的高度，必填。
• disabled
• readonly

二、HTML 5新增的属性与元素

除了前面介绍的表单元素之外，HTML 5新增了少量元素。但HTML 5为原有的表单、表单控件元素新增了大量属性，这些属性极大地增强了HTML表单的功能。

1. HTML 5为表单控件新增的属性

HTML 5为表单控件新增了大量属性，这些属性都是一些非常实用的功能，这些功能可以实现原来需要使用JavaScript才能实现的效果。

1.1 form 属性

通过为表单控件指定form属性，可以让表单控件定义在<form.../>元素之外，从而提高灵活性。

1.2 formaction属性

相信绝大部分开发者以前都会遇到这样一个场景：页面中有一个表单，该表单内包含了两个以上的提交按钮，但程序需要不同的按钮提交到不同的action。

例如，页面中有一个填写用户信息的表单，这个表单内包含了“注册”、“登录”两个按钮，程序需要这两个按钮提交给不同的处理逻辑。在HTML 5规范以前，我们只能通过JavaScript来实现：当浏览者单击不同按钮时，通过JavaScript控制动态地修改<form.../>元素的action属性。

HTML 5的formaction属性专门用于处理上面的场景：对于<input type="submit" .../>、<input type="image" .../>、<button type="submit" .../>元素，都可以指定formaction，该属性即可动态地让表单提交到不同的URL。

1.3 formxxx属性

formxxx属性是一些与formaction极为相似的属性，对于<input type="submit" .../>、<input type="image" .../>、<button type="submit" .../>元素，都可以指定formenctype、formmethod、formtarget等属性，其中：

• formenctype：可以让按钮动态地改变表单的enctype属性。
• formmethod：可以让按钮动态地设置表单以POST或GET方式提交。
• formtarget：可以让按钮动态地改变表单的target属性。

1.4 autofocus属性

当为某个表单控件增加该属性后，浏览器打开该页面时，该组件就会自动获得焦点。

1.5 placeholder属性

这个属性也非常实用。在一些用户界面足够人性化的页面里，当用户还未在单行文本框、多行文本域中输入内容时，单行文本框、多行文本域就显示了对用户的提示信息。一旦用户开始输入，提示信息就会自动消失。

在HTML 5规范以前，为了实现上面的效果，只能通过JavaScript脚本来实现。HTML 5规范为这种实现提供了placeholder属性，该属性的值就是单行文本框、多行文本域显示的提示信息。

1.6 list属性

在HTML 5规范以前，HTML表单控件没有类似于ComboBox的组件（相当于文本框与下拉菜单结合的组件，该组件即允许用户输入，也允许用户通过下拉菜单进行选择）。HTML 5的list属性弥补了这个不足，list属性的值应该是一个<datalist.../>组件的id。也就是说，list属性必须与<datalist.../>元素结合使用。

• <datalist.../>：该元素相当于一个“看不见”的<select.../>元素，用于生成一个隐藏的下拉菜单。<datalist.../>所能包含的子元素与<select.../>元素完全相同。该元素用于与指定了list属性的<input.../>元素结合使用。当双击指定了list属性的文本框时，该文本框将会显示<datalist.../>生成的下拉菜单。

1.7 autocomplete属性

该属性主要用于与list属性结合使用，当为文本框指定了有效的list属性之后，该文本框下面总会显示一个下拉菜单供用户选择。但在有些时候，可能出于安全性考虑，开发者不想让某些用户看到这个下拉菜单，则可以通过autocomplete属性来实现。该属性支持如下两个属性值：

• on
• off

2. 功能丰富的input元素

HTML 5进一步丰富了type属性的类型，从而允许通过<input.../>元素来生成各种不同的表单控件。HTML 5为<input.../>元素的type属性新增了如下几种可能的类型。

• color：让<input.../>元素生成一个颜色选择器。当用户在颜色选择其中选中指定颜色后，该文本框内自动显示用户选定的颜色，该文本框的value为该颜色的值，形如#xxxxxx的颜色值
• date：让<input.../>元素生成一个日期选择器
• time：让<input.../>元素生成一个时间选择器
• datetime：让<input.../>元素生成一个UTC时期、时间选择器。
• datetime-local：让<input.../>元素生成一个本地日期、时间选择器。
• week：让<input.../>元素生成一个供用户选择第几周的文本框。
• month：让<input.../>生成一个月份选择器。
• email：让<input.../>声称一个E-mail输入框。浏览器会自动检查该文本框的value的格式是否符合E-mail格式。若不符合，浏览器将不会允许提交表单，并自动生成提示。该类型下，<input.../>元素可指定如下属性：

multiple：该属性的值可以是multiple或省略属性值。如果指定该该属性值，则表明该文本框内允许输入多个E-mail地址。

• tel：让<input.../>元素生成一个只能输入电话号码的文本框。但这种类型的文本框，浏览器不会执行额外的检查，用户完全可以输入任意字符串。
• url：让<input.../>元素生成一个URL输入框。浏览器会自动检查是否符合URL格式。若不符合，将会自动生成提示。
• number：让<input.../>元素生成一个只能输入数字的文本框
• range：让<input.../>元素生成一个拖动条，通过拖动条使得用户指定输入指定范围、指定步长的值。该类型下，该文本框还可指定如下3个属性。

min：指定该拖动条的最小值。
max：指定该拖动条的最大值。
step：指定该拖动条的步长。

• search：让<input.../>元素生成一个专门用于输入搜索关键字的文本框。这种类型的文本框与type="text"的文本框并没有太大区别。

3. HTML 5新增的表单控件

<output.../> 元素用于显示输出，比如计算结果或脚本的输出。<output.../>必须属于某个表单。除了可以指定id、style、class、form等属性外，还可以指定如下属性。

• for：该属性指定该元素将会显示哪个元素的值。该属性应该是其他元素的id。

三、HTML 5增强的文件上传域

在HTML 5以前，HTML文件上传域的功能具有很大的局限性，这种局限性主要体现为如下两点。

• 每次只能选择一个文件进行上传。
• 客户端代码只能获取被上传文件的文件路径，无法访问实际的文件内容。

HTML 5规范改变了这种现状，HTML 5允许同时选择多文件上传，而且HTML 5允许客户端JavaScript访问实际的文件内容。

1. FileList对象与File对象

HTML 5为type="file"的<input.../>元素增加了如下两个属性。

• accept：该属性控制允许上传的文件类型。该属性值为一个或多个MIME类型字符串。多个MIME类型字符串之间应以逗号分隔。
• multiple：该属性设置是否允许选择多个文件。

从上面介绍可以看出，只要增加multiple属性，即可让该文件上传域允许同时选择多个文件。

JavaScript可以通过files属性访问type="file"的<input.../>元素生成的文件上传域内的所有文件，该属性返回一个FileList对象，FileList对象相当于一个数组，开发者可以使用类似于数组的方法来访问数组内的每个File对象。
File对象是一个JavaScript对象，JavaScript可以通过该对象获取用户浏览的所有文件的信息。File对象包含如下常用属性。

• name：返回该File对象对应的文件的文件名，不包括文件路径部分。
• type：返回该File对象对应的文件的MIME类型字符串。
• size：返回该File对象对应的文件的大小。

**提示：**这里涉及到一些JavaScript脚本相关的知识，可以参考我即将发布的JavaScript相关博客。

2. 使用FileReader读取文件内容

FileReader同样是一个JavaScript对象，开发者可以通过该对象在客户端读取文件上传域所选择的的文件内容。
FileReader提供了如下方法。

• readAsText(file, encoding)：以文本文件的方式来读取该文件，其中encoding参数指定读取该文件时所用的字符集，改参数默认值是UTF-8。
• readAsBinaryString(file)：以二进制方式来读取该文件。通过这种方式可以读取文件内容的二进制数据，这样就可以通过Ajax把数据上传到服务器。
• readAsDataURL(file)：以DataURL方式来读取文件。这种方式也可用于读取二进制文件，只是这种方式将会采用base64方式把文件内容编码成DataURL格式的字符串。
• abort()：停止读取。

需要指出的是，FileReader的所有readXxx()方法都是异步方法，这些方法都不会直接返回读取的文件内容，程序必须以是事件监听的方式来获取读取的结果。FileReader提供了如下事件来监听读取过程。

• onloadstart：FileReader开始读取数据时触发该事件指定的函数。
• onprogress：FileReader正在读取数据时触发该事件指定的函数。
• onload：FileReader成功读取数据后触发该事件指定的函数。
• onloadend：FileReader读取数据完成后触发该事件指定的函数，无论是否读取成功，都将触发该事件指定的函数。
• onerror：FileReader读取失败时触发该事件指定的函数。

为了获取成功读取文件后的文件内容，可以通过为onload属性绑定事件监听器来实现。在onload属性指定的事件监听函数中，程序代码可通过FileReader的result属性访问读取文件的结果。

FileReader在读取文件的过程中可能多次触发onprogress事件，通过该事件绑定监听器即可实时监控文件的读取进度。

需要提醒的是，FileReader只是客户端的JavaScript对象，使用FileReader所进行的上传也只是把磁盘上的文件读取到浏览器内存中，并未真正上传到服务器。如果需要真正把客户端文件上传到远程服务器，则可把文件数据以POST请求方式提交到远程服务器，远程服务器负责接收并解析文件数据，并把数据内容保存到服务器。

四、HTML 5新增的客户端校验

在HTML 5规范以前，客户端校验只能通过JavaScript来完成，HTML 5改变了这种现状，HTML 5为表单控件额外增加了一些输入校验属性。HTML 5页面只要简单地设置这些校验属性即可完成客户端校验。

1. 使用校验属性执行校验

HTML 5为表单控件新增了如下几个校验属性。

• required：该属性指定该表单控件必须填写。该属性值必须是required或完全省略属性值。
• pattern：该属性指定该表单控件的值必须符合指定的正则表达式。该属性的值必须是一个合法的正则表达式。
• min、max、step：这3个属性只对数值类型、日期类型的<input.../>元素有效，这3个属性控制该表单控件的值必须在min~max之间，并符合step步长。

2. 调用checkValidity方法进行校验

如果我们想使用对话框来弹出错误提示，或者有其他校验要求，则可借助于HTML 5为表单、表单控件提供的checkValidity()方法进行校验。

• 如果表单对象调用checkvalidity()方法返回true，则表明该表单内的所有表单控件都有效。

3. 自定义错误提示

有些情况下，我们想自己“定制”错误提示信息，则可以借助HTML 5为表单控件新增的setCustomValidity()方法来实现，该方法接受一个字符串参数，该字符串将会作为用户“自定义”的错误提示。

需要指出的是，只要调用了该方法，就意味着该表单控件没有通过输入校验。因此只有当某个表单控件本身没有通过输入校验时才能调用该方法，而不是“不问青红皂白”地直接调用该方法来改变错误提示；否则可能导致本来可以通过输入校验的表单控件也变成不能通过输入校验了。

4. 关闭校验

在某些时候，如果希望暂时关闭HTML 5对表单提供的输入校验，则可以通过如下两种方式来实现。

• 为<form.../>元素增加novalidate属性，该属性值要么是novalidate，要么省略属性值。
• 为type="submit"的<input.../>或<button.../>元素设置formnovalidate属性，该属性值要么是novalidate，要么省略属性值。

第一种方式将会直接关闭表单的输入校验功能，无论通过哪个按钮提交该表单，该表单都不会执行输入校验；第二种方式则由指定的提交按钮来关闭表单的输入校验，只有当用户通过指定了formnovalidate属性的按钮提交表单时才会关闭表单的输入校验。