深入瞭解表單欄位

為了提供最佳使用者體驗 請務必使用對使用者輸入的資料最適用的元素和元素 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" 可供輸入密碼的自訂介面。

資源