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