增型表單標簽

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

1. Number類型input標簽

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

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

2. Email類型input標簽

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

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

3. URL類型的input標簽

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

4. Tel類型的input標簽

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

5. range類型的input標簽

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

此類型標簽的加入，輸入范圍內(nèi)的數(shù)據(jù)變得非常簡單容易，而且非常標準，用戶輸入可感知體驗非常好。另外此標簽可以跟表單新增加的output標簽一塊使用，達到一個聯(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標簽

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

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

相關的日期屬性還包括：month、time、week、datetime-local、datetime

7. 顏色選擇input標簽

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

8. input標簽自動完成功能

有的項目會要求實現(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="自學教程" ></option>

</datalist>