HTML5 新增了很多输入类型，它们最大的作用就是可以限制用户输入的数据，不需要引 入额外的JavaScript 代码。

这些新的输入类型最赞的一点，就是在那些不支持新特性的浏 览器中，它们会被降级显示为一个标准的文本输入框。

在移动端显示的时候，不同的输入类型弹出的虚拟键盘的布局是不一样的。

一. email类型

要求输入的内容中是个email，即必须包含@符号。

当提交的信息不符号格式时，浏览器会生成警告信息。

注意：不同的浏览器警告信息是不同的。

<form action="#">
    <input type="email">
    <p><input type="submit"></p>

</form>

chorme:

firfox:

在移动终端设备，会根据输入类型改变键盘模式。

Android手机:键盘是全键盘形式，比较方便输入。

二. number类型

要输入的内容是数字。

这种输入类型默认还提供控制按钮，允许用户简单地点击向上或向下来改变数值。

只能输入数字。(小数点是可以)

也可以添加属性min和max来限制输入的数字的范围。

<form action="#">
    <input type="number" min="10" max="30">
    <p><input type="submit"></p>

</form>

三. url类型

要求必须输入一个合法的url。

四. tel类型

期望输入一个电话号码。

由于各个地区的电话号码格式都不一样，所以目前几乎所有的浏览器都不会对电话号码做出验证。只是在移动弹出的虚拟键盘不一样而已。

五. search类型

这个在浏览器中显示和普通的文本输入框没有太大区别。

只是在chrome中会有个快速删除的按钮出现。

六. color类型

会在支持该特性的浏览器中生成一个颜色选择器，让用户可以选择十六进制的颜色值。

移动端：

七. range类型

会生成一个滑动条滑动条可以手动拖动。

这个滑动条最大的不便是不给用户展示当前的进度。如果非要显示进度只能通过js来完成。

<form action="#" method="get">
    <p>30</p>
    <input type="range" name="a" min="0" max="100" value="30" onchange="show(this);">
    <p><input type="submit" value="提交"></p>
</form>
<script type="text/javascript">
    var p = document.getElementsByTagName("p")[0];
    function show(ele) {
        p.innerHTML = ele.value;
    }
</script>

八. 时间相关类型：date、month、week、time、datatime

把type设置成这几个值，会和设置成color差不多，会弹出一个与日期时间相关的选择器，可以从中选择日期或时间。

在移动端显示效果会好一些。pc端目前只有chrome实现了，firefox和safari还没有实现。