一个积极且用户友好的体验可以提高Web系统工作所需的交互性，它是企业级应用的主要目标。交互的核心是该Web系统的表单。它们能促进与用户的互动交流，因此可以通过转换站点访问者来加快推进网站建设这个目标。表单是促进网站所有者或代理与网站用户之间交互的核心因素，正因为如此，它们对于站点的设计和开发极端重要。

该核心的中心可以在控件中找到，单选按钮、复选框、文本框和数字微调框等。这些元素在网站用户与站点的对话中是必不可少的。换句话说，如果没有全功能的控件，就不可能有任何对话，因此，不会有潜在的转换。

当务之急是对转换过程中的关系加以仔细考虑，包括站点访问者和在用系统之间的交互的各个方面。验证、输入、识别、导航、页面加载的速度，以及页面如何设置等，均会影响转换过程。验证的改进和增强，所提供更多种类的表单控件选项，以及 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 等站点上出现的下拉建议列表；该属性用于控制自动完成功能的开启和关闭。可以设置表单或者input元素，有两个属性值，当设置为on时，启动该功能；当设置off时，关闭该功能；启用该功能后，当用户在自动完成域开始输入时，浏览器就会在该域中列表显示填写的选项；用户每提交一次，就会增加一个用于选择的选项 。novalidate 属性关闭表单的验证，这在测试过程中很有用；input作为输入类型，当提交表单时，会对这些输入内容进行验证；而novalidate属性则用于在提交表单时不对form或input进行验证。

<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>属性。

autocomplete     autofocus        form        formaction        formenctype 
formmethod       formnovalidate   formtarget  height            max 
min              multiple         pattern     placeholder       required 
step

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

二、创建表单

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

图2 ‘古典音乐广场’表单

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

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

在 <form> 标记中也包含了一个 JavaScript 操作，将在稍后的小节中讨论它。

<form> 标记中包含了四个 <fieldset> 标记，图 2 中灰色区域突出显示：账户名、电话、邮件地址 和 日期。<fieldset> 标记组合了表单上相近的内容。来分别看看每个 <fieldset>。

第一个 <fieldset> 标记

第一个 <fieldset> 标记包含客户信息（见图 3）。它有一个 字段、一个 ‘电话’ 字段、一个 ‘邮件地址’ 字段和一个 ‘日期’ 字段。‘账户名’ 字段有一个 autofocus 属性，它可使不必单击字段就能开始输入文本。

图 3. 客户信息字段

第一个 <fieldset> 包含一个 <legend>、一个 <label> 和一个 <input> 标记，如清单 1 所示。‘账户名’ 字段的类型是 text，它有三个新的 <input> 属性：placeholder、autofocus 和 required。

清单 1. 账户名 字段

<fieldset>
   <legend> 客户信息 </legend>
   <p>
       <label>账户名:
             <input id="name" name="name" type="text" placeholder="输入你的名字" 
                             autofocus required size="50">
       </label>
   </p>

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

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

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

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

该模式模拟了传统 JavaScript 正则表达式 (regex) 的函数。输入必须与 regex 定义的模式结构匹配，才可以进行验证。它可以与 text、search、url、telephone、email 和 password 类型配合使用。

清单 2. ‘电话’ 字段

<p>
   <label>电话:
     <input id="tel" name="telephone" type="tel" placeholder="格式: 1-234-567-8910" 
          required size="50" pattern="([0-9]{1}(-[0-9]{3})(-[0-9]{3})(-[0-9]{4}))">
   </label>
</p>

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

清 3. ‘邮件地址’ 字段

<p>
   <label>邮件地址:
      <input id="email" name="email" type="email" placeholder="输入你的电子邮箱地址" 
               required size="50">
   </label>
</p>

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

图4 ‘日期’ 字段

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

清单 4. ‘日期’ 字段

   <p>
      <label>日期: <input type="date">
      </label>
   </p>
</fieldset>

可以生成任何日期的报告。甚至可以将其拆分至小时。下面列出可以创建的日期类型：

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

第二个 <fieldset> 标记

第二个 <fieldset> 标记包含一个 <input> 标记和一个 list 属性，还有一个 <datalist> 标记。list 属性指定一个输入字段的 <datalist>。<datalist> 标记提供一个输入字段选项的列表。list 属性可以与以下 <input> 类型配合使用：text、search、url、telephone、email、date pickers、number、range 和 color。

<datalist> 显示在一个下拉列表中，如图 5 所示。

图 5. ‘偏爱’ 字段

清单 5 提供用于创建 '最喜欢的作曲家' 部分的字段集。

清单 5. '最喜欢的作曲家' 字段

<fieldset>
  <legend> 最喜欢的作曲家 </legend>
  <p>
    <label>
       <input type="text" name="favorites" list="composers">
       <datalist id="composers">
            <option value="巴赫">
            <option value="贝多芬">
            <option value="勃拉姆斯">
            <option value="肖邦">
            <option value="门德尔松">
       </datalist>
    </label>
  </p>
</fieldset>

第三个 <fieldset> 标记

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

图 6. ‘作曲家’ 字段

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

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

清单 6. ‘作曲家’ 字段

<fieldset>
    <legend>作曲家</legend>
    <p>
       <label>
           巴赫: <input name="form_number" id="form_number" type="number" min="1" max="5" >
       </label>
    </p>
    <p>
       <label>
           贝多芬: <input name="form_number" id="form_number" type="number" 
                   min="1" max="10" >
       </label>
    </p>
    <p>
       <label>
           勃拉姆斯: <input name="form_number" id="form_number" type="number" min="1" max="7" >
       </label>
    </p>
    <p>
       <label>
           肖邦: <input name="form_number" id="form_number" type="number" min="1" max="10" >
       </label>
    </p>
    <p>
       <label>
           门德尔松: <input name="form_number" id="form_number" type="number" 
               min="1" max="4">
       </label>
    </p>
 </fieldset>

第四个 <fieldset> 标记

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

图 7. ‘上传文件’ 字段

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

清单 7. ‘上传文件’ 字段

<fieldset>
  <legend> 上传文件</legend>
  <p>上传您的乐团的一个文件,以方便包含在我们的音乐库中</p>
  <p>
      <label> 
          <input type="file" multiple="multiple" /> 
      </label>
  </p>
</fieldset>

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

清单 8. ‘确认’ 按钮

    <input type="image" src="img/submitbutton.jpg" alt="提交" width="100" height="45" />
</form>

JavaScript 和 CSS3

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

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

清单 9. 示例表单 JavaScript 代码

<script type="text/javascript" src="js/myform.js"></script>

function alertValues()
{
    alert("客户信息: " + "\n     " + fullname.value + "\n     " 
             + tel.value + "\n     " + email.value);  
}

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

清单 10. 示例表单 CSS3：

<link rel="stylesheet" type="text/css" href="css/myform.css">

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 针对此任务提供了异常强大的工具。