HTML5基础,第2部分：组织页面输入.docVIP

HTML5基础，第2部分：组织页面的输入 　　上一节： HYPERLINK /page/108533/ \t _blank HTML5基础，第1部分：初试锋芒 　　英文原文： HYPERLINK /developerworks/web/library/wa-html5fundamentals2/index.html \t _blank HTML5 fundamentals, Part 2: Organizing inputs 　　对于一个企业来说，管理、数据分析、营销策略等都很重要，然而，如果没有通过网站提供合适的数据窗口给潜在客户使用 —— 或是激发起用户的使用兴趣 —— 那么就缺失了把站点访问者转化为客户的最基本的入口。而企业的主要目标就是通过努力提供积极的、友好的用户体验，促进用户与企业之间的交互。 　　交互的核心是站点中的表单，这些表单方便了与用户的互动交流，友好的互动体验会促进网站访问者转化为客户。表单是促进网站所有者或者代理商与网站用户之间交互的核心因素，因此，它们在设计和开发网站过程中就显得极为重要。 　　核心中的核心是这些控件 —— 单选按钮、复选框、文本框、数字的微调控制器等等。它们是用户与网站对话时必不可少的元素。换句话说，没有这些控件实现的完整功能，就不可能进行对话，也就没有潜在的用户转化。 　　对转化过程中的各种关系做仔细的考虑是很有必要的，这其中包括了站点访问者和系统之间交互的各个方面，验证速度、输入、认知、导航、页面的加载以及页面的组织，所有这些方面都会对转化过程产生影响。HTML5规范带来的多媒体特性以及更丰富的表单控制选项，改进和增强了表单验证，从而提高了网站将站点访问者转化成实际用户的能力。 　　HTML5为Web验证提供了强大的工具，为健全的Web计算环境保驾护航（一个关键的安全资产）。在设计和开发旨在招徕客户的网站时，它就显得格外重要。因此，HTML5的使用对于保证一个网站的用户转化率是必不可少的。如果你不能描绘出前景，那说明你有困惑；但如果你描绘出了前景，却不能将之落到实处，那只是空中楼阁。美好的理想需要行动来实现。 　　不过没关系，HTML5就能给你帮助。比如HTML5的email和telephone类型，为交流方式提供了更多选择。HTML5清晰的语义结构让交流更加通畅无阻（感谢 HYPERLINK /aoaoblogs/ \t _blank 嗷嗷的翻译）。 　　我们的世界越来越以网络为中心、充满机遇的全球经济前进的步伐越来越繁忙、云计算的快速发展、移动技术应用的指数级增长，以及跨平台的电信解决方案 —— 既包含商业的也包含社会的 —— 很明显，我们已经站在一个美丽新世界的大门口 —— 基于Web的计算与通信的世界。这是一个IT与通信相互融合并不断进化的世界，同时这也是高度竞争的社会全球化发展的需要。 　　设计表单 　　在HTML5中，表单已经做了重大的修整，一些以前需要通过JavaScript编码实现的功能现在无需编码就可轻松实现。本文中的表单示例分析了HTML5新表单组件的用法。当然，首先是规划表单。 　　表单的布局如图1所示，需要开发表单页面的三个区域：Header区、Form区和Footer区。Header区包含了封装在header/header标签中的页面标题和副标题。在页面的底部，Footer区包含了放在footer/footer标签内的版权信息。我已经在该系列文章的 HYPERLINK /page/108533/ \t _blank 第一部分所提供的例子中讨论了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所属的一个或