1、HTML5 用户指南1HTML5 用户指南第三章 表单 3.1 我们爱 HTML，现在它反过来爱我们了HTML5 使得开发表单变得很快。有一些不错的内容，例如，HTML5 添加了两种 HTTP 类型的表单动作（update 和 delete） ，可以与当前的 get 和 post 配合使用。更有意思的是，此前需要在一个表单元素之中的很多元素（, , , , ,加上 , , , 和 这样的新元素） ，现在这些元素可以位于页面的任何地方，并且通过指向其表单所有者的 id 的一个 form 属性与一个表单关联起来。考虑这个例子：.由表单 foo 所有，因为它包含于其中，并且没有表单属性覆盖所有关系位
2、于表单之外，但它仍然属于该表单，因为它的表单属性指向了其表单所有者的 id。当你想要这些元素在视觉上（和结构上）出现在父表单之外时，会给样式化带来更多的灵活性。但是，更大的功能是新的 HTML5 的表单类型以及它们所带来的内置验证。终于，对于这些基本的数据类型，你根本不再需要JavaScript 验证，新的输入类型优雅降级，但是在到达金色的未来（当每个人都有HTML5 浏览器的时候，或者老板告诉你，用旧的浏览器的用户将必须忍受仅在服务器端的表单检查）之前，仍将需要你的 JavaScript。HTML5 用户指南13.2 新的输入类型新的表单字段是这个规范成为 HTML5 的起源，在这里我们看到
3、了向后兼容扩展原理的应用。扩展主要是 input 元素的 type 属性的新值。由于所有浏览器默认为，不理解新的扩展的遗留浏览器将会退而求其次地使用默认值，并且允许用户向普通文本字段输入数据。注意：规范对于浏览器如何把新的输入类型显示给用户或如何报告错误等没有做出要求。不同的浏览器和不同的设备将会显示不同的用户界面。例如，Safari桌面和 Safari/iPhone 上显示的一个选择框的差异如图 3.1 所示。图 3.1 选择框的差异同一个选择框显示于 Safari/Windows（左边）和 Safari/iPhone 中。大多数的屏幕截图来自于 Opera，因为在编写本书时（2010 年
4、5 月）它具有最完整的实现，但是对于在其他浏览器中实现的内容，我们将会使用该浏览器作为替代。3.2.1 email 输入类型标记 告诉浏览器，如果用户的输入看上去不像是一个有效的 E-mail 地址，它就不应该允许该表单提交，也就是说，它不会检查 E-mail 地址是否存在，而只是检查它是否是有效的格式。和所有的输入类型一样，用户可能提交带有空字段的表单，除非该字段是必填的。浏览器报告错误的方式也没有定义。Opera 10.50 中（实验性）的实现如图 3.2 所示。图 3.2 Opera 10.50 中一条自动生成的错误消息multiple 属性也是允许的，这意味着，该字段的值可能是逗号隔开
5、的有效 E-mail 地址的一个列表。当然，这不是要求用户手动输入一个逗号隔开的列表，浏览器可能使用复选框从用户的邮件客户端或手机通讯录中很好地取出用户的联络人的列表。位于 http:/ 的实验性的Firefox Contacts 插件，从各种资源收集联系人信息，当用户遇到一个 时，它通过收集的信息提供地址。它还将通过 W3C 草案 Contacts API（http:/www.w3.org/2009/dap/ ）将这些联络信息暴露给 Web 站点脚本。3.2.2 URL 输入类型让浏览器确保输入字段是正确的 URL。浏览器可能为用户提供帮助，例如，Opera 显示来自用户的浏览器历史的，最近
6、访问过的 URL 的一个列表，并且自动地在 URL 的“www” 开始处之前添加“http:/”（一个 URL 不一定是一个 Web URL，例如它可能是一个基于 Web 的 HTML 编辑器，其中用户可能想要使用 tel:伪协议 ） 。3.2.3 date 输入类型date 输入类型是我所喜欢的一个。我们都看到过这样的 Web 页面，要求用户输入一次航班的日期、音乐会门票的日期等。由于日期的输入多种多样（是DDMM-YYYY 格式、MM-DD-YYYY 格式，还是 DD-MMM-YY 格式） ，格式各个站点的开发者所编写的 JavaScript 日期选取器挂件，早外观、易用性和可访问性上存在
7、很大的差异。解决了这一问题。Opera 上弹出的一个日历小挂件如图 3.3 所示。在 BlackBerry Device Software 5.0 版的 BlackBerry 浏览器上，用来实现日期输入字段的日期输入控件，与本地 BlackBerry 日历应用程序中的 Java 部件（尽管它没有整合该日历应用程序）相同。参见图 3.4。图 3.3 Opera 10.50 显示一个日历小挂件图 3.4 BlackBerry 浏览器上的当然，这些都是早期的情况。该浏览器现在能够调佣本地的日历应用程序，以便你可以浏览日期来看看你未来的约会。关键在于，该浏览器现在能够理解你的意图。之前的日期选取器（从
8、浏览器的视角）只不过是和，并且附加了很多 JavaScript 行为的链接。现在的浏览器知道，你实际上在输入真正的时间和日期，并且可以对其他的日期和时间信息提供更丰富的控制和集成。3.2.4 time 输入类型允许输入一个 24 小时格式的时间并验证它。实际的用户界面有时浏览器可能只需要简单地输入数字，但如果用户输入的小时数大于 24 或者分钟数大于 59，将会抛出一个错误；或者界面可能更加精巧一些，例如，一个带有可拖曳表针的钟面。用户界面还允许输入时区偏移量。HTML5 用户指南13.2.5 日期时间输入类型date 和 time 验证一个精确的日期和时间。本地日期和时间用作 datetim
9、e，除非浏览器不允许用户添加（或修改）一个时区偏移量。3.2.6 month 输入类型允许输入和验证一个月份。尽管在内部它存储为 112 的一个数字，但是浏览器可能提供一个选择方法，用户可以选取月份的名称。可以用一个选择框来实现，其中带有 12 个选项，是 January 到 December，但是这不够本地化。使用一个 HTML5 月份输入类型，法语地区的一个浏览器可能提供带有Janvier 而不是 January 的下拉列表。浏览器做更多的工作，而你做更少的工作，这才是正确的方式。3.2.7 week 输入类型允许输入并验证一个周数。尽管这是一个简单的输入字段，允许用户输入一个数字，但它实
10、际上较为复杂：有些年份有 53 周。表示 2010 年第 7 个周的格式是 2010-W07。Opera 提供了一个日期选择器 UI，可向输入字段中填入任何选定日期所处的周数，而不是 YYYY-MM-DD 日期格式（如图 3.5 所示） 。图 3.5 Opera 10.50 对 的显示3.2.8 number 输入类型如果用户没有输入一个数字字符，毫无疑问，number 输入类型将抛出一个错误。它与 min、max 和 stop 属性能很好地协作。在 Opera 中，它显示为一个微调器控件，将不能超出最大限制和最小限制（如果指定了的话） ，并且根据 step 中指定的增量来增加，不过用户也可以
11、输入一个值（如图 3.6 所示） 。图 3.6 Opera 10.50 对 的显示3.2.9 range 输入类型显示为一个滑块条。图 3.7 给出了它在 Google Chrome中的显示。图 3.7 Google Chrome 对的显示之前，滑块条需要通过劫持一个输入值并针对指针使用 JavaScript 和图像来模仿。由于这在浏览器中不是本地的，需要费很多心思并且要编写额外代码，才能确保键盘的可访问性。现在滑块条成为 HTML 的本地化的部分，在减少开发者工作量的同时使键盘用户的可访问性更好。参见本章“综合应用”一节的示例以了解更多信息。3.2.10 search 输入类型这一输入类型期
12、待一个搜索关键字。在 Safari 中，还有一个非规范的属性可以使用 results=n 属性添加最近结果的历史。搜索类型和文本类型之间的差异只是样式化，在 Mac 上的 Safari 中，它会对搜索应用操作系统默认的圆角样式，你无法使用某些专用的 CSS 来覆盖（为此向 Wilf Nas 致敬）：inputtype=”search” -webkit-appearance: textfield;3.2.11 tel 输入类型tel 类型期待一个电话号码。这里没有特殊的验证，它甚至不强调只输入数字，因为很多电话号码常常带有额外的字符，例如+44（0）208 123 1234。由于手机“知道”它们
13、自己的号码，因此我们期待大多数手机能够做些事情，例如自动填充这些输入字段。现在还没有手机能够做到这一点，尽管 iPhone 带有一个电话号码输入屏幕（如图 3.8 所示） 。图 3.8 iPhone 的键盘用于完成3.2.12 color 输入类型允许用户通过选取器输入一个颜色值。目前为止，它只在BlackBerry 上实现了（如图 3.9 所示） 。图 3.9 BlackBerry 上的3.3 新的属性除了新的输入类型，input 元素还有几个新的属性用于指定行为和限制：autocomplete,min, max, multiple, pattern,和 step。还有一个新的属性 list
14、，它联系到一个新的元素以允许一种新的数据输入方法。3.3.1 list 属性是对选择框的回忆，但是如果用户不想要选择与预先定义的选项，也允许用户输入自己的文本。列表包含在一个新的元素中，在 list 属性的值中引用其 id:自身没有显示，而是把值显示到一个类似选取的字段中。前面的例子使用 type=text 来允许自由形式的输入，但你可以对前面提到的任何输入类型使用 ，如 url, email 等。它也可能随着用户的输入动态地填充选项，从而复制Google Suggest 的功能。参见 http:/ suggest/ 了解更多细节。很多人问过，为什么/ 对不组合为像 的一个单个的新元素呢？答案
15、在于向后兼容性，/成对地使用，在遗留浏览器中降级为 ，以便用户至少可以输入一些内容，你也可以很容易地对那些浏览器使用 JavaScript 来模拟完整的实现。3.3.2 autofocus 属性autofocus 布尔值提供了一种生命式的方法，在页面加载的时候来聚焦到一个表单控件。之前，开发者需要使用 control.focus()编写 JavaScript。新的方法允许浏览器做更聪明的事情，例如，如果用户已经点击了其他地方，就不会真正地聚焦该控件（这在旧式的 JavaScript onload 聚焦脚本中是一个常见问题） 。一个页面上应该只有一个这样的输入字段。从可用性的视角来看，这个属性应
16、该小心使用。我们建议在拥有一个表单字段作为其核心目的的页面上使用它，例如搜索表单。3.3.3 placeholder 属性开发者经常使用的一个可用性技巧，就是在输入表单中的占位文本，它用作给用户的一个提示，当用户聚焦到该字段时，这些文本会消失，当聚焦离开该字段时，这些文本又恢复出现。这往往需要使用 JavaScript。然而，现在我们可以通过 placeholder 属性的声明来做到。规范指出： “对于一个较长的提示或者其他的建议性文本，title 属性更为合适。 ”当前，基于 WebKit 的浏览器（最初是一个专有的 Apple HTML 扩展）以及Firefox 3.7 的 alpha 版已经可以显示它了。Introducing HTML51
