我可以使用哪些表單欄位？
為提供最佳使用者體驗，請務必使用最適合使用者輸入資料的元素和元素 type。
協助使用者填入文字
如要為使用者提供可插入文字的表單欄位，請使用 <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> 元素。
您也可以將 <input> 與 <datalist> 元素搭配使用。這樣一來，您就能同時取得文字欄位和 <option> 元素清單。
確保使用者可以填入不同類型的資料
針對特定用途，還有更多輸入類型。
color 類型的 <input> 可在支援的瀏覽器中為使用者提供顏色挑選器，此外還有其他類型。為確保使用者可以輸入密碼，請搭配使用 <input> 和 type="password"。系統會在輸入的每個字元上方加上星號 ("*") 或圓點 ("•")，確保密碼無法被讀取。
您是否要在表單資料中加入專屬安全性權杖？請透過 type="hidden" 使用 <input>。使用者無法查看或修改 hidden 類型的 <input> 值。
如要讓使用者上傳及提交檔案，請將 <input> 與 type="file" 搭配使用。
如果您有特殊用途，且沒有適合的內建元素或類型，也可以定義自訂元素。
協助使用者填寫表單
表單元素和類型有很多種，但您應該選擇哪一種？
在某些用途上，您可以直接選擇適當的元素和類型，例如 <input type="date">。其他人則視情況而定。舉例來說，您可以將多個 <input> 元素與 type="checkbox" 或 <select> 元素搭配使用。進一步瞭解如何選擇清單方塊和下拉式清單。
一般來說，請務必找真實使用者測試表單，找出最合適的表單元素和類型。
進行隨堂測驗
測驗您對表單欄位的瞭解
是否可以使用表單控制項上傳多個檔案？
<input type="files">。<input type="file" multiple>。<input type="multiple-files">。type="text" 和 type="password" 有何不同？
type="password" 顯示適當的螢幕小鍵盤，方便使用者輸入密碼。type="password" 時，每個輸入的字元都會被星號 (*) 或點 (•) 遮蓋。type="password" 會顯示用於輸入密碼的自訂介面。