HTML5 新的 Input 類型

HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。

介紹這些新的輸入類型：

email

url

number

range

Date pickers (date, month, week, time, datetime, datetime-local)

search

color

telephone

EMAIL

<input type="email" name="email"/>

在送出表單時會自動驗證email的格式,必須有name屬性，否則不能驗證

效果：

URL

<input type="url" />

在送出表單時會自動驗證url的格式

 效果：

 NUMBER

<input type="number" max="9" min="0" step="2"/>

可以限制輸入的數字，step為上一個數字與下一個數字的間隔

RANGE

<input type="range"  min="1" max="10" />

滑動條，能過選擇性的對限制範圍内的數值進行設定

HTML5 擁有多個可供選取日期和時間的新輸入類型：

date - 選取日、月、年

month - 選取月、年

week - 選取周和年

time - 選取時間（小時和分鐘）

datetime - 選取時間、日、月、年（UTC 時間）

datetime-local - 選取時間、日、月、年（本地時間）

 位址：http://diveintohtml5.org/forms.html

 以上都是從關于時間的都是網上找到，自己做的是這樣的

其中圖檔中顯示的UTC為世界統一時間

 SEARCH

<input id="search" type="url" list="searchlist" required />

<datalist id="searchlist">

                <option value="http://www.google.com" label="Google" />

                <option value="http://www.yahoo.com" label="Yahoo" />

                <option value="http://www.bing.com" label="Bing" />

</datalist>

這裡的datalist相當于下拉清單，可以進行選擇

 TELEPHONE

<input type="telephone" />

可輸入一個電話号碼

 COLOR

<input type="color"/>

可以擷取顔色

以上個人圖檔效果顯示均來自opera浏覽器

 下面圖檔時各主流浏覽器對input的支援情況：

Input type

IE

Firefox

Opera

Chrome

Safari

No

9.0

4.0

Date pickers

 input标簽表單類型的顯示情況：

本文轉自shenzhoulong  51CTO部落格，原文連結：http://blog.51cto.com/shenzhoulong/492232，如需轉載請自行聯系原作者