首先介绍 HTML5 中新增加的标记和页面的组织,提供有关 Web 页面设计的高级信息、表单的创建、API 的使用和价值,以及 Canvas 提供的种种创新可能性。第 2 部分介绍 HTML5 表单控件的概念,并简单介绍了 JavaScript 和 CSS3 的作用。
管理、数据分析、营销策略和企业级机构的其他功能都很重要。然而,如果没有一个您潜在客户可使用的(或愿意使用)成功数字窗口,则站点访问者转换开发的必要初始流程将缺失。一个积极且用户友好的体验可以提高工作所需的交互性,是机构的主要目标。
交互的核心是该站点的表单。它们能促进与用户的互动交流,因此可以通过转换站点访问者来加快推进网站建设这个目标。表单是促进网站所有者或代理与网站用户之间交互的核心因素,正因为如此,它们对于站点的设计和开发极端重要。
该核心的中心可以在控件中找到,单选按钮、复选框、文本框和数字微调框等。这些元素在网站用户与站点的对话中是必不可少的。换句话说,如果没有全功能的控件(无论是控件的 “机械” 操作,还是给定任务控件的适当性),就不可能有任何对话,因此,不会有潜在的转换。
当务之急是对转换过程中的关系加以仔细考虑,包括站点访问者和在用系统之间的交互的各个方面。验证、输入、识别、导航、页面加载的速度,以及页面如何设置等,均会影响转换过程。验证的改进和增强,所提供更多种类的表单控件选项,以及 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 等站点上出现的下拉建议列表。novalidate 属性关闭表单的验证,这在测试过程中很有有用。
<fieldset> 标记拥有三个新属性:disable、name 和 form。disable 属性禁用 <fieldset>。name 属性设置 <fieldset> 的名称。form 属性值是 <fieldset> 所属的一个或多个表单的 ID。在 HTML5 中,一个 <fieldset> 可以在其所属的一个或多个表单的外部。当 <fieldset> 被放在表单外部时,您必须设置 <fieldset> 标记的 form 属性,使 <fieldset> 可以与一个或多个正确的表单关联。
<label> 标记定义输入元素的类别,它有一个新属性:form。form 属性值是 <label> 所属的一个或多个表单的 ID。<label> 标记也可以被放在表单的外部,即 form 属性在这里也用于关联 <label> 和相应的表单。
<input> 标记拥有若干个新类型以及属性,可以增强表单的可用性。HTML5 引入了大量旨在组织和分类数据的新输入类型,复制 HTML5 的整体语义方法。形式应该服从功能这句老话,对于描述 HTML5 的表单功能非常合适。
在 HTML5 中,表单的 <input> 字段可以在 <form> 标记外部。form 属性标识输入字段所属的一个或多个表单。它也通过引用表单的 ID 标识它所属的表单。表 1 显示新的 <input> 类型。
表 1. 新的 <input> 类型
color date datetime datetime-local month week time email number range search tel url
表 2 显示新的 <input> 属性。
表 2. 新的 <input> 属性
autocomplete autofocus form formaction formenctype formmethod formnovalidate formtarget height max min multiple pattern placeholder required step
在 Web 页面创建过程中,您会用到大部分这些类型和属性。