4.4 HTML5智能表单

在HTML5中，表单新增了一些属性和元素，这些属性和元素让表单变得更加方便实用。例如，autocomplete属性可以让表单具有自动完成功能，浏览器会根据用户之前输入的值自动完成，这就让表单的填写更加方便。接下来具体学习HTML5新增的属性和元素。

4.4.1 表单分组

＜fieldset＞可以组合表单中的相关元素，将表单根据不同的内容进行分组。

基本语法如下：

图4-19所示为一个简单的表单分组。

其中，＜fieldset＞表示表单边框，＜legend＞表示表单标题。如果想要让标题嵌入到边框中，则需将标题标签写到边框标签里面，就像上面代码示例中所写的一样。另外，一个表单可以有多个边框与标题的组合。

代码示例如下：

代码运行效果如图4-20所示。

4.4.2 表单新增元素及属性

1. HTML5表单新增元素

表4-1所示为HTML5表单新增元素。

以第一个＜datalist＞为例，对它的用法进行介绍，其他元素由于并不常用，此处就不再做出详细说明，感兴趣的读者可以查看帮助文档深入学习。

＜datalist＞具有和autocomplete类似的自动完成功能，但它还有一个功能是autocomplete属性所没有的，那就是在使用＜datalist＞时，它可以根据用户输入的内容，在预先设置好的列表中筛选出与用户输入相关的信息作为备选。

基本语法如下：

代码示例如下：

执行代码，输入框激活时右侧会出现一个下拉箭头。单击下拉箭头会出现候选内容如图4-21所示，当输入的内容与选项列表中的候选内容相关时，就会在下拉列表中显示相关内容，如图4-22所示。

2. HTML5表单及其控件部分新增属性

（1）表单新增属性

表单新增属性见表4-2。

autocomplete属性值有on和off，novalidate属性值有true和false。

（2）＜input＞标签新增属性

＜input＞标签新增属性见表4-3。

表4-3中的前三个属性比较简单，本书不再展开具体介绍；第四个属性pattern是用于表单提交时输入框需要验证的正则表达式，关于正则表达式将在本书的第18章中进行详细讲解，此处不做具体介绍。

表4-3中的第五个属性form overrides是一个合集，实际上它包括有多个属性，具体如下：

1）formaction：重写表单的action属性。

2）formenctype：重写表单的enctype属性。

3）formmethod：重写表单的method属性。

4）formnovalidate：重写表单的novalidate属性。

5）formtarget：重写表单的target属性。

上述表单重写属性与type="submit"配合使用，会在提交时修改表单的属性值。

对于表4-3中的最后一个属性form，其具体用法是为特定的form表单添加id，再为希望与表单一起提交的表单元素添加form属性，从而实现＜input＞无须放在＜form＞标签之中，也可通过表单进行提交，使用这种方式可以在设计页面时不再局限于表单的固定位置，让页面更加美观。form属性的代码示例如下：

（3）＜input＞标签新增输入类型

＜input＞标签新增输入类型见表4-4。这些新增输入类型在不同浏览器中显示效果会有所不同，另外在某些不支持新增输入类型的浏览器中可能功能无法使用。

表4-4中输入类型的代码示例如下：

代码运行效果如图4-23所示。

下面对这几种新增的输入类型进行详细介绍。

1）拾色器功能：单击色块后会弹出“颜色”对话框（图4-24），让用户来选择颜色。

2）日期选择功能：在鼠标移到输入框时会在右侧出现下拉箭头，单击箭头则会出现如图4-25所示的日期选择框。

3）电子邮件功能：这个功能不用做过多解释，当输入框的type属性设置为email时，输入的内容必须符合电子邮件的基本规范。

4）数字输入框功能：当鼠标移到输入框上时，会出现上下调整的箭头按钮（图4-26），此时可以通过单击按钮调整数值，也可以通过键盘直接输入。

5）滑块输入功能：滑块输入将显示为一根滑动条，根据用户滑动的位置确定选中的数值。默认情况下，最左端的值为0，最右端的值为100。可以通过min属性和max属性分别确定滑动条的最小值与最大值。例如，网页中的音量调节功能，就可以使用滑块输入功能，如图4-27所示。

6）搜索框功能：在搜索框被激活时，与普通文本输入框不同的是右侧会有一个叉号（图4-28），单击“×”按钮就会删除用户在输入框中输入的所有内容。