增型表單標(biāo)簽

HTML5中，新標(biāo)準(zhǔn)把文本框提示信息、表單校驗、日期選擇控件、顏色選擇控件、范圍控件、進(jìn)度條、標(biāo)簽跨表單等功能直接加入新的表單標(biāo)簽中。

1. Number類型input標(biāo)簽

<input type="number" name="demoNumber" min="1" max="100" step="1"/>

name: 標(biāo)識表單提交時的key值 min: 標(biāo)識當(dāng)前輸入框輸入的最小值 max: 標(biāo)識當(dāng)前輸入框輸入的最大值 step: 標(biāo)識點擊增大/減小的時候，增加/減小的步長

2. Email類型input標(biāo)簽

<input type="email" name="email" placeholder="請輸入注冊郵箱"/>

當(dāng)表單在提交前，此文本框會自動校驗是否符合郵箱的正則表達(dá)式。

3. URL類型的input標(biāo)簽

<input type="url" placeholder="請輸入網(wǎng)址" name="url"/>

4. Tel類型的input標(biāo)簽

<input type="tel" placeholder="輸入電話" name="phone"/>

5. range類型的input標(biāo)簽

<input type="range" min="0" max="50" step="5" name="rangedemo" value="0"/>

此類型標(biāo)簽的加入，輸入范圍內(nèi)的數(shù)據(jù)變得非常簡單容易，而且非常標(biāo)準(zhǔn)，用戶輸入可感知體驗非常好。另外此標(biāo)簽可以跟表單新增加的output標(biāo)簽一塊使用，達(dá)到一個聯(lián)動的效果。

<form oninput="output.value=parseInt(range.value)"/>

    <input type="range" min="0" max="100" step="5" name="range" value="0"/>

    <output name="output">0<output/>

</form>

6. 新的日期、時間、月份、星期input標(biāo)簽

Web項目開發(fā)，一定會遇到相關(guān)的js日期控件，在HTML5中新加入的表單屬性將會使Web開發(fā)變得更加簡潔。

<input type="date" name="datedemo"/>

相關(guān)的日期屬性還包括：month、time、week、datetime-local、datetime

7. 顏色選擇input標(biāo)簽

<input type="color" name="colordemo"/>

8. input標(biāo)簽自動完成功能

有的項目會要求實現(xiàn)自動完成或者輸入提示功能，在HTML5的支持下將變得簡單。

<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />

<datalist id="autoNames">

       <option  value="輕松入門" ></option>

       <option  value="php中文網(wǎng)" ></option>

       <option  value="自學(xué)教程" ></option>

</datalist>