HTML5教程（六）- HTML5 Input類型

linux_wuliqiang

HTML5 新的Input 類型
HTML5 擁有多個新的表單輸入類型。這些新特性提供了更好的輸入控制和驗證。
本章全面介紹這些新的輸入類型：
email
url
number
range
Date pickers (date, month, week, time, datetime, datetime-local)
search
color瀏覽器支持
Input type IE Firefox Opera Chrome Safari
email No No 9.0 No No
url No No 9.0 No No
number No No 9.0 No No
range No No 9.0 4.0 4.0
Date pickers No No 9.0 No No
search No No No No No
color No No No No No
注釋：Opera 對新的輸入類型的支持最好。不過您已經(jīng)可以在所有主流的瀏覽器中使用它們
了。即使不被支持，仍然可以顯示為常規(guī)的文本域。

Input 類型- email
email 類型用于應該包含e-mail 地址的輸入域。
在提交表單時，會自動驗證email 域的值。
實例
E-mail: <input type=”email” name=”user_email” />
提示：iPhone 中的Safari 瀏覽器支持email 輸入類型，并通過改變觸摸屏鍵盤來配合它（添
加@ 和.com 選項）。
Input 類型- url
url 類型用于應該包含URL 地址的輸入域。
在提交表單時，會自動驗證url 域的值。
實例
Homepage: <input type=”url” name=”user_url” />
提示：iPhone 中的Safari 瀏覽器支持url 輸入類型，并通過改變觸摸屏鍵盤來配合它（添
加.com 選項）。

Input 類型- number
number 類型用于應該包含數(shù)值的輸入域。
您還能夠設定對所接受的數(shù)字的限定：
實例
Points: <input type=”number” name=”points” min=”1″ max=”10″ />
請使用下面的屬性來規(guī)定對數(shù)字類型的限定：
屬性值描述
max number 規(guī)定允許的最大值
min number 規(guī)定允許的最小值
step number 規(guī)定合法的數(shù)字間隔（如果step=”3″，則合法的數(shù)是-3,0,3,6 等）
value number 規(guī)定默認值
提示：iPhone 中的Safari 瀏覽器支持number 輸入類型，并通過改變觸摸屏鍵盤來配合它
（顯示數(shù)字）。

Input 類型- range
range 類型用于應該包含一定范圍內數(shù)字值的輸入域。
range 類型顯示為滑動條。
您還能夠設定對所接受的數(shù)字的限定：
實例
<input type=”range” name=”points” min=”1″ max=”10″ />
請使用下面的屬性來規(guī)定對數(shù)字類型的限定：
屬性值描述
max number 規(guī)定允許的最大值
min number 規(guī)定允許的最小值
step number 規(guī)定合法的數(shù)字間隔（如果step=”3″，則合法的數(shù)是-3,0,3,6 等）
value number 規(guī)定默認值

Input 類型- Date Pickers（數(shù)據(jù)檢出器）
HTML5 擁有多個可供選取日期和時間的新輸入類型：
date – 選取日、月、年
month – 選取月、年
week – 選取周和年
time – 選取時間（小時和分鐘）
datetime – 選取時間、日、月、年（UTC 時間）
datetime-local – 選取時間、日、月、年（本地時間）
下面的例子允許您從日歷中選取一個日期：
實例
Date: <input type=”date” name=”user_date” />
輸入類型”month”:
輸入類型”week”:
輸入類型”time”:
輸入類型”datetime”:
輸入類型”datetime-local”:

Input 類型- search
search 類型用于搜索域，比如站點搜索或Google 搜索。
search 域顯示為常規(guī)的文本域。