|
|
英文原文：HTML5 fundamentals, Part 2: Organizing inputs
对于一个企业来说，管理、数据分析、营销策略等都很重要，然而，如果没有通过网站提供合适的数据窗口给潜在客户使用 —— 或是激发起用户的使用兴趣 —— 那么就缺失了把站点访问者转化为客户的最基本的入口。而企业的主要目标就是通过努力提供积极的、友好的用户体验，促进用户与企业之间的交互。
交互的核心是站点中的表单，这些表单方便了与用户的互动交流，友好的互动体验会促进网站访问者转化为客户。表单是促进网站所有者或者代理商与网站用户之间交互的核心因素，因此，它们在设计和开发网站过程中就显得极为重要。
核心中的核心是这些控件 —— 单选按钮、复选框、文本框、数字的微调控制器等等。它们是用户与网站对话时必不可少的元素。换句话说，没有这些控件实现的完整功能，就不可能进行对话，也就没有潜在的用户转化。
对转化过程中的各种关系做仔细的考虑是很有必要的，这其中包括了站点访问者和系统之间交互的各个方面，验证速度、输入、认知、导航、页面的加载以及页面的组织，所有这些方面都会对转化过程产生影响。HTML5规范带来的多媒体特性以及更丰富的表单控制选项，改进和增强了表单验证，从而提高了网站将站点访问者转化成实际用户的能力。
HTML5为Web验证提供了强大的工具，为健全的Web计算环境保驾护航（一个关键的安全资产）。在设计和开发旨在招徕客户的网站时，它就显得格外重要。因此，HTML5的使用对于保证一个网站的用户转化率是必不可少的。如果你不能描绘出前景，那说明你有困惑；但如果你描绘出了前景，却不能将之落到实处，那只是空中楼阁。美好的理想需要行动来实现。
不过没关系，HTML5就能给你帮助。比如HTML5的email和telephone类型，为交流方式提供了更多选择。HTML5清晰的语义结构让交流更加通畅无阻（感谢嗷嗷的翻译）。
我们的世界越来越以网络为中心、充满机遇的全球经济前进的步伐越来越繁忙、云计算的快速发展、移动技术应用的指数级增长，以及跨平台的电信解决方案 —— 既包含商业的也包含社会的 —— 很明显，我们已经站在一个美丽新世界的大门口 —— 基于Web的计算与通信的世界。这是一个IT与通信相互融合并不断进化的世界，同时这也是高度竞争的社会全球化发展的需要。
设计表单
在HTML5中，表单已经做了重大的修整，一些以前需要通过JavaScript编码实现的功能现在无需编码就可轻松实现。本文中的表单示例分析了HTML5新表单组件的用法。当然，首先是规划表单。
表单的布局如图1所示，需要开发表单页面的三个区域：Header区、Form区和Footer区。Header区包含了封装在<header></header>标签中的页面标题和副标题。在页面的底部，Footer区包含了放在<footer></footer>标签内的版权信息。我已经在该系列文章的第一部分所提供的例子中讨论了Header区和Footer区的构建，如果你对<header>和<footer>标签不太熟悉的话，请参阅该篇文章。
图1. 表单页面的布局
对这些表单的讨论重点放在四个标签上：
1. <form>
2. <fieldset>
3. <label>
4. <input>
在HTML5中，<form>标签增加了两个新的属性：autocomplete和novalidate。autocomplete属性用于启用“下拉建议列表”功能，novalidate属性用于关闭表单验证功能，这在测试时会很有用。
<fieldset>标签增加了三个新属性：disable、name和form。“disable”属性用于禁用<fieldset>，“name”属性用于设置<fieldset>的名称，“form”属性的值是<fieldset>所属的一个或多个表单的ID。在HTML5中，<fieldset>可处于其所属的一个或多个表单的外部，当<fieldset>被置于表单的外部时，你必须设置该<fieldset>标签的form属性，这样<fieldset>就可以正确地与一个或多个表单关联起来。
<label>标签增加了一下新属性：form，该属性值是<label>所属的一个或多个表单的ID。<label>标签也可放置在表单的外部，因此这里的form属性也是用于关联<label>标签和对应的表单。
<input>标签引入了一些新的类型与属性，增强了表单的可用性。HTML5引入了一些新的input类型，用于对数据进行组织和归类，这跟HTML5总的目标（更懂语义）是一致的（感谢巴蛮子的翻译）。“形式应该服从于功能”（form should follow function）这句古训很适合于描述HTML5的表单功能。
在HTML5中，表单的<input>域可以处在<form>标签的外部，“form”属性标识了"input"域所属的一个或多个表单，还可以通过引用form的ID来标识其所属的表单。表1给出了新的<input>类型。
表1. 新的<input>类型
color date datetime datetime-local month
week time email number range
search tel url
表2. 新的<input>属性
autocomplete autofocus form formaction formenctype
formmethod formnovalidate formtarget height max
min multiple pattern placeholder required
step
在网页的创建过程中，你会用到这些类型和属性中的大部分。
创建表单
图2所示的是一个 Classical Music Place 网页，一个提供作曲家作品下载的站点，它还允许古典音乐爱好者上传他们的作品录音，这就是你要创建的页面。
图2. Classical Music Place的表单
表单的结构从<form>标签开始，在该例子中，你用到了新的autocomplete属性，如下所示：
<form id="orderForm" autocomplete="on"
action="Javascript:alertValues();" method="get">
it知识库：HTML5基础，第2部分：组织页面的输入，转载需保留来源！
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
