HTML5 基础知识，第 2 部分 页面交互设计

一个积极且用户友好的体验可以提高Web系统工作所需的交互性，它是企业级应用的主要目标。交互的核心是该Web系统的表单。它们能促进与用户的互动交流，因此可以通过转换站点访问者来加快推进网站建设这个目标。表单是促进网站所有者或代理与网站用户之间交互的核心因素，正因为如此，它们对于站点的设计和开发极端重要。

该核心的中心可以在控件中找到，单选按钮、复选框、文本框和数字微调框等。这些元素在网站用户与站点的对话中是必不可少的。换句话说，如果没有全功能的控件，就不可能有任何对话，因此，不会有潜在的转换。

当务之急是对转换过程中的关系加以仔细考虑，包括站点访问者和在用系统之间的交互的各个方面。验证、输入、识别、导航、页面加载的速度，以及页面如何设置等，均会影响转换过程。验证的改进和增强，所提供更多种类的表单控件选项，以及 HTML5 规范的总体多媒体性质，均有助于提高 HTML5 将站点访问者转化为实际站点用户的效力。

HTML5 是验证和保证基于 Web 计算良好执行的非常有力的工具，一个关键的安全资产。它对于为了吸引顾客的网站设计和开发尤其重要。因此，其使用对于维持健康的转化率是必不可少的。如果您无法描绘前景，您就麻烦了；如果不能转换您所描绘的前景，等待您的就是硬着陆。

HTML5 为您提供了帮助。如 email 和 telephone 等 HTML5 类型促进了广泛的通信选项。结合来自 HTML5 的语义基础的结构清晰，使您和世界其他人之间的清晰对话并没有障碍。

在这个以网络为中心的世界里，日益增加的随机性全球经济忙碌步伐、云计算的快速发展、移动技术使用呈指数增长，以及跨平台的解决方案，很明显，我们正站在一个基于 Web 计算和通信的创新世界的门槛。这个新世界既代表功能，也代表诸多通信和 IT 元素，以及对竞争激烈的全球社会需求之间不断发展的密切结合所产生的衍生物。

一、设计表单

在 HTML5 中，表单已进行了重大改造。以前需要 JavaScript 编码的若干项任务现在已经不需要编码就能轻松地执行。本博文的表单示例分析了 HTML5 的表单创新套件的使用。在这个过程中的第一步，当然是规划表单。

表单示例的布局如图 1 所示。将开发表单页面的三个区域：页眉 (Header) 区、表单 (Form) 区和页脚 (Footer) 区。页眉区包含了打包在 <header></header> 标记中的页面标题和副标题。在页面底部，页脚区包含 <footer></footer> 标记中的版权信息。在HTML5 基础知识第 1 部分 提供的示例中讨论过页眉区和页脚区：如果尚未熟悉 <header> 和 <footer> 标记，请参阅该部分博文。

图1 表单页面布局 

关于该表单的讨论主要集中在四个标记：

• <form>
• <fieldset>
• <label>
• <input>

在 HTML5 中，已向 <form> 标记添加了两个新的属性：autocomplete 和 novalidate。autocomplete 属性支持像 Google 等站点上出现的下拉建议列表；该属性用于控制自动完成功能的开启和关闭。可以设置表单或者input元素，有两个属性值，当设置为on时，启动该功能；当设置off时，关闭该功能；启用该功能后，当用户在自动完成域开始输入时，浏览器就会在该域中列表显示填写的选项；用户每提交一次，就会增加一个用于选择的选项 。novalidate 属性关闭表单的验证，这在测试过程中很有用；input作为输入类型，当提交表单时，会对这些输入内容进行验证；而novalidate属性则用于在提交表单时不对form或input进行验证。

<fieldset> 标记拥有三个新属性：disable、name 和 form。disable 属性禁用 <fieldset>。name 属性设置 <fieldset> 的名称。form 属性值是 <fieldset> 所属的一个或多个表单的 ID。在 HTML5 中，一个 <fieldset> 可以在其所属的一个或多个表单的外部。当 <fieldset> 被放在表单外部时，您必须设置 <fieldset> 标记的 form 属性，使 <fieldset> 可以与一个或多个正确的表单关联。

<label> 标记定义输入元素的类别，它有一个新属性：form。form 属性值是 <label> 所属的一个或多个表单的 ID。<label> 标记也可以被放在表单的外部，即 form 属性在这里也用于关联 <la