增型表單標(biāo)簽

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

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

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

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

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

<input type="email" name="email" placeholder="請(qǐng)輸入注冊(cè)郵箱"/>

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

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

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

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

<input type="tel" placeholder="輸入電話(huà)" name="phone"/>

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

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

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

<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. 新的日期、時(shí)間、月份、星期input標(biāo)簽

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

<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)簽自動(dòng)完成功能

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

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

<datalist?id="autoNames">

???????<option??value="輕松入門(mén)" ></option>

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

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

</datalist>