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">空间，其键盘是这样的：
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"进行渲染。
