深入瞭解表單欄位

我可以使用哪些表單欄位？

為了提供最佳使用者體驗 請務必使用對使用者輸入的資料最適用的元素和元素 type。

協助使用者填寫文字

如要為使用者提供可插入文字的表單欄位，請使用 <input> 元素。 這是單一字詞和簡短文字的最佳選擇。 如需更長的文字，請使用 <textarea> 元素。 這樣可以撰寫多行文字 這種元素可以捲動及調整大小，因此使用者能夠更輕鬆地查看所輸入的文字。

確認使用者以正確的格式輸入資料

您要協助使用者填寫電話號碼嗎？ 將 <input> 的 type 屬性變更為 type="tel"。 行動裝置的螢幕小鍵盤會配合調整 讓他們更輕鬆快速地輸入電話號碼。

如果是電子郵件地址，請使用 type="email"。 系統隨即會顯示經過調整的螢幕小鍵盤。 請使用 required 屬性將表單欄位設為必填。 提交表單後，瀏覽器會檢查輸入內容是否具備有效值：在這種情況下， 這是一個格式正確的電子郵件地址

進一步瞭解不同的輸入類型。 這些網路也提供內建的驗證功能。

協助使用者填寫日期

您預計何時開始下一個行程？ 如要協助使用者填入日期，請使用 type="date"。 部分瀏覽器會將該格式顯示為預留位置，例如 yyyy-mm-dd。 說明如何輸入日期

所有新式瀏覽器都能提供自訂介面，讓您以日期挑選器的形式選取日期。

協助使用者選取所需選項

為確保使用者能選取或取消選取一個可能選項，請使用 type="checkbox"。 要提供多個選項嗎？ 視您的用途而定，有多種替代選項。 首先，我們來看看使用者是否只能選擇單一選項。

您可以使用多個 <input> 元素搭配 type="radio" 和相同的 name 值。使用者會一次查看所有選項，但只能選擇一個選項。

另一種做法是使用 <select> 元素。 使用者可以捲動瀏覽可用選項清單，然後選擇其中一個選項。

以某些用途來說，像是選擇範圍 range 類型的 <input> 或許是不錯的選擇。

你是否必須提供選取多個選項的功能？ 使用含有 multiple 屬性的 <select> 元素，或多個 checkbox 類型的 <input> 元素。

您也可以將 <input> 與 <datalist> 元素搭配使用。 這可結合文字欄位和 <option> 元素清單。

確保使用者可以填入不同類型的資料

特定用途還有更多輸入類型。

color 是一種 <input>，可在支援的瀏覽器中為使用者提供顏色挑選器。 還有其他各種類型如要確保使用者能夠輸入密碼，請使用 <input> type="password"。您輸入的每個字元都必須以星號 (「*」) 或半形句號 (「•」) 遮蔽。 ，確保他人無法讀取密碼

您是否要在表單資料中加入專屬的安全性權杖？ 透過 type="hidden" 使用 <input>。 使用者無法查看或修改 hidden 類型的 <input> 值。

如要允許使用者上傳及提交檔案，請搭配使用 <input> 和 type="file"。

如果您有特殊用途，也可以定義自訂元素。 沒有合適的內建元素或類型

協助使用者填寫表單

表單元素和類型有很多種，但你應選用哪一種？

在某些情況下，選擇適當的元素和類型 例如 <input type="date">。有些人則視情況而定。 舉例來說，您可以搭配 type="checkbox" 或 <select> 元素使用多個 <input> 元素。 進一步瞭解如何選擇清單方塊和下拉式清單。

一般而言，請務必確保 邀請使用者測試表單，找出最合適的表單元素和類型。

隨堂測驗

測試您對表單欄位的瞭解程度

資源

• <input> 元素
• <textarea> 元素
• <select> 元素
• <input> 類型
• 自訂表單元素