HTML5 INPUT新增属性

HTML5的input标签新增了不少属性，也是让你们很是兴奋的一件事，用简单的一个属性搞定之前复杂的JS验证。input新增的这些属性，使得html和js的分工更明确了，使用起来十分舒畅。
咱们先看下input新增了的属性：
新增属性一：autoconmplete
autoconmplete能够赋值为 on 或者 off。当为 on的时候，浏览器能自动存储用户输入的内容。当用户返回到曾经填写过值的页面的时候，浏览器能把用户写过的值自动填写在相应的input框里。
如今不少网站都实现了这个功能，不过基本都是用php来实现的。用了这个属性，无疑能够减小不少前端和后台的交流量和工做量。
新增属性二：autofocus
autofocus 能够赋值为 autofocus，也就是在页面加载完成的时候自动聚焦到这个input标签，天然 type="hidden"的时候是不能用的。 这个也是一个比较常见的效果，至今为止的实现方法是用js。在页面加载完时执行聚焦操做，如今也被一个属性搞定了。
能够想象，一个页面至多只有一个input标签会设置 autofocus，不然必然不会达到预期效果。由于不可能同事聚焦在两个input上。
新增属性三：required
input的有一个强力新增属性，免去验证的麻烦。能够赋值为 required。
好比用户注册页面的用户名和密码都是必填的，只要设置一个required就能够了。而在之前是须要js来验证或者后台验证的。
注意：这里required属性是须要用户来填写的，因此TYPE是button、submit、reset、image等等不须要用户填写选择的类型是不可使用这个属性的。
新增属性四：placeholder
这个新增属性也是很是使用，用在type= text email等等类型的时候，提示用户输入信息的格式或者内容等等。这个效果在以前也是须要js来实现的。是一种比较常见的效果：

Name: 

 

Address: 

 HTML5 INPUT新增属性
新增属性五：新增list属性---联想框效果
这个属性显示相似于百度搜索框那种联想框效果，也是很是实用的一个属性。
注意从这个属性使用的特色：须要有对应的datalist标签；datalist子标签option支持 value和lable两个属性；list的属性值要和datalist的id一致。
使用示例 （opera支持）