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