增型表單標(biāo)籤

HTML5中，新標(biāo)準(zhǔn)把文字方塊提示資訊、表單校驗(yàn)、日期選擇控制項(xiàng)、顏色選擇控制項(xiàng)、範(fàn)圍控制項(xiàng)、進(jìn)度條、標(biāo)籤跨表單等功能直接加入新的表單標(biāo)籤。

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

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

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

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

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

#當(dāng)表單在提交前，此文字方塊會(huì)自動(dòng)校驗(yàn)是否符合郵件匣的正規(guī)表示式。

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

<input type="url" placeholder= "請(qǐng)輸入網(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)籤的加入，輸入範(fàn)圍內(nèi)的資料變得非常簡(jiǎn)單容易，而且非常標(biāo)準(zhǔn)，使用者輸入可感知體驗(yàn)非常好。另外此標(biāo)籤可以跟表單新增加的output標(biāo)籤一塊使用，達(dá)到一個(gè)連動(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專案開發(fā)，一定會(huì)遇到相關(guān)的js日期控件，在HTML5中新加入的表單屬性將會(huì)使Web開發(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í)作自動(dòng)完成或者輸入提示功能，在HTML5的支援下將變得簡(jiǎn)單。

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

<datalist?id="autoNames">

???????<option??value="輕鬆入門" ></option>

???????<option??value="#1網(wǎng) > ;option??value="自學(xué)教學(xué)" ></option>

#</datalist>

#