深入瞭解表單欄位

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

協助使用者填寫文字

使用 <input> 元素提供表單欄位。<input> 最適合單字、詞組和簡短條目。如要使用較長的文字，請使用 <textarea> 元素。這樣就能輸入多行文字，而且元素可捲動及調整大小，方便使用者查看輸入的文字。

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

您是否要協助使用者填寫電話號碼？ 將 <input> 的 type 屬性變更為 type="tel"。 行動裝置使用者會看到經過調整的螢幕小鍵盤，方便他們快速輸入電話號碼。

電子郵件地址請使用 type="email"。 再次顯示調整後的螢幕小鍵盤。 使用 required 屬性將表單欄位設為必填。 提交表單時，瀏覽器會檢查輸入內容是否有值，以及是否有效 (在本例中，是否為格式正確的電子郵件地址)。

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

協助使用者填寫日期

你希望何時開始下趟行程？如要協助使用者填寫日期，請使用 type="date"。部分瀏覽器會以 yyyy-mm-dd 等預留位置顯示格式，說明如何輸入日期。

所有新式瀏覽器都提供自訂介面，可透過日期挑選器選取日期。

協助使用者選取選項

如要確保使用者可以選取或取消選取其中一個選項，請使用 type="checkbox"。 要提供多個選項嗎？視您的應用案例而定，有許多替代方案可供選擇。 首先，如果使用者只能選擇單一選項，請查看可能的解決方案。

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

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

在某些用途中，例如選擇數字範圍，<input> 類型 range 可能是不錯的選擇。

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

您也可以搭配 <datalist> 元素使用 <input>。這樣一來，您就能同時看到文字欄位和 <option> 元素清單。

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

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

<input> 類型為 color，可在支援的瀏覽器中為使用者提供顏色挑選器，此外還有各種其他類型。如要確保使用者可以輸入密碼，請搭配使用 <input> 和 type="password"。輸入的每個字元都會以星號「*」或圓點「•」遮蓋，確保密碼不會外洩。

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

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

如果沒有適合的內建元素或型別，您也可以定義自訂元素。

協助使用者填寫表單

表單元素和類型有很多種，但該選擇哪一種呢？

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

一般來說，請務必與實際使用者一起測試表單，找出最合適的表單元素和類型。

隨堂測驗

測試你對表單欄位的瞭解

資源

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