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支持）