Question

我决定让人们可以在网站上对那些已经获得大奖的烂电影发泄他们的不满。我要制作一个表单，让人们发表想法，说说哪些电影不该获奖，而那些电影应该得奖。

下图展示了我们要制作的表单在Chrome（v16）中添加了一点基本样式后的效果：

除了标准的表单输入框和文本输入域之外，表单中还有一个数字控制器、一个滑动输入条，并且很多表单域都有占位符文字。如果我们聚焦（选中）某个表单域，其中的占位符文字就会自动消失；如果表单域失去焦点且未输入任何内容（点击一下输入框以外的区域即可），占位符文字又会再次显示。此外，如果在Google Chrome浏览器中查看页面，当我们准备提交没有任何内容的表单时，就会看到下面的结果：

页面不仅包含一些视觉元素（滑动条和控制器），还具有基本的客户端验证功能。我们知道，过去的表单验证一般都需要依赖JavaScript。

现在，所有这些用户界面元素（包括上述的滑动条、占位符文字和控制器）和表单验证都可以使用原生的HTML5来完成，不需要再依赖JavaScript，这是个很好的消息。让我们来看看如何使用这些新的表单特性。

8.1.1　理解HTML5表单中的元素

我们的HTML5表单包含很多元素，所以我们拆开来讲。首先表单被设定了一个ID用于对应样式，然后包含一个HTML5的hgroup，用于显示表单标题和说明文字：

表单中的三块子区域都使用带有legend标签的fieldset来包裹：

从上面的代码片段可以看出，每一个输入元素，都有一个label元素与之对应，且一并被包裹在div中，看起来是很普通的表单。不过，此处的第一个输入元素中使用了一个HTML5的表单特性：在id、name和type这些普通属性之后，有一个placeholder属性。

8.1.2　placeholder

placeholder属性看起来类似这个样子：

我们常常需要在表单域中显示占位符文字，所以HTML5的设计者决定让浏览器内建标签对其提供支持。只需在input元素中加入placeholder属性，其属性值就会默认显示为占位符文字，输入框获取焦点时该文字自动消失。当输入框失去焦点且没有任何输入值时，占位符文字则会再次显示。

上节代码片段的placeholder属性之后，是另一个HTML5表单特性required属性。

8.1.3　required

required属性看起来是这个样子的：

在支持HTML5的浏览器中，在input元素中追加布尔类型的属性required（也就是说你可以选择追加或不追加该属性），则表明该表单域为必填项。如果表单提交时该必填项没有任何信息，浏览器则会显示警告信息。警告信息的显示方式（包括显示内容和样式）取决于浏览器与输入框类型。除了HTML5的required属性，我们的例子中还追加了一个等价的WAI-ARIA属性：aria-required＝"true"。如果没有特殊原因，建议为输入框追加WAI-ARIA版的必填属性以方便屏幕阅读器用户（你应该还记得，我们在第4章学习过WAI-ARIA技术）。

我们之前已经看过Chrome中必填项警告信息的效果，下面的截图展示了Firefox中的效果：

required属性可用于多种类型的输入元素，以确保表单域必须输入值。range、color、button和hidden类型的输入元素则不能使用required，因为这几种输入类型几乎都有默认值。

另一个可追加到输入元素上的HTML5表单属性是autofocus。

8.1.4　autofocus

HTML5的autofocus属性可以让表单在加载完成时就有一个表单域被默认聚焦（或选中），以便于用户输入。下面的代码中被div包裹的表单域的末尾就被追加了一个autofocus属性：

使用该属性时要小心。如果有多个表单域都被追加了autofocus属性，则会造成跨浏览器混乱。例如有多个表单域追加了autofocus属性，在Chrome（v16）中会聚焦最后一个使用autofocus属性的表单域，而Firefox（v9）恰恰相反，会聚焦第一个使用autofocus的表单域。

还有一点需要注意，有些用户会使用空格键让网页内容向下滚动。如果网页的表单中含有带autofocus属性的表单域，则会阻止空格键的默认行为，这时敲击空格键会向已聚焦的输入框中输入空格。显然，这会让用户很懊恼。

8.1.5　autocomplete

很多浏览器默认提供自动完成功能以帮助用户输入。以往用户可以在浏览器设置中打开或关闭这项功能，现在我们还能告知浏览器我们不想在某个表单或表单域上使用自动完成功能。这不仅仅能保护敏感数据（例如银行账户），还可以让你确保用户用心填写表单，手工输入一些值。比如以前在填写表单时，如果需要填写电话号码，我就输入一个假号码。我保证不止我一个人这么做（大家不都是填假号码嘛？），但我也能保证如果在相关的输入项上禁用自动完成功能，那用户肯定不会输入一个假号码。下面的代码演示了一个禁用自动完成功能的表单项：

我们也可以通过给表单本身（不是fieldset）设置属性来禁用整个表单的自动完成功能。示例代码如下：

8.1.6　list（及对应的datalist元素）

list属性以及对应的datalist元素可以让用户在输入框中开始输入值的时候，显示一组备选值。下面是一个包含在div中的使用list属性及对应datalist元素的代码示例：

list属性中的值（awards）同时也是datalist元素的id。这样就可以让datalist与输入项关联起来。虽然将option包裹在select中不是必需的，但这样做便于为老版本浏览器提供降级方案。

使用了list属性的输入框看起来就是一个普通的文本输入框，当开始输入时，输入框下面就会显示一个数据选择框，其中包含从datalist中检索到的匹配数据。在下面的截图中可以看到效果（Firefox v9）。在本例中，因为datalist中的所有option都含有B，所以所有数据都显示出来了。

但当输入D的时候，就只有匹配的数据才被显示出来，效果如下图：

list输入框不会阻止用户输入自己想输入的内容，不过它为我们提供了一种便利的方式来添加输入提示功能，增强用户体验。

8.1.7　HTML5的新输入类型

HTML5新增了很多输入类型，它们最大的作用就是可以限制用户输入的数据，不需要引入额外的JavaScript代码。这些新的输入类型最赞的一点，就是在那些不支持新特性的浏览器中，它们会被降级显示为一个标准的文本输入框。此外还有很多很有用的腻子脚本可以让那些老版本浏览器也跟上时代。我们稍后会讲到这些内容，现在先来看看这些新的HTML5输入类型以及它们所带来的便利。

1. email

type＝"email"——支持它的浏览器会期望用户的输入匹配电子邮箱的格式。下面的示例代码中我们将type＝"email"与'required'和'placeholder'组合起来使用：

当提交一个不符合格式的输入值时，浏览器会生成警告信息：

此外，许多触摸屏设备（如Android、iPhone等等）会根据输入类型改变键盘模式。下图显示了type＝"email"的输入框在iPad上的使用效果。注意看输入键盘上那个方便输入邮箱地址的@符号：

2. number

type＝"number"——支持该特性的浏览器期望输入一个数字。这种输入类型默认还提供控制按钮，允许用户简单地点击向上或向下来改变数值。代码示例如下：

下图展示了该输入框在支持该特性的浏览器中的效果（Chrome v16）：

如果你输入一个非数字，浏览器会做些什么呢？Chrome（v16）会在输入框失去焦点时清除输入值，除此之外没有其他反馈；而Firefox（v9）则允许你输入任何值（变成了一个标准的文本输入框）。你可能注意到在上面的代码中，我们还设置了允许输入的最小值和最大值范围，具体代码如下：

超出范围的数字会（应该）得到特殊对待。浏览器的具体实现也不相同，Chrome（v16）会显示一个警告信息而Firefox（v9）则什么都不做。

3. url

type＝"url"——你猜对了，URL输入类型用于输入URL地址。与tel和email输入类型类似，它看起来和标准的文本输入框一样。不过有些浏览器会在提交不合法的URL时显示特定的警告信息。对应的代码示例如下，示例中包含了placeholder属性：

下面的截图显示了在Chrome中提交一个不合法URL地址时的效果：

和type＝"email"类型一样，触摸屏设备也会为URL输入框修改键盘模式。下图显示了iPad上type＝"url"的使用效果：

看到键盘上的Go、斜杠（/）和.com这几个按键了吗？因为我们要输入URL地址，所以设备为我们专门显示了匹配的键盘（除非你没准备访问.com网站，这种情况下你就用不着感谢苹果公司）。

4. tel

type＝"tel"是另一种用于收集联系人信息的输入类型。tel表示表单域期望输入一个电话号码。示例代码如下：

尽管tel类型被设计为输入数字格式，但在包括较新的Chrome v16和Firefox v9在内的很多浏览器中，它的表现和普通文本输入框一样。目前这些浏览器没有对无效输入值提供任何合理的警告信息⁽¹⁾。

不过好的一点就是，和对待email和url类型一样，触摸屏设备为这种类型贴心地提供了数字键盘以便完成输入。tel输入类型在iPad上的使用效果如下（iOS 5上的运行效果）：

注意看键盘上是不是少了字母按键，而优先显示了数字按键？这样就可以让用户更快地输入正确的数值。

5. search

type＝"search"——和普通文本输入框的表现基本一样，仅在个别浏览器中渲染得有点细微差别。示例代码如下：

在Firefox（v9）中的显示效果如下图，注意输入框的默认样式是矩形状：

但是在Chrome（v16）中的默认渲染效果则稍有不同，输入框是圆角的，且输入框右侧有一个快速清除按钮：

6. pattern

pattern＝""——“害怕，非常害怕”（还记得这句台词出自哪部电影吗？⁽²⁾）。在我看来，这句话用来描述正则表达式很合适。如果你不知道正则表达式是何物，那么我只好说不知是福。如果你知道，而且更厉害的是你还理解其含义，那下面的内容就是给你准备的。

学习正则表达式

如果你在万圣节的午夜一个人在墓地里看过《驱魔人》⁽³⁾，那你就可以去学习正则表达式了：http://en.wikipedia.org/wiki/Regular_expressions。

你可用pattern属性通过正则表达式来定义表单域的数据格式。示例代码如下：

我在网上搜索了大约458秒终于找到了一个验证姓名的正则表达式，这是作者的义务。在pattern属性中放置一个正则表达式，支持该特性的浏览器就会按照指定格式验证输入值。当和required属性组合使用时，一旦输入不符合格式的值，浏览器就会有如下图所示的反应。本例中我的输入值缺少姓氏：

7. color

type＝"color"——会在支持该特性的浏览器中生成一个颜色选择器，让用户可以选择十六进制的颜色值。示例代码如下：

悲剧的是，目前很少有浏览器支持该特性，好像只有Opera（v11）支持。如果浏览器默认的颜色选择器中没有所需的颜色，点击下方的Other…按钮就会打开操作系统默认的颜色选择器：

8.1.8　日期和时间输入类型

新的date和time输入类型背后的设计思想，是想为选择日期和时间提供一致的用户体验。如果你曾经在网上买过演出门票，那你就可能用过某种日期选择器。这种功能一般都是由JavaScript（如jQuery）提供，但我们希望能仅通过HTML5标签就实现这种常用功能。

1. date

示例代码如下：

和color类型一样，目前对date提供原生支持的浏览器寥寥无几，大多数浏览器默认都将其渲染为标准的文本输入框。超级棒的Opera已经实现了这个功能，下图显示了示例代码在Opera（v11）中的渲染效果：

date和time输入类型有很多不同的变种。下面是对其他变种类型的简要介绍。

2. month

示例代码如下：

选择器界面允许用户选择某个月，输入框中会被填充为年和月组成的值，如2012-06。

下图显示了浏览器中的效果：

3. week

示例代码如下：

使用week类型时，选择器允许用户选择一年中的某一周，输入框中会被填充格式如2012-W47这样的数据。

下图显示了浏览器中的效果：

4. time

示例代码如下：

time输入类型允许输入一个24小时制的时间值，如23：50。

在支持该特性的浏览器中，会显示出加减控制按钮，且仅允许输入时间值：

5. datetime和datetime-local

示例代码如下：

在Opera（v11）中的显示效果如下：

日期时间选择器在iOS设备上的显示效果更好，如下图：

日期时间选择器会生成一个由日期、时间和时区组成的值，日期与时间之间用T分割，使用Z表示协调世界时，使用正负值表示时区偏移。协调世界时的2009年10月25日显示如下：

协调世界时（UTC）与格林尼治标准时（GMT）在大多数实际应用中基本一样。时区偏移则很好理解，比如，北京时间比格林尼治标准时提前8小时（UTC ＋8），反映到输入值上，效果如下：

datetime-local输入类型和datetime几乎完全一样，只是省略了时区信息。

修改步增值

你可以使用step属性来修改各种输入类型控制按钮的步增值。比如，要将时间的步增值改为4个小时，将step的属性值设为14400秒（4×60×60）即可。将datetime的步增值改为4小时的示例代码如下：

6. range

range输入类型会生成一个滑动条。示例代码如下：

在Safari（v5.1）中的效果如下图：

默认的输入范围是0到100。但上面的示例代码通过min和max将范围设定为1到10。

range输入类型最大的一个问题是它从来不给用户显示当前的输入值。虽然滑动条仅被设计用来选择模糊的数值，但我还是经常想看看它的当前值。使用HTML5目前无法解决这个问题，但是如果你确实需要显示滑动条的当前输入值，可以通过JavaScript来实现。将上面的示例代码稍作修改：

我们增加了两个东西，一个是onchange属性，另一个是id为range的span元素。接下来再将下面这段JavaScript代码加入页面：

这样做就能获取滑动条的当前输入值，将其显示在id为range的元素（span标签）中。再用一点CSS将显示文字的字号变大、颜色变红即可。下图显示了修改后的滑动条在滑动过程中的显示效果：

其实还有一些和表单有关的HTML5新特性，但是这些特性更多的都是和应用开发及服务器端开发相关，所以没在此处做讲解。想要参阅W3C有关HTML5表单部分的工作草案，请访问：http://dev.w3.org/html5/spec-author-view/forms.html#forms。