深入瞭解表單屬性

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 屬性。

進一步瞭解驗證程序：協助使用者在表單中輸入正確的資料。

隨堂測驗

測驗您對表單屬性的瞭解程度

資源

• <input> HTML 屬性
• 全域 HTML 屬性