HTML5 新輸入型別
HTML5 為表單引入了幾種新的輸入型別。
HTML5 中的新輸入型別
HTML5 引入了幾種新型別，如電子郵件，日期，時間，顏色，範圍等，以改善使用者體驗並使表單更具互動性。但是，如果瀏覽器無法識別這些新輸入型別，它會將它們視為普通文字框。 <input>
在本節中，我們將簡要介紹以下每種新輸入型別：
輸入型別顏 - color
color 輸入型別允許使用者選擇從下拉顏色選擇器的彩色，並返回該顏色的十六進位制值。這是一個例子：
<form>
<label>
Select Color: <input type="color" name="mycolor">
</label>
</form>
警告： Internet Explorer 和 Apple Safari 不支援 type="color" 輸入。目前支援的有 Firefox，Chrome 和 Opera 瀏覽器。
輸入型別 - date
date 輸入型別允許使用者選擇從下拉日曆的日期。
<form>
<label>
Select Date: <input type="date" name="mydate">
</label>
</form>
**警告：**Internet Explorer 和 Firefox 不支援 type="date" 輸入。目前支援的有 Chrome，Safari 和 Opera 瀏覽器。
輸入型別 - datetime
datetime 輸入型別允許使用者與時區沿選擇日期和時間。
<form>
<label>
Date & Time: <input type="datetime" name="mydatetime">
</label>
</form>
**警告：**Internet Explorer，Firefox，Chrome 和 Opera 瀏覽器不支援 type="datetime" 輸入。目前僅由 Apple Safari 支援。
輸入型別 - datetime-local
datetime-local 輸入型別，使用者可以選擇本地的日期和時間。本地日期和時間不提供時區資訊。
<form>
<label>
Local Date & Time: <input type="datetime-local" name="mylocaldatetime">
</label>
</form>
**警告：**Internet Explorer 和 Firefox 不支援 type="datetime-local" 輸入。目前支援的有 Chrome，Safari 和 Opera 瀏覽器。
輸入型別 - email
email 輸入型別允許使用者輸入電子郵件地址。它與標準文字輸入型別非常相似，但如果它與 required 屬性結合使用，瀏覽器可能會查詢模式以確保輸入有效的電子郵件地址。
<form>
<label>
Email Address: <input type="email" name="myemail" required>
</label>
</form>
所有主流瀏覽器（如 Mozilla Firefox，Google Chrome，Apple Safari，Internet Explorer 10+和 Opera）都支援對 type="email" 輸入進行驗證。
注意： 你可以在不同的驗證狀態下采用不同樣式的電子郵件欄位，當使用輸入的值使用 :valid ， :invalid 或者 :required 偽類。
輸入型別 - month
month 輸入型別允許使用者從下拉日曆中選擇一個月份和年份。
<form>
<label>
Select Month: <input type="month" name="mymonth">
</label>
</form>
**警告：**Internet Explorer 和 Firefox 不支援 type="month" 輸入。目前支援的有 Chrome，Safari 和 Opera 瀏覽器。
輸入型別 - number
number 輸入型別可以用於輸入數值。你還可以使用其他屬性如 min ， max 和 step 來限制使用者來只輸入可接受值。
<form>
<label>
Select Number: <input type="number" value="1" min="1" max="10" step="0.5" name="mynumber">
</label>
</form>
所有主流瀏覽器都支援 type="number" 輸入，如 Mozilla Firefox，Google Chrome，Apple Safari，Internet Explorer 10+和 Opera。然而，Internet Explorer 只識別該數字但不提供遞增和遞減按鈕。
輸入型別 - range
range 輸入型別可以被用於在指定範圍內輸入數值。它與 number 輸入非常相似，但它為輸入數字提供了更簡單的控制。
<form>
<label>
Select Number: <input type="range" value="1" min="1" max="10" step="0.5" name="mynumber">
</label>
</form>
所有主流瀏覽器都支援 type="range" 輸入，如 Mozilla Firefox，Google Chrome，Apple Safari，Internet Explorer 10+和 Opera。
輸入型別 - search
search 輸入型別可以用於建立搜尋欄位。
搜尋欄位的行為通常類似於常規文字欄位，但在某些瀏覽器（如 Google Chrome 和 Apple Safari）中，只要你開始在搜尋框中輸入，欄位右側會出現一個小叉號，可讓你快速清除搜尋欄位。
<form>
<label>
Search Website: <input type="search" name="mysearch">
</label>
</form>
**警告：**Firefox，IE 9 及更早版本不支援 type="search" 輸入。目前支援的有 Chrome，Safari，IE 10+和 Opera 瀏覽器。
輸入型別 - tel
tel 輸入型別可以用於輸入電話號碼。
<form>
<label>
Telephone Number: <input type="tel" name="mytelephone" required>
</label>
</form>
**警告：**任何瀏覽器當前都不支援 type="tel" 輸入驗證，但它仍然有用。iPhone 和一些 Android 裝置使用輸入 type="tel" 來通過數字鍵盤更改虛擬鍵盤。
輸入型別 - time
time 輸入型別可以被用於輸入一個時間。
<form>
<label>
Select Time: <input type="time" name="mytime">
</label>
</form>
**警告：**Internet Explorer 和 Firefox 不支援 type="time" 輸入。目前支援的有 Chrome，Safari 和 Opera 瀏覽器。
輸入型別 - url
url 輸入型別可用於輸入網址 - URL。你可以使用 multiple 屬性輸入多個 URL。例如 type="email" ，瀏覽器可以對 URL 欄位執行簡單驗證，並在表單提交時顯示錯誤訊息。
<form>
<label>
Website URL: <input type="url" name="mywebsite" required>
</label>
</form>
**注意：**所有主流瀏覽器（如 Firefox，Chrome，Safari，Opera，Internet Explorer 10+）都支援對 type="url" 進行驗證。
輸入型別 - week
week 輸入型別允許使用者從下拉日曆中選擇一個星期的一年。
<form>
<label>
Select Week: <input type="week" name="myweek">
</label>
</form>
**警告：**Internet Explorer 和 Firefox 不支援 type="week" 輸入。目前支援的有 Chrome，Safari 和 Opera 瀏覽器。