Design Code 設計密碼

HTML5 新的Input 類型

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

• email
• url
• number
• range
• Date pickers (date, month, week, time, datetime, datetime-local)
• search
• color

瀏覽器支持

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

Input 類型- email

email 類型用於應該包含e-mail 地址的輸入域。

在提交表單時，會自動驗證email 域的值。

實例

E-mail: <input <code>type="email"</code> name="user_email" />
	

提示： iPhone中的Safari瀏覽器支持email輸入類型，並通過改變觸摸屏鍵盤來配合它（添加@和.com選項）。

Input 類型- url

url 類型用於應該包含URL 地址的輸入域。

在提交表單時，會自動驗證url 域的值。

實例

Homepage: <input <code>type="url"</code> name="user_url" />
	

提示： iPhone中的Safari瀏覽器支持url輸入類型，並通過改變觸摸屏鍵盤來配合它（添加.com選項）。

Input 類型- number

number 類型用於應該包含數值的輸入域。

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

實例

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

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

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

Input 類型- range

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

range 類型顯示為滑動條。

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

實例

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

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

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

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

• date - 選取日、月、年
• month - 選取月、年
• week - 選取周和年
• time - 選取時間（小時和分鐘）
• datetime - 選取時間、日、月、年（UTC 時間）
• datetime-local - 選取時間、日、月、年（本地時間）

Input 類型- search

search 類型用於搜索域，比如站點搜索或Google 搜索。

search 域顯示為常規的文本域。