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 輸入型別可以用於輸入數值。你還可以使用其他屬性如 minmaxstep 來限制使用者來只輸入可接受值。

<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 瀏覽器。