表單元素的required,autocomplete,list用法

required：

當在一個表單元素如：input中加上required屬性時，點擊提交表單按鈕，針對input會彈出一個默認的警告信息，以下圖：

代碼以下：

<form id="myForm">
    Add your telephone:
    <input type="tel" name="phone" placeholder="input your telephone" required="required"/>
</form>
<input type="submit" form="myForm"/>

注意submit按鈕並無放在form裏面，此處是用id連接submit與form關係的。這樣讓submit脫離了form，能夠實現一些特殊的視覺效果。

autocomplete:

自動爲咱們提供所輸入過的字符。可能的值爲off、on，默認值爲on。以下圖：

autocomplete的數據來自於瀏覽器(user agent)

list/datalist:

在HTML5中提供了一個list屬性，能夠用來提供autocomplete值，能夠連接http://caniuse.com/#search=datalist查看支持狀況。

代碼以下：

<form id="myForm">
    Add your telephone:
    <input type="tel" name="phone" list="myDataList" 
           placeholder="input your telephone" 
           required="required"/>
</form>
<input type="submit" form="myForm"/>
<datalist id="myDataList">
    <option value="dog">
    <option value="duck">
</datalist>