input標籤

增型表單標籤

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= "請輸入網址" 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"/> ;

此類型標籤的加入，輸入範圍內的資料變得非常簡單容易，而且非常標準，使用者輸入可感知體驗非常好。另外此標籤可以跟表單新增加的output標籤一塊使用，達到一個連動的效果。

<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專案開發，一定會遇到相關的js日期控件，在HTML5中新加入的表單屬性將會使Web開發變得更加簡潔。

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

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

7.顏色選擇input標籤

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

8. input標籤自動完成功能

有的項目會要求實作自動完成或者輸入提示功能，在HTML5的支援下將變得簡單。

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

<datalist id="autoNames">

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

       <option  value="#1網 > ;option  value="自學教學" ></option>

#</datalist>

#