HTML5 对于input标签的优化

1.input的type类型的新增，search和tel这两个，search知识对普通的input增加了些样式而已，而tel是和input的text样式完全一样的，只不过可以通过pattern去用正则判断输入的内容。判断是在点击提交按钮的时候，出现下面的错误展示情况，加上title可以展示对应你想提示的错误文案

<! DOCTYPE HTML><meta charset="utf-8"><!--chromo是不能实现search的，所以要加段css--><style>    input[type="search"] {-webkit-appearance:textfield;}</style><form id="login" action="login.php" method="get">    <input type="'submit"  name="username" value="admin"  autofocus /><br>    <!--电话号码的这个type和普通的一样，就是可以通过pattern来进行正则判断验证， 可以用title来指定错误提示-->    tel:<input type="tel" name="num" pattern="^\d{10}$" title="请输入10位数字"><input form="login" formaction="a.php" formmethod="post" type="submit"  name="dosubmit" value="登录" /></form>

2.url和email类型
这两个属性不用像tel一样要自己加pattern来判断，他们两个类型是自己就加好判断的。
url类型展示如下

url:<input type="url" required name="url">

错误提示如下图：

email:<input type="email" required name="email">

email类型的错误提示如下：

required字段的错误提示如下：

3.关于时间的类型，这些其实在不支持html5的地方其实就是一个文本输入框

datetime:<input type="datetime" name="datetime"><br>    date:<input type="date" name="date" value="2016-08-03"><br>    month:<input type="month" name="month" value="2016-08"><br>    week:<input type="week" name="week" value="2016-W10"><br>    time:<input type="time" name="time"  value="11:11"><br>    datetime-local:<input type="datetime-local" name="datetime-local" value="2016-01-01T00:00"><br>

展示效果如下，鼠标转中哪个就可以使用哪个，可以通过加value属性，然后按照固定的格式来初始化这些属性的默认值

4.number，range
ps：在form标签里面加上novalidate属性就能不验证就进行跳转

<form novalidate action="login.php" method="get">

同理，如果在表单项里面加上formnovalidate，就能取消单个input的验证

然后number类型，可以通过上下箭头来增加减少数字,可以通过max和min来控制最大最小值,step属性表示只能输对应的值的倍数，如下例只能是3的倍数。

number:<input type="number" min="0" max="20" step="3" name="number"><br>range:<input type="range" min="0" max="100" step="3" name="range"><br>

range表示范围，也可以通过max，min和step来控制对应的值。要显示range的话，还需要和output标签配合使用，

range:<input type="range" min="0" onchange="num.value=value" value="50" max="100" step="3" name="range"><output id="num">50</output>

同样的，onchange方法也可以用js来实现，获取id为num的标签，然后给他附加value属性

 onchange="document.getElementById('num').value=this.value" 

5.color，file
color可以支持直接的颜色选择

color:<input type="color" name="color"><br>

html5的文件选择，可以支持多个选择，只要加上multiple属性即可，可以通过accept可以指定MIME类型

file:<input type="file" name="file" multiple accept="image/*"><br>