深入瞭解表單屬性

HTML 元素屬性可強化 <form> 和表單控制項。

協助使用者填寫表單控制項

為方便使用者填寫表單 請為 <input> 元素使用適當的 type 屬性。

瀏覽器會顯示適合 type 的使用者介面， 例如用於 date 類型的 <input> 日期挑選器。 行動裝置上的瀏覽器會顯示經過調整的螢幕小鍵盤 例如 type="tel" 的電話號碼撥號鍵盤。

有些 <input> 類型也會在提交表單時變更元素的驗證規則。 舉例來說，<input type="url"> 只有在不得留空且值為網址的情況下，才算有效。

確保使用者輸入資料

在觸控裝置上提供合適的螢幕小鍵盤時，可以採用不同的屬性。 第一個選項是使用 type 屬性，如上所述。

另一個選項是inputmode Android 和 iOS。 相較於 type 屬性，inputmode 屬性只會變更螢幕小鍵盤 而非元素本身的行為如要達成下列目標，就適合使用 inputmode 保留預設使用者介面和 <input> 的預設驗證規則，但仍想 最佳化的螢幕小鍵盤

您可以使用 enterkeyhint 屬性變更螢幕小鍵盤的 Enter 鍵。 舉例來說，enterkeyhint="next" 或 enterkeyhint="done" 會將按鈕標籤變更為適當的圖示。 讓使用者更清楚提交目前的表單後會發生什麼情況。

確保使用者可以提交表單

假設您填寫了 <form>，然後點按「Submit」按鈕，但沒有任何反應。 問題可能是因為按鈕停用了 disabled 屬性。 在表單有效前停用「提交」按鈕是常見的模式。

理論上來說這是合理可行的，但不應在等待過程中停用「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 屬性