Question

Email 地址

十多年来，web 表单仅提供了几种类型的表单域。其中用的最多的是：

表单域类型	HTML 代码	说明
复选框	<input type=”checkbox”>	可以选中或不选中
单选按钮	<input type=”radio”>	同其它单选按钮分组使用
密码输入框	<input type=”password”>	显示点而不是你输入的字符
下拉框	<select><option>
文件选择器	<input type=”file”>	弹出“打开文件”对话框
提交按钮	<input type=”submit”>
普通文本框	<input type=”text”>	可以省略 type 属性

所有这些输入类型都可以在 HTML5 使用。如果你想“升级到 HTML5”（或许可以通过改变 DOCTYPE），那么你根本不需要改变你的表单。这是完全兼容的！

但是，HTML5 定义了 13 个新的域类型。这是因为它们可以提供一种更好的语义，没有理由不尽早使用它们。

第一种新类型是 email 地址输入框。它看起来是这样的：

<form>
    <input type="email">
    <input type="submit" value="Go">
</form>

本来我想先说明一下对于不支持 type="email" 的浏览器该怎么做，但是这样并不好。为什么呢？因为我不知道该如何解释什么叫不支持 type="email" 的浏览器。所有的浏览器都“支持” type="email" 。不过，它们可能不会对此有什么特别的反应。不能识别 type="email" 的浏览器仅仅将其当做 type="text" ，将其渲染成一个普通的文本输入框。

你可以想象这有多么重要。web 有几百万的表单要求你输入 email 地址，它们都使用的是 <input type="text"> 。你会看到一个输入框，然后输入你的 email 地址就完事了。而 HTML5 则定义了 type="email" 。浏览器会对此不知所措吗？不会。现在所有的浏览器都会将一个不认识的 type 属性当做 type="text" ——甚至 IE6。所以你可以放心地将 web 表单“升级”为使用 type="email" 。

如果浏览器支持 type="email" ，会发生什么呢？这意味着很多事。HTML5 标准并没有指定新的输入类型的任何特殊的用户界面。很多桌面浏览器，比如 Safari、Chrome、Opera 和 Firefox 简单地将其渲染成一个文本框——就像 type="text" 一样——因此用户不会注意到有任何不同（直到他们提交表单）。

下面看看 iPhone 上的表现。

iPhone 没有物理键盘。所有“输入”都需要通过屏幕上出现的一个虚拟键盘完成。这个键盘将在特定的时刻出现，比如你把焦点放在 web 页面的输入框上。Apple 让 iPhone 的 web 浏览器很聪明。它能够识别出多个 HTML5 的新增输入类型，并且能够根据特定的输入类型动态改变键盘。

例如，email 地址就是文本，对不对？当然，但是它是一种特殊的文本。比如，显然所有 email 地址都有 @ 符号，并且至少一个点（.），并且不允许包含空格。所以，在你使用 iPhone 并焦点在 <input type="email"> 元素时，你会看到一个虚拟键盘，包含比普通键盘少一些按键，比如没有空格，并且增加了 @ 和 . 字符。

自己测试一下试试吧！

总结：马上将所有 email 表单域转换到 type="email" 没有任何后顾之忧。没有人甚至会注意到这一点，除了 iPhone 用户，并且他们可能也根本不会注意。但是，凡是注意到这一点的人们都会笑笑，并且感谢你改进了他们的用户体验。

Web 地址

Web 地址——也就是 URL，有些人也会叫做 URI——是另一种特殊的文本。web 地址的语法由 Internet 标准决定。如果有人要求你输入一个 web 地址，他们可能期望的是 “http://www.google.com/”，而不是 “125 Farwood Road”这种。斜杠很常见，比如 Google 的主页就有三个斜杠。点号也很常见，但是不允许空格。每一个 web 地址都有一个域名后缀，比如 “.com” 或者 “.org”。

在 iPhone 上面点击 <input type="url"> 空间，其键盘是这样的：

自己测试一下 type=”url” 。

iPhone 改变了其虚拟键盘，就像 email 地址一样，但这次是专为 web 地址优化的。空格键被三个键取代：点号、斜杠和 “.com” 按钮。（你可以长时间按住 .com 按钮，iPhone 会自动切换到另外的通用后缀，比如 .org 或者 .net）

很多现代桌面浏览器会将 type="url" 渲染成一个普通的文本框，因此用户直到提交时才会注意到这一点。不支持 HTML5 的浏览器则将 type="url" 当做 type="text" 处理，因此将所有用于输入 web 地址的表单域使用 type="url" 也没有任何不妥。

使用 Spinbox 输入数字

下一步：数字。对于数字输入的需求要远大于 email 或者 web 地址。首先，数字要比你想象的复杂得多。例如，选择一个数字。-1？不不不，我是说一个介于 1 和 10 的数字。7½？不不不，不能是分数。PI？现在你就要疯了。

我的观点是，你所需要的“不仅仅是一个数字”。你所需要的是一个在特定范围内的数字。并且你需要的是在这个范围内的特定类型的数字——可能是整数，不能是分数或者小数，或者是某些能被 10 整除的数。HTML5 就可以帮助你达到这一目的。

<input type="number"
       min="0"
       max="10"
       step="2"
       value="6">

我们每次解释一个属性：

• type="number" 意味着这是一个数字输入域；
• min="0" 指定这个域接受的最小值；
• max="10" 指定可接受的最大值；
• step="2" 同最小值一起使用，定义可接受的数字范围：0，2，4，等等，直到最大值；
• value="6" 是默认值。它看起来很熟悉。这与你指定表单域的特定值的属性名是一样的。（我提到这一点目的是说明 HTML5 与前一版本的 HTML 是一致的，你不需要改变你以前的代码。）

这是数字控件的标记代码。注意，所有这些属性都是可选的。如果你有最小值但是没有最大值，你可以仅仅指定最小值，而不指定最大值。默认 step 是 1，如果你不需要使用另外的 step 值，就可以忽略这个属性。如果没有默认值， value 属性可以是空字符串，或者简单的忽略掉。

测试一下你的浏览器是不是支持！

然而，HTML5 做得比这还要多。为了编程控制，你也可以使用 JavaScript 进行改变：

• input.stepUp(n) 增加 n 个表单域的值；
• input.stepDown(n) 减少 n 个表单域的值；
• input.valueAsNumber 使用浮点数返回当前值（ input.value 始终返回 string ）

数字控件的显示取决于浏览器的实现。在 iPhone 上，浏览器还会为数字输入优化键盘：

Opera 的桌面版本，type=”number” 则被渲染成一个 “spinbox” 控件，具有一个向上和向下的箭头，允许你通过点击箭头改变值。

Opera 能够识别 min、max 和 step 属性，所以你会一直到达可接受的最大值。如果你已经到到达最大值，向上的箭头将会变灰。

就像我们先前讨论过的那样，不支持 type="number" 的浏览器还是会将其作为 type="text" 处理。默认值将会出现在表单域中（因为它在 value 中存储），其他属性值，比如 min 和 max 则被忽略。你可以自己实现这一功能，或者使用某种提供了 spinbox 组件的 JavaScript 框架。不过，在此之前还是要检测是不是有 HTML5 的支持，例如：

if (!Modernizr.inputtypes.number) {
    // no native support for type=number fields
    // maybe try Dojo or some other JavaScript framework
}

使用 Slider 输入数字

Spinbox 并不是表现数字的唯一控件。你应该也见到过 slider 组件：

Chrome 将 type=range 渲染成一个 slider 组件。

现在自己 测试一下你的浏览器是不是支持 type="range" 吧！

现在，你可以在 web 表单中使用 slider 组件了。它的用法同 spinbox 类似：

<input type="range"
       min="0"
       max="10"
       step="2"
       value="6">

所有属性同 type="number" 都是一样的——min、max、step、value。唯一区别在于二者用户界面不同。浏览器会将 type="range" 渲染成一个 slider 组件，而不是输入框。Safari、Chrome 和 Opera 都是这么做的。（令人悲哀的是，iPhone 仅仅将其作为一个文本框渲染出来，甚至没有提供特殊优化的虚拟键盘。）不支持这一书用的浏览器会将其作为 type="text" 进行渲染。