我可以使用哪些表單欄位？
為了提供最佳使用者體驗
請務必使用對使用者輸入的資料最適用的元素和元素 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 type="files">。<input type="file" multiple>。<input type="multiple-files">。type="text" 和 type="password" 有何不同？
type="password" 顯示了可供輸入密碼的調整式螢幕小鍵盤。type="password"，每個輸入的字元都會以星號 (*) 或點 (•) 遮蔽。type="password" 可供輸入密碼的自訂介面。