Html5 學習系列（三）增強型表單標籤

在之前的html表單標籤中，對於一些功能支援的不夠好，比如：文字框提示資訊（之前只能通過js和input的事件結合處理）、表單校驗、日期選擇控制項、顏色選擇控制項、範圍控制項、進度條、標籤跨表單等功能。當然這些東西我們都可以直接通過js和dom元素配合實現這些通用的功能。這些功能或者是標籤都已經大量的使用在了現代的web應用中，而這些公共性的東西在早期的html標準沒有直接的標準支援，而在html5中，新標準直接把這些常用的基本的功能直接加入的新的表單標籤中，真正把表單功能異常的強大，那就跟我走一下html5智慧型表單之旅吧!

由於最新版本的opera瀏覽器對新型表單支援的最為完美,所以建議本blog或者以下示例請在opera瀏覽器上開啟.

新的標準中新增了很多輸入型控制項，比如：number、url、email、range、color等。而他們都是以 input標籤的type屬性出場，那下面我一一簡單介紹一下。[以下所有的例子請用opera瀏覽器瀏覽]

1）只能輸入數字的number型別input標籤

html**為:

執行效果:

注:此標籤其實就是普通的input標籤,只不過是type型別指向了number,標識當前標籤接受數字型別輸入.另外新增了四個屬性.

name:屬性大家很熟悉了用來標識表單提交時的key值

min:是表單標籤新增加的屬性標識當前輸入框輸入的最小值

max:那就是最大值了

step：是步長的意思，也就是在點選增大或者減小的時候的增加減少的步長

小結：min，max，step是表單標籤中新增的新的屬性。另外就是type又增加了乙個新的number型別，接受數字輸入。而之前我們要做到這樣的效果只能通過js在失去焦點時候判斷，控制起來不那麼方便，現在一切都那麼簡單簡潔。 

2）新型email型別input標籤

html**：

執行效果：

注：在上面html**中，相對於之前的標籤，不同點：type="email"表示當前input標籤接受乙個郵箱的輸入。另外就是：placeholder="請輸入註冊郵箱"   這個屬性的功能，相信你看到此時的效果的時候你會感到非常想興奮，而在之前實現此提示資訊，需要監聽一下文字框的blur事件，然後判斷是否為空，為空再去給文字框賦值乙個灰色的字型提示資訊，而現在只需要乙個簡單屬性指定就可以了，瀏覽器都幫我們實現了。

小結：當表單在提交前，此文字框會自動校驗是否符合郵箱的正規表示式，另外placeholder屬性帶來的提示資訊功能太強大了。

3）新型url型別input標籤

這裡不再贅述了，跟email型別input標籤類似。只看一效果吧：

執行效果：

4）新型tel型別input標籤

html**：

執行效果：

5）新型range型別input標籤

html**：

執行效果：

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

執行效果：

還有其他的type：month(月)  、time、week、datetime-local、datetime。那趕緊實驗一下吧。

7）顏色選擇input標籤

顏色選擇器實現起來還是有點困難的，而現在一切都變得那麼簡單。且看**：

html**：

執行效果：

8）input標籤自動完成功能

input標籤新增加的特有屬性

demo：此屬性可以設定當前頁面中input標籤載入完畢後獲得焦點。

這跟使用jq validate的時候一樣的爽。而且還新增了：pattern正規表示式的校驗。

demo：input type="text" autofocus="autofocus" required pattern="\d+" />

form表單標籤新增加屬性

demo：<formaction=""method="post"novalidate="true">

只能表單演示：請用最新opera 瀏覽器表單外的input標籤：