HTML 屬性:required
如果存在 布林值 required 屬性,則表示使用者必須在擁有表單提交之前為輸入指定一個值。
required 屬性被 text、search、url、tel、email、password、date、month、week、time、datetime-local、number、checkbox、radio、file、 型別以及 <input> 和 <select> 表單控制元件元素支援。如果在任何這些輸入型別和元素上存在,則 <textarea> 偽類將匹配。如果未包含該屬性,則 :required 偽類將匹配。:optional
該屬性不受 range 和 color 輸入型別的支援或相關,因為兩者都有預設值。型別 color 預設值為 #000000。型別 range 預設值為 min 和 max 之間的中間值 - 如果未宣告,min 和 max 在大多數瀏覽器中分別預設為 0 和 100。required 也不受 hidden 輸入型別的支援 - 使用者不能期望填寫隱藏的表單欄位。最後,required 不受任何按鈕輸入型別的支援,包括 image。
在同一命名組的 radio 按鈕的情況下,如果該組中的單個單選按鈕具有 required 屬性,則該組中的單選按鈕必須被選中,儘管它不必是應用了該屬性的按鈕。為了提高程式碼維護性,建議在該組中每個同名單選按鈕中都包含 required 屬性,或者都不包含。
在同一命名組的 checkbox 輸入型別的情況下,只有具有 required 屬性的複選框是必需的。
注意: 設定 會告訴螢幕閱讀器某個元素(任何元素)是必需的,但不會影響該元素的選擇性。aria-required="true"
屬性互動
因為只讀欄位無法更改,所以 required 對也指定了 屬性的輸入沒有任何影響。readonly
可用性
在包含 required 屬性時,請在控制元件附近提供一個可見的指示,告知使用者 、<input> 或 <select> 是必需的。此外,使用 <textarea> 偽類定位必需的表單控制元件,以一種表明它們是必需的方式對它們進行樣式設定。這提高了視力使用者的可用性。輔助技術應根據 required 屬性告知使用者表單控制元件是強制性的,但新增 :requiredaria-required="true" 不會有壞處,以防瀏覽器/螢幕閱讀器組合尚未支援 required。
約束驗證
如果元素是必需的並且元素的值為空字串,則該元素存在 問題,並且該元素將匹配 valueMissing 偽類。:invalid
無障礙問題
為使用者提供一個指示,告知他們表單控制元件是必需的。確保訊息是多方面的,例如透過文字、顏色、標記和屬性,以便所有使用者都理解需求,無論他們是否有色盲、認知差異還是使用螢幕閱讀器。
示例
HTML
<form>
<div class="group">
<input type="text" />
<label>Normal</label>
</div>
<div class="group">
<input type="text" required />
<label>Required</label>
</div>
<input type="submit" />
</form>
結果
規範
| 規範 |
|---|
| HTML 標準 # attr-input-required |
| HTML 標準 # attr-select-required |
| HTML 標準 # attr-textarea-required |
瀏覽器相容性
html.elements.input.required
BCD 表格僅在瀏覽器中載入
html.elements.select.required
BCD 表格僅在瀏覽器中載入
html.elements.textarea.required
BCD 表格僅在瀏覽器中載入