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

与访问者互动

HTML5 代表了 Web 业务和云业务在实现方式上的里程碑改变。本文是由 4 部分组成的系列文章的第 2 部分,该系列旨在介绍 HTML5 中的演变,首先介绍 HTML5 中新增加的标记和页面的组织,提供有关 Web 页面设计的高级信息、表单的创建、API 的使用和价值,以及 Canvas 提供的种种创新可能性。第 2 部分介绍 HTML5 表单控件的概念,并简单介绍了 JavaScript 和 CSS3 的作用。

Grace Walker, IT 顾问, Walker Automated Services

Grace Walker,伊利诺斯州芝加哥市 Walker Automated Services 的合伙人,是一个有丰富背景和广博经验的IT顾问。她曾在 IT 界包括电信、教育、金融服务以及软件等行业工作过,曾经担任过经理、行政人员、程序员、技术指导、业务分析师、产品分析师以及系统分析师等职务。



2012 年 7 月 16 日

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

常用缩略词

  • 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> 类型
colordatedatetimedatetime-localmonth
weektimeemailnumberrange
searchtelurl  

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

表 2. 新的 <input> 属性
autocompleteautofocusformformactionformenctype
formmethodformnovalidateformtargetheightmax
minmultiplepatternplaceholderrequired
step    

在 Web 页面创建过程中,您会用到大部分这些类型和属性。


创建表单

图 2 所示的 Web 页面用于 The Classical Music Place,该站点提供了几位作曲家的作品下载。这也让古典音乐爱好者可以上传他们的古典作品录音。这就是您将要创建的页面。

图 2. 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>

第一个 <fieldset> 标记

第一个 <fieldset> 标记包含客户信息(见图 3)。它有一个 Name 字段、一个 Telephone 字段、一个 Email address 字段和一个 Date 字段。Name 字段有一个 autofocus 属性,它让您不必单击字段就能开始输入文本。

图 3. 客户信息字段
客户信息字段:name、telephone、email address 和 date。

第一个 <fieldset> 包含一个 <legend>、一个 <label> 和一个 <input> 标记,如清单 1 所示。Name 字段的类型是 text,它有三个新的 <input> 属性:placeholderautofocusrequired

清单 1. Name 字段
 <fieldset>
  <legend> Customer Info </legend>
  <p>
    <label>Name:
      <input id="name" name="name" type="text" placeholder="Enter your name" 
	                      autofocus required size="50">
    </label>
  </p>

autofocus 确保在页面打开时,输入点将在该字段上。这是一个函数,使页面在加载时立即设置输入点,使用户可以直接访问表单。

placeholder 属性把引号之间的文本放在字段中,并以淡灰色的文本显示。placeholder 属性应该告诉用户,字段必须包含什么内容,并在该字段为空时显示。然而,因为 Name 字段也设置了 autofocus,当您进入页面时,您无法实际看到文本。请注意,在图 3 中,Name 字段中没有显示占位符,它被框在一个黄色突出显示中。如果您没有输入数据就移动到另一个字段,将显示占位符文本。当您同时使用 autofocus 属性和 placeholder 属性时,占位符文本会消失,因为在该字段的输入点已被激活。

required 属性有助于将一个字段的强制填写作为表单提交的一个先决条件。这对于文本、搜索、URL、电话、电子邮件、密码、日期选择器、数字、复选框、单选按钮和文件等字段有效。

Telephone 字段的类型为 tel,它的属性有 requiredplaceholdersizepattern,如清单 2 所示。tel 类型是一个文本字段,旨在包含电话号码。在本例中,电话有一个必须严格遵守的模式限制,因为在您使用正确的字符模式之前,系统不会让您提交。电话的占位符坚持该模式,您的输入必须与之相匹配。

该模式模拟了传统 JavaScript 正则表达式 (regex) 的函数。输入必须与 regex 定义的模式结构匹配,才可以进行验证。它可以与 textsearchurltelephoneemailpassword 类型配合使用。

清单 2. Telephone 字段
 <p>
    <label>Telephone:
      <input id="tel" name="telephone" type="tel" placeholder="Pattern: 1-234-567-8910" 
	       required size="50" pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
    </label>
  </p>

Email address 字段的类型是 email,如清单 3 所示。无需使用模式,电子邮件地址就会自动进行验证:验证是 HTML5 的一部分。如果没有以适当的格式提交电子邮件地址,则表单不能被提交。

清 3. Email address 字段
  <p>
    <label>Email address:
      <input id="email" name="email" type="email" placeholder="Enter your email address" 
	            required size="50">
    </label>
  </p>

在此 <fieldset> 中的最后一个输入是 Date 字段。date 类型在 Opera 浏览器中提供一个日历选择器进行日期选择,但在 Google Chrome 中创建一个微调框,如 图 3 所示。图 4 显示了 Opera 重现的 Web 页面显示 Date 字段选择器。请注意,即使使用相同的样式表,在 Chrome 中显示为圆角的字段设置,在 Opera 中不会显示为圆角。

图 4. Date 字段
Date 字段含有一个可以选择日期的日历。

清单 4 显示了用于创建日期选择器的代码。

清单 4. Date 字段
    <p>
      <label>Date: <input type="date">
      </label>
    </p>
 </fieldset>

您可以生成任何日期的报告。您甚至可以将它拆分至小时。下面是您可以创建的日期类型:

  • date选择日期、月份和年份
  • month选择月份和年份
  • week选择周和年份
  • time选择时间(小时和分钟)
  • datetime选择时间、日期、月份和年份(UTC 时间)
  • datetime-local选择时间、日期、月份和年份(本地时间)

第二个 <fieldset> 标记

第二个 <fieldset> 标记包含一个 <input> 标记和一个 list 属性,还有一个 <datalist> 标记。list 属性指定一个输入字段的 <datalist><datalist> 标记提供一个输入字段选项的列表。list 属性可以与以下 <input> 类型配合使用:textsearchurltelephoneemaildate pickersnumberrangecolor

<datalist> 显示在一个下拉列表中,如图 5 所示。该图是在 Opera 中的屏幕截图。在 Chrome 中,这个列表被显示为一个简单的文本框。用户将不会看到列表。

图 5. Favorites 字段
Favorites composer 字段含有一个作曲家的下拉列表。

清单 5 提供用于创建 Favorite Composer 部分的字段集。

清单 5. Favorite Composer 字段
<fieldset>
  <legend> Favorite Composer </legend>
  <p>
    <label>
  <input type="text" name="favorites" list="composers">
  <datalist id="composers">
   <option value="Bach">
   <option value="Beethoven">
   <option value="Brahms">
   <option value="Chopin">
   <option value="Mendelssohn">
  </datalist>
 </label>
</p>
</fieldset>

第三个 <fieldset> 标记

第三个 <fieldset> 标记显示一个作曲家列表,随后是一个数字字段,指定每位列出的作曲家有多少个作品。图 6 显示了该部分。

图 6. Composers 字段
Composers 部分含有 5 个字段,每个作曲家一个字段,包含一个下拉列表。

例如,Bach 有五个作品,而 Beethoven 有 10 个作品。清单 6 显示了每位作曲家的最大值。当您提交表单时,数字字段不接受超过最大值的数字。当您提交时,该字段会对不正确、超出范围的值进行响应,提示您纠正输入,使它符合该字段可接受的数值限制。

number 类型为输入创建一个微调框字段。minmaxstep 均可与 number 类型一起使用。默认的 step 值是 1minmaxstep 属性的使用具有数字、范围或日期选择器输入约束。max 属性决定输入字段所允许的最大值。min 属性决定输入字段所允许的最小值。step 属性决定有效的数值递增量。

清单 6. composer 字段
<fieldset>
  <legend>Composers</legend>
  <p>
    <label>
      Bach: <input name="form_number" id="form_number" type="number" min="1" max="5" >
    </label>
  </p>
  <p>
    <label>
      Beethoven: <input name="form_number" id="form_number" type="number" 
	      min="1" max="10" >
    </label>
  </p>
  <p>
    <label>
      Brahms: <input name="form_number" id="form_number" type="number" min="1" max="7" >
    </label>
  </p>
  <p>
    <label>
      Chopin: <input name="form_number" id="form_number" type="number" min="1" max="10" >
    </label>
  </p>
  <p>
    <label>
      Mendelssohn: <input name="form_number" id="form_number" type="number" 
	     min="1" max="4">
    </label>
  </p>

 </fieldset>

第四个 <fieldset> 标记

第四个 <fieldset> 标记包含 <input> 类型 file 和属性 multiple,如图 7 所示。multiple 属性指定,一个输入字段可以从一个数据列表或文件列表中选择多个值。在本例中,用户可以选择多个文件进行上传。

图 7. Upload 字段
Upload 部分包含一个选择文件按钮。

file 类型代码和 multiple 属性如清单 7 所示。

清单 7. Upload 字段
 <fieldset>
  <legend> Upload file(s) </legend>
  <p>Upload one of your orchestra's file(s) for inclusion in our library</p>
    <p><label> 
      <input type="file" multiple="multiple" /> 
    </label>
  </p>
 </fieldset>

Submit 按钮使用 heightwidth 属性,如清单 8 所示。使用这些属性设置 image 输入类型的高度和宽度。在设置这些属性时,页面中供图像使用的空间面积是固定的,受到预设的宽度和高度尺寸限制,这通过提高页面渲染效果,有助于页面加载。

清单 8. Submit 按钮
<input type="image" src="submitbutton.png" alt="Submit" width="100" height="45" />
</form>

JavaScript 和 CSS3

没有 CSS3 就无法完成 HTML5 的重现。虽然 HTML5 已取消某些 JavaScript 编码的需要,但 JavaScript 仍然是一个有价值的工具。以下是用于创建示例表单的 JavaScript 代码和 CSS3 文件。

JavaScript 代码是一个简单的警告框,它返回三个必填字段,如清单 9 所示。虽然这里使用的 JavaScript 代码只有一行,但它被放置在一个单独的 JavaScript 文件中,遵循供其使用的最佳实践。

清单 9. 示例表单 JavaScript 代码
function alertValues()
{
alert("Customer information: " + "\n     " + fullname.value + "\n     " 
                 + tel.value + "\n     " + email.value);  
}

清单 10 显示了格式化示例表单的 CSS3 代码。此处不包括 <header><footer> 信息。

清单 10. 示例表单 CSS3
form {
  width: 550px;
  margin: 0 0 0 0 ;
  padding: 50px 60px;
  background-color: #2d2d2d;
  border-radius: 20px;
}

fieldset {
  padding: 0 20px 20px;
  margin: 0 0 30px ;
  border: 2px solid #ffffff;
  background: #B8B8B8 ;
  border-radius: 10px;
}

legend {
  color: #ffffff;
  background: #990033;
  font-size: 0.9em;
  font-weight: bold;
  text-align: left;
  padding: 5px;
  margin: 0;
  width: 10em;
  border: 2px solid #660033;
  border-radius: 5px;
 }

label {
  display: block;
  float: left;
  clear: left;
  text-align: left;
  width: 100%;
  padding: .4em 0 0 0;
  margin: .15em 0 0 0;
}

结束语

真正能让个人和组织成功的关键是沟通。表单控件和一般页面构造指南对于这一过程非常关键,而 HTML5 针对此任务提供了异常强大的工具。那些为未来做好准备的人将从中受益(现在他们已经在这里受益),而那些没有准备好的人,将会受到世界 Web 化、网络中心化、全球化社会的步伐和需求带来的严重冲击。


下载

描述名字大小
HTML、CSS3 和 JavaScript 示例文件HTML5Forms.zip10KB

参考资料

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development
ArticleID=825993
ArticleTitle=HTML5 基础知识,第 2 部分:组织页面的输入
publish-date=07162012