HTML 5 基础知识,第 2 部分:组织页面的输入

管理、数据分析、营销策略和企业级机构的其他功能都很重要。然而,如果没有一个您潜在客户可使用的(或愿意使用)成功数字窗口,则站点访问者转换开发的必要初始流程将缺失。一个积极且用户友好的体验可以提高工作所需的交互性,是机构的主要目标。

常用缩略词

  • API:应用程序编程接口
  • CSS3:层叠样式表 3
  • HTML5:HTML 版本 5
  • IT:信息技术
  • UTC:协调世界时

交互的核心是该站点的表单。它们能促进与用户的互动交流,因此可以通过转换站点访问者来加快推进网站建设这个目标。表单是促进网站所有者或代理与网站用户之间交互的核心因素,正因为如此,它们对于站点的设计和开发极端重要。
该核心的中心可以在控件中找到,单选按钮、复选框、文本框和数字微调框等。这些元素在网站用户与站点的对话中是必不可少的。换句话说,如果没有全功能的控件(无论是控件的 “机械” 操作,还是给定任务控件的适当性),就不可能有任何对话,因此,不会有潜在的转换。
当 务之急是对转换过程中的关系加以仔细考虑,包括站点访问者和在用系统之间的交互的各个方面。验证、输入、识别、导航、页面加载的速度,以及页面如何设置 等,均会影响转换过程。验证的改进和增强,所提供更多种类的表单控件选项,以及 HTML5 规范的总体多媒体性质,均有助于提高 HTML5 将站点访问者转化为实际站点用户的效力。
HTML5 是验证和保证基于 Web 计算良好执行的非常有力的工具,一个关键的安全资产。它对于为了吸引顾客的网站设计和开发尤其重要。因此,其使用对于维持健康的转化率是必不可少的。如果 您无法描绘前景,您就麻烦了;如果不能转换您所描绘的前景,等待您的就是硬着陆。
HTML5 为您提供了帮助。如 emailtelephone 等 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> 标记添加了两个新的属性:autocompletenovalidateautocomplete 属性支持像 Google 等站点上出现的下拉建议列表。novalidate 属性关闭表单的验证,这在测试过程中很有有用。
<fieldset> 标记拥有三个新属性:disablenameformdisable 属性禁用 <fieldset>name 属性设置 <fieldset> 的名称。form 属性值是 <fieldset> 所属的一个或多个表单的 ID。在 HTML5 中,一个 <fieldset> 可以在其所属的一个或多个表单的外部。当 <fieldset> 被放在表单外部时,您必须设置 <fieldset> 标记的 form 属性,使 <fieldset> 可以与一个或多个正确的表单关联。
<label> 标记定义输入元素的类别,它有一个新属性:formform 属性值是 <label> 所属的一个或多个表单的 ID。<label> 标记也可以被放在表单的外部,即 form 属性在这里也用于关联 <label> 和相应的表单。
<input> 标记拥有若干个新类型以及属性,可以增强表单的可用性。HTML5 引入了大量旨在组织和分类数据的新输入类型,复制 HTML5 的整体语义方法。形式应该服从功能这句老话,对于描述 HTML5 的表单功能非常合适。
在 HTML5 中,表单的 <input> 字段可以在 <form> 标记外部。form 属性标识输入字段所属的一个或多个表单。它也通过引用表单的 ID 标识它所属的表单。表 1 显示新的 <input> 类型。

表 1. 新的 <input> 类型

表 2 显示新的 <input> 属性。

表 2. 新的 <input> 属性

在 Web 页面创建过程中,您会用到大部分这些类型和属性。
创建表单
图 2 所示的 Web 页面用于 The Classical Music Place,该站点提供了几位作曲家的作品下载。这也让古典音乐爱好者可以上传他们的古典作品录音。这就是您将要创建的页面。

图 2. The Classical Music Place 表单

表单的结构以 <form> 标记开始。在本例中,使用新的 autocomplete 属性,如下所示:

<form id="orderForm" autocomplete="on"   action="javascript:alertValues();" method="get">

<form> 标记中也包含了一个 JavaScript 操作,我将在稍后的小节中讨论它。
<form> 标记中包含了四个 <fieldset> 标记,图 2 中灰色区域突出显示:Name、Telephone、Email address 和 date。<fieldset> 标记组合了表单上相近的内容。让我们来分别看看每个 <fieldset>

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

Grow your business fast with

Suku