HTML5 拥有多个新的表单输入类型，这些新特性提供了更好的输入控制和验证。

在可以弹出虚拟键盘的设备上会自动启用键盘的特殊样式，个别type，如 Date pickers 中的类型，在手机中可以调用系统的日期选择控件。

本章全面介绍这些新的输入类型以及使用效果：

以下是在 Nexus 5/Android 5.1.1/CM12 自带默认浏览器和谷歌中文输入法下的效果，其他浏览器和输入法中效果稍有不同。

◆email:

^{（type="email"）}

在下图中可以看到，弹出的键盘左下角默认的 "," 变成了 "@"。

◆url:

^{（type="url"）}

点击文本框弹出的键盘中左下角默认的 "," 变成 "/"，有些输入法还会有可以直接输入"www" 或 ".com" 的按钮。

◆number:

^{（type="number"）}

直接弹出数字键盘，只能输入数值。

◆range:

^{（type="range"）}

这个区间选择，在 IE 11 和 Microsoft Edge 中是这样的：

在手机浏览器中是这样的，但是太小了，也许还需要用CSS修饰一下：

◆Date pickers (date, month, week, time, datetime, datetime-local):

^{（type="date"）}

在 Microsoft Edge 下是这样的： 

在手机默认浏览器下是这样的：

在微信内置浏览器中是这样的：

UC浏览器中是这样的：

◆search:

^{（type="search"）}

在下图中可以看到，弹出的键盘右下角默认的 "回车" 变成了 "搜索"。

◆color:

^{（type="color"）}

一些浏览器中的文本框会变成色块，点击后可以弹出颜色选择界面。

点“更多”：

微信内置浏览器中（我想说这什么鬼，怎么点。。。）：

UC浏览器中：

HTML5 中INPUT会直接调用相应的浏览器特性，无疑会为开发者降低一定工作量，但不同浏览器中的显示效果和支持情况都不相同，目前数据的录入还是要考虑多种情况，不能太过依赖。

本文由lenashane.com原创，转载请注明出处：查看原文