HTML 元素屬性可以增強 <form>
和表單控制項。
協助使用者填寫表單控制項
為方便使用者填寫表單,請為 <input>
元素使用適當的 type
屬性。
瀏覽器會顯示適用於 type
的使用者介面,例如 date
類型的 <input>
的日期挑選器。行動裝置上的瀏覽器會顯示調整後的螢幕小鍵盤,例如 type="tel"
的電話號碼鍵盤。
有些 <input>
類型也會在提交元素時變更元素的驗證規則。舉例來說,<input type="url">
只有在非空白且值為網址時才會生效。
確保使用者輸入資料
您可以透過不同的屬性,在觸控裝置上提供適當的螢幕小鍵盤。第一個選項是使用 type
屬性,如上所述。
另一個選項是 Android 和 iOS 支援的 inputmode
屬性。與 type
屬性相比,inputmode
屬性只會變更提供的螢幕小鍵盤,而非元素本身的行為。如果您想保留 <input>
的預設使用者介面和預設驗證規則,但仍想對螢幕小鍵盤進行最佳化調整,則建議使用 inputmode
。
您可以使用 enterkeyhint
屬性變更螢幕小鍵盤的 Enter
鍵。
舉例來說,enterkeyhint="next"
或 enterkeyhint="done"
會將按鈕標籤變更為適當的圖示。這有助於使用者更清楚瞭解提交目前表單後會發生什麼情況。
確保使用者可以提交表單
假設您填寫了 <form>
並點選 [Submit] (提交) 按鈕,但系統沒有反應。
問題可能在於該按鈕因 disabled
屬性遭到停用。
在表單有效前停用「提交」按鈕,這是常見的模式。
理論上來說,這聽起來十分合理,但請勿在等待使用者完整輸入內容時停用「Submit」按鈕。請改為醒目顯示輸入的資料無效,並在使用者提交表單時醒目顯示有問題的欄位。
不過,建議您在成功提交表單但尚未處理後停用「Submit」按鈕。進一步瞭解已停用的按鈕。
顯示使用者先前輸入的資料,協助他們解決問題
假設貴商家的結帳表單包含多個步驟,要如何確保當使用者返回上一步時,系統依然會顯示先前輸入的值?
使用 value
屬性來顯示已完成的值。
<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">
有多種方法可在 JavaScript 中擷取表單控制項的值。您可以使用 value
屬性,或透過 getAttribute('value')
存取該值。其中有一個重大差異,value
屬性一律會傳回目前值,而使用 getAttribute()
則一律傳回初始值。
馬上試試!
變更名稱欄位的文字並觀看控制台。請注意,value
屬性會傳回目前顯示的文字,而 getAttribute('value')
則一律會傳回初始值。
進一步瞭解 DOM 屬性與 DOM 屬性之間的差異。
針對 checkbox
或 radio
類型的 <input>
元素,請使用 checked
屬性。
如果使用者選取某個選項,請新增該選項,否則請移除該選項。
確保使用者瞭解預期的格式
placeholder
屬性的值是預期應取得的資訊種類。
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">
這可能會讓使用者感到困惑,因為似乎已預先填入表單控制項。此外,加入預留位置可能會使您更難確認哪些表單欄位仍需填寫。 此外,預留位置文字的預設樣式可能難以閱讀。
一般來說,使用 placeholder
屬性時請格外小心,切勿使用 placeholder
屬性來說明表單控制項。請改用 <label>
元素。
進一步瞭解您應考慮避免使用 placeholder
屬性的原因。
為了讓使用者知道應該提供什麼資訊,更好的方法是使用表單控制項下方的額外 HTML 元素,加入說明或範例。
確保表單控制項已可進行驗證
有多種 HTML 屬性可啟用內建驗證功能。使用 required
屬性可避免提交空白欄位。可以使用 type
屬性強制執行其他驗證。舉例來說,type="url"
的必要 <input>
值必須是網址。
為確保使用者輸入的字元數下限,請使用 minlength
屬性。如要禁止超過字元數上限的值,請使用 maxlength
屬性。如果是 <input type="number">
等數字輸入類型,請改用 min
和 max
屬性。
進一步瞭解驗證程序:協助使用者在表單中輸入正確的資料。
隨堂測驗
測驗您對表單屬性的瞭解程度
你可以使用哪項屬性變更螢幕小鍵盤上 Enter
鍵的標籤?
enterkey
enterkeyhint
enterkeytext
enterkeylabel
value
屬性和 getAttribute('value')
有何不同?
value
屬性會傳回目前的值,getAttribute('value')
會傳回初始值。value
屬性會傳回初始值,getAttribute('value')
會傳回目前值。value
屬性會傳回鍵和值,getAttribute('value')
只會傳回值。