原文鏈接：http://www.cnblogs.com/fly_dragon/archive/2012/05/27/2519951.html
引言
在之前的HTML表單標籤中，對於一些功能支持的不夠好，比如：文本框提示信息（之前只能通過js和input的事件結合處理）、表單校驗、日期選擇控件、顏色選擇控件、範圍控件、進度條、標籤跨表單等功能。當然這些東西我們都可以直接通過js和dom元素配合實現這些通用的功能。這些功能或者是標籤都已經大量的使用在了現代的Web應用中，而這些公共性的東西在早期的HTML標準沒有直接的標準支持，而在HTML5中，新標準直接把這些常用的基本的功能直接加入的新的表單標籤中，真正把表單功能異常的強大，那就跟我走一下HTML5智能表單之旅吧!
由於最新版本的Opera瀏覽器對新型表單支持的最爲完美,所以建議本blog或者以下示例請在Opera瀏覽器上打開.
HTML5新增加表單標籤
新的標準中添加了很多輸入型控件，比如：Number、URL、Email、Range、Color等。而他們都是以 input標籤的type屬性出場，那下面我一一簡單介紹一下。[以下所有的例子請用Opera瀏覽器瀏覽]
1）只能輸入數字的Number類型input標籤
Html代碼爲:<input type="number" name="demoNumber" min="1" max="100" step="2"/>
運行效果:
注:此標籤其實就是普通的input標籤,只不過是type類型指向了number,標識當前標籤接受數字類型輸入.另外添加了四個屬性.
name:屬性大家很熟悉了用來標識表單提交時的key值
min:是表單標籤新增加的屬性標識當前輸入框輸入的最小值
max:那就是最大值了
step：是步長的意思，也就是在點擊增大或者減小的時候的增加減少的步長
小結：min，max，step是表單標籤中添加的新的屬性。另外就是type又增加了一個新的number類型，接受數字輸入。而之前我們要做到這樣的效果只能通過js在失去焦點時候判斷，控制起來不那麼方便，現在一切都那麼簡單簡潔。
2）新型Email類型input標籤
Html代碼：<input type="email" name="email" placeholder="請輸入註冊郵箱" />
運行效果：
注：在上面HTML代碼中，相對於之前的標籤，不同點：type="email"表示當前input標籤接受一個郵箱的輸入。另外就是：placeholder="請輸入註冊郵箱" 這個屬性的功能，相信你看到此時的效果的時候你會感到非常想興奮，而在之前實現此提示信息，需要監聽一下文本框的blur事件，然後判斷是否爲空，爲空再去給文本框賦值一個灰色的字體提示信息，而現在只需要一個簡單屬性指定就可以了，瀏覽器都幫我們實現了。
小結：當表單在提交前，此文本框會自動校驗是否符合郵箱的正則表達式，另外placeholder屬性帶來的提示信息功能太強大了。
3）新型Url類型input標籤
這裏不再贅述了，跟Email類型input標籤類似。只看一效果吧：
Html代碼：<input type="url" placeholder="請輸入網址" name="url" />
運行效果：
4）新型Tel類型input標籤
Html代碼：<input type="tel" placeholder="輸入電話" name="phone"/>
運行效果：
5）新型range類型input標籤
Html代碼：<input type="range" min="0" max="50" step="5" name="rangedemo" value="0" />
運行效果：
此類型標籤的加入，輸入範圍內的數據變得非常簡單容易，而且非常標準，用戶輸入可感知體驗非常好。另外此標籤可以跟表單新增加的Output標籤一塊使用，達到一個聯動的效果。看demo源碼：
|
1
2
3
4
|
<form action="" method="POST" id="form1">
<input type="range" min="0" max="50" step="5" name="rangedemo" value="0" />
<output onforminput="value=rangedemo.value">0</output>
</form>
|
運行效果：
6）新的日期、時間、月份、星期input標籤
相信你如果做過相關的Web項目開發，肯定會遇到相關的js日期控件。而一系列版本問題，使用不方便等問題將一去不復返，因爲…看下面的標籤吧：
Html代碼：<input type="date" name="datedemo" />
運行效果：
還有其他的type：month(月) 、time、week、datetime-local、datetime。那趕緊實驗一下吧。
7）顏色選擇input標籤
顏色選擇器實現起來還是有點困難的，而現在一切都變得那麼簡單。且看代碼：
Html代碼：<input type="color"/>
運行效果：
8）input標籤自動完成功能
如果您有一定的開發經驗的話，肯定做過相關的自動完成或者輸入提示功能。那這將不再那麼複雜，簡單幾個標籤就自動實現此功能，請看如下demo：
|
1
2
3
4
5
6
|
<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" />
<datalist id="autoNames">
<option value="飛龍天驚" ></option>
<option value="厚德IT" ></option>
<option value="Flydragon" ></option>
</datalist>
|
執行結果：
HTML5表單新增屬性
Input標籤新增加的特有屬性
- 1）autofocus屬性
demo：<input type="text" autofocus="autofocus"/> 此屬性可以設置當前頁面中input標籤加載完畢後獲得焦點。
- 2）max,min,step這些上面都介紹過了，都是跟數字相關。
- 3）placeholder:提示信息屬性，上面有demo。
- 4）multiple：用於文件上傳控件，設置此屬性後，允許上傳多個文件。
- 5）校驗屬性：設置了required 屬性後預示着當前文本框在提交前必須有數據輸入，而這一切都是由瀏覽器自動完成。
這跟使用Jq Validate的時候一樣的爽。而且還添加了：pattern正則表達式的校驗。
demo：input type="text" autofocus="autofocus" required pattern="\d+" />
- 6）另外一個比較大的改進就是增加了form屬性，也就是說，任何一個標籤都可以指定它所屬於一個表單，而不是必須在<form></form>進行包裹了。
- 且看demo：<input type="text" form="demoForm" name="demo"/>
Form表單標籤新增加屬性
- 1）novalidate 屬性規定在提交表單時不應該驗證 form 或 input 域。
demo：<form action="" method="POST" novalidate="true"></form>
-
2)autocomplete 屬性規定 form 或 input 域應該擁有自動完成功能。
綜合性實例
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<fieldset>
<legend>只能表單演示：請用最新Opera 瀏覽器</legend>
<form action="" method="POST" id="form1">
<input type="text" autofocus="autofocus" required pattern="\d+" name="auto" placeholder="必填項測試" />
<input type="number" name="demoNumber" min="1" max="100" step="2" />
<input type="email" placeholder="請輸入郵箱" name="mail" />
<input type="url" name="url" placeholder="輸入正確的網址" />
<br />
日期：<input type="datetime" name="time" />
顏色：
<input type="color" name="color" /><br />
<br />
<input type="range" min="0" max="50" step="5" name="rangedemo" value="0" />
<output onforminput="value=rangedemo.value">0</output>
<br />
<input type="submit" value="提交表單" />
</form>
表單外的input標籤：
<input type="text" form="form1" name="demo" />
</fieldset>
|
執行結果：
由於部分屬性不能正常提交到博客園後臺，上一張圖片加源碼：
圖片：
總結
在新版本的表單中的確添加了很多令人興奮的功能。其實進步不是特別大，只不過是把之前的常用的功能，加入到了標準中來定義，然後瀏覽器幫我們實現了很多我們原先需要自己用js實現的一些功能罷了。但是對於開發者來說，這的確是很不錯的一件事情。