HTML5 輸入型別

這種型別的欄位使用email作為type屬性的值來設定

<label for="email">Enter your email address:</label><br />

<input type="email" id="email" name="email" />

當使用這種type時，該值必須是有效的電子郵件地址。任何其他內容都會導致瀏覽器在提交表單時顯示錯誤。您可以在下面的螢幕截圖中看到它的實際效果。

您可以將multiple屬性與email輸入型別結合使用，以允許在同一個輸入中輸入多個以逗號分隔的電子郵件地址

<input type="email" id="email" name="email" multiple />

在某些裝置上 - 尤其是帶有動態鍵盤的觸控裝置，例如智慧手機 - 可能會出現不同的虛擬鍵盤，更適合輸入電子郵件地址，包括@鍵

這是使用這些較新輸入型別的另一個很好的理由，它可以改善這些裝置使用者的體驗。

如您所見，email - 以及其他較新的input型別 - 提供內建的客戶端錯誤驗證，由瀏覽器在資料傳送到伺服器之前執行。它是一個有用的工具，可以指導使用者準確地填寫表單，並且可以節省時間：瞭解您的資料立即不正確很有用，而不是必須等待往返伺服器。

但它不應被視為一項全面的安全措施！您的應用程式應始終在伺服器端以及客戶端對任何表單提交的資料執行安全檢查，因為客戶端驗證很容易關閉，因此惡意使用者仍然可以輕鬆地將錯誤資料傳送到您的伺服器。閱讀網站安全，瞭解可能發生的事情；實施伺服器端驗證超出了本模組的範圍，但您應該牢記這一點。

請注意，a@b根據預設提供的約束是有效的電子郵件地址。這是因為email輸入型別預設允許內網電子郵件地址。要實現不同的驗證行為，可以使用pattern屬性。您還可以自定義錯誤訊息。我們將在後面的客戶端表單驗證文章中介紹如何使用這些功能。

搜尋欄位旨在用於在頁面和應用程式上建立搜尋框。這種型別的欄位是透過使用search作為type屬性的值來設定的

<label for="search">Enter a search term:</label><br />

<input type="search" id="search" name="search" />

text欄位和search欄位的主要區別在於瀏覽器如何對其外觀進行樣式化。在某些瀏覽器中，search欄位以圓角呈現。在某些瀏覽器中，會顯示一個“Ⓧ”清除圖示，單擊該圖示會清除該欄位的任何值。此清除圖示僅在該欄位具有值時才顯示，並且除了 Safari 之外，僅在該欄位獲得焦點時才顯示。此外，在具有動態鍵盤的裝置上，鍵盤的回車鍵可能顯示為“search”或顯示一個放大鏡圖示。

另一個值得注意的功能是，search欄位的值可以自動儲存並在同一網站的多個頁面上重複使用以提供自動完成；這在大多數現代瀏覽器中往往會自動發生。

可以使用tel作為type屬性的值來建立用於填寫電話號碼的特殊欄位

<label for="tel">Enter a telephone number:</label><br />

<input type="tel" id="tel" name="tel" />

透過帶有動態鍵盤的觸控裝置訪問時，大多數裝置在遇到type="tel"時會顯示數字鍵盤，這意味著這種型別在需要數字鍵盤時很有用，而不必僅用於電話號碼。

-

由於世界各地存在各種各樣的電話號碼格式，因此這種型別的欄位不會對使用者輸入的值施加任何限制（這意味著它可能包含字母等）。

如前所述，pattern屬性可用於強制約束，您將在客戶端表單驗證中瞭解這些屬性。

可以使用url作為type屬性的值來建立用於輸入 URL 的特殊型別的欄位

<label for="url">Enter a URL:</label><br />

<input type="url" id="url" name="url" />

它為該欄位添加了特殊的驗證約束。如果未輸入協議（例如http:）或 URL 格式錯誤，瀏覽器將報告錯誤。在具有動態鍵盤的裝置上，預設鍵盤通常會顯示冒號、句點和正斜槓中的部分或全部作為預設鍵。

可以使用<input>type為number的輸入來建立用於輸入數字的控制元件。此控制元件看起來像一個文字欄位，但只允許浮點數，並且通常在控制元件中提供一個旋轉器形式的按鈕來增加和減少值。在具有動態鍵盤的裝置上，通常會顯示數字鍵盤。

<label for="number">Enter a number:</label><br />

<input type="number" id="number" name="number" />

使用number輸入型別，您可以透過設定min和max屬性來約束允許的最小值和最大值。

您還可以使用step屬性來設定按下旋轉器按鈕時引起的遞增和遞減。預設情況下，數字輸入型別僅在數字為整數時才驗證，因為step屬性預設為1。要允許浮點數，請指定step="any"或特定值，例如step="0.01以限制浮點數。如果省略，因為step值的預設值為1，所以只有整數才是有效的。

讓我們看一些例子

此示例建立一個數字控制元件，其有效值限制在1和10之間的奇數值。增加和減少按鈕將值更改為2，從min值開始。

<label for="number">Enter an odd number between 1 and 10:</label><br />

<input type="number" name="age" id="age" min="1" max="10" step="2" />

此示例建立一個數字控制元件，其值限制在0和1（包括）之間的任何值，並且其增加和減少按鈕將其值更改為0.01。

<label for="number">Enter a number between 0 and 1, inclusive:</label><br />

<input type="number" name="change" id="pennies" min="0" max="1" step="0.01" />

當有效值的範圍有限時，number輸入型別是有意義的，例如一個人的年齡或身高。如果範圍太大而遞增不合適（例如美國郵政編碼，範圍從00001到99999），tel型別可能是一個更好的選擇；它提供數字鍵盤，同時放棄數字的旋轉器 UI 功能。

另一種選擇數字的方法是使用滑塊。您經常在購物網站等網站上看到這些網站，您希望設定一個最大房產價格以進行篩選。讓我們看一個實際例子來說明這一點

從使用方面來說，滑塊不如文字欄位精確。因此，它們用於選擇其精確值不一定是重要的數字。

滑塊是使用<input>及其type屬性設定為range值來建立的。滑塊滑塊可以透過滑鼠或觸控移動，也可以透過鍵盤上的箭頭移動。

正確配置滑塊非常重要。為此，強烈建議您設定min、max和step屬性，分別設定最小值、最大值和增量值。

讓我們看一下上面示例背後的程式碼，這樣您就可以瞭解它是如何完成的。首先，基本的 HTML

<label for="price">Choose a maximum house price: </label>
<input
  type="range"
  name="price"
  id="price"
  min="50000"
  max="500000"
  step="1000"
  value="250000" />
<output class="price-output" for="price"></output>

此示例建立一個滑塊，其值範圍為50000到500000，每次增減 1000。我們使用value屬性為其指定了250000的預設值。

滑塊的一個問題是，它們沒有提供任何關於當前值的視覺反饋。這就是我們為什麼包含一個<output>元素來包含當前值的原因。您可以在任何元素中顯示輸入值或計算結果，但<output>是特殊的 - 就像<label> - 並且它可以接受一個for屬性，該屬性允許您將其與輸出值來自的元素或元素關聯起來。

要實際顯示當前值，並在其更改時更新它，您必須使用 JavaScript，這可以通過幾個語句來完成

const price = document.querySelector("#price");
const output = document.querySelector(".price-output");

output.textContent = price.value;

price.addEventListener("input", () => {
  output.textContent = price.value;
});

body {
  text-align: center;
}
label,
output {
  display: block;
}

這裡，我們將對range輸入和output的引用儲存在兩個變數中。然後，我們立即將output的textContent設定為輸入的當前value。最後，設定一個事件監聽器以確保只要移動範圍滑塊，output的textContent就會更新為新值。

通常，為了在收集日期和時間值時獲得良好的使用者體驗，重要的是提供一個日曆選擇 UI。這使使用者能夠選擇日期，而無需切換到本機日曆應用程式或可能以難以解析的不同格式輸入它們。上一千年的最後分鐘可以用以下不同的方式表示：1999/12/31、23:59或12/31/99T11:59PM。

HTML 日期控制元件可用於處理這種特定型別的資料，提供日曆小部件並使資料統一。

日期和時間控制元件是使用<input>元素和type屬性的適當值建立的，具體取決於您是希望收集日期、時間還是兩者。這是一個實際例子

<label for="party">Choose a date and time for your party:</label>
<input type="datetime-local" id="party" name="bday" />
<span class="validity"></span>

input:invalid + span:after {
  content: " ✖";
}

input:valid + span:after {
  content: " ✓";
}

讓我們簡要了解一下不同的可用型別。請注意，這些型別的使用非常複雜，尤其是考慮到瀏覽器支援（見下文）；要了解完整詳細資訊，請按照以下連結訪問每個型別的參考頁面，包括詳細示例。

<input type="datetime-local">建立一個小部件來顯示和選擇日期，其中包含時間，但沒有特定時區資訊。

<label for="month">Enter the date and time:</label><br />

<input type="datetime-local" name="datetime" id="datetime" />

<input type="month">建立一個小部件來顯示和選擇月份和年份。

<label for="month">Enter the month:</label><br />

<input type="month" name="month" id="month" />

<input type="time">建立一個小部件來顯示和選擇時間值。雖然時間可能顯示為 12 小時制，但返回的值為 24 小時制。

<label for="time">Enter a time:</label><br />

<input type="time" name="time" id="time" />

<input type="week">建立一個小部件來顯示和選擇星期號及其年份。

一週從星期一開始，到星期天結束。此外，每年的第一週（第 1 周）包含該年的第一個星期四——這可能不包括該年的第一天，或者可能包括上一年的最後幾天。

<label for="week">Enter the week:</label><br />

<input type="week" name="week" id="week" />

所有日期和時間控制元件都可以使用 min 和 max 屬性進行約束，並可以透過 step 屬性進行進一步約束（其值根據輸入型別而異）。

<label for="myDate">When are you available this summer?</label><br />
<input
  type="date"
  name="myDate"
  min="2025-06-01"
  max="2025-08-31"
  step="7"
  id="myDate" />

顏色總是有點難處理。有很多方法可以表達它們：RGB 值（十進位制或十六進位制）、HSL 值、關鍵字等。

可以使用 <input> 元素及其 type 屬性設定為值 color 來建立 color 控制元件。

<label for="color">Pick a color:</label><br />

<input type="color" name="color" id="color" />

單擊顏色控制元件通常會顯示作業系統的預設顏色選擇功能，供您選擇。返回的值始終是 6 位小寫十六進位制顏色。

您已到達本文的結尾，但您能記住最重要的資訊嗎？在繼續之前，您可以進行一些進一步的測試以驗證您是否保留了這些資訊——請參閱 測試您的技能：HTML5 控制元件。

這讓我們結束了對 HTML5 表單輸入型別的介紹。還有一些其他型別的控制元件由於其非常特殊的行為無法輕鬆分組，但仍然需要了解。我們將在下一篇文章中介紹這些內容。

• 上一步
• 概述：網頁表單構建塊
• 下一步

• 如何構建自定義表單控制元件
• 透過 JavaScript 傳送表單
• 表單小部件的屬性相容性表