DIV CSS 佈局教程網

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 4.0 9.0 10.0 No url No 4.0 9.0 10.0 No number No No 9.0 7.0 No range No No 9.0 4.0 4.0 Date pickers No No 9.0 10.0 No search No 4.0 11.0 10.0 No color No No 11.0 No No

注釋：Opera 對新的輸入類型的支持最好。不過您已經可以在所有主流的浏覽器中使用它們了。即使不被支持，仍然可以顯示為常規的文本域。

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 類型用於應該包含數值的輸入域。

您還能夠設定對所接受的數字的限定：

實例

Points: <input type="number" name="points" min="1" max="10" />

 

請使用下面的屬性來規定對數字類型的限定：

屬性 值 描述 max number 規定允許的最大值 min number 規定允許的最小值 step number 規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等） value number 規定默認值

 

提示：iPhone 中的 Safari 浏覽器支持 number 輸入類型，並通過改變觸摸屏鍵盤來配合它（顯示數字）。

Input 類型 - range

range 類型用於應該包含一定范圍內數字值的輸入域。

range 類型顯示為滑動條。

您還能夠設定對所接受的數字的限定：

實例

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

 

請使用下面的屬性來規定對數字類型的限定：

屬性 值 描述 max number 規定允許的最大值 min number 規定允許的最小值 step number 規定合法的數字間隔（如果 step="3"，則合法的數是 -3,0,3,6 等） value number 規定默認值

Input 類型 - Date Pickers（日期選擇器）

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 域顯示為常規的文本域。