深入瞭解表單欄位

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

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

協助使用者撰寫文字

如要為使用者提供可插入文字的表單欄位，請使用 <input> 元素。最適合用於單字和簡短文字。 如果是較長的文字，請使用 <textarea> 元素。這可讓元素有多行文字，也能讓使用者輕鬆查看輸入的文字，因為元素不僅可捲動，還能調整大小。

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

想協助使用者填寫電話號碼嗎？ 將 <input> 的 type 屬性變更為 type="tel"。行動裝置使用者會取得經過調整的螢幕小鍵盤，確保他們能更輕鬆快速地輸入電話號碼。

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

進一步瞭解不同的輸入類型。而且還提供內建的驗證功能。

協助使用者填入日期

您下次打算何時開始行程？ 如要協助使用者填入日期，請使用 type="date"。部分瀏覽器會以預留位置的格式顯示 (例如 yyyy-mm-dd)，示範如何輸入日期。

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

協助使用者選取選項

為確保使用者能夠選取或取消選取其中一個可用選項，請使用 type="checkbox"。想要提供多種選項嗎？ 根據您的用途，有多種替代方案。 首先，如果使用者只能選擇單一選項，下文將介紹可能的解決方案。

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

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

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

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

您也可以使用 <input> 與 <datalist> 元素搭配使用。如此一來，您就能結合文字欄位和 <option> 元素清單。

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

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

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

要在表單資料中加入專屬安全性權杖嗎？將 <input> 與 type="hidden" 搭配使用。使用者無法查看或修改 hidden 類型的 <input> 值。

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

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

協助使用者填寫表單

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

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

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

隨堂測驗

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

資源

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