HTML 屬性:required

如果存在 布林值 required 屬性,則表示使用者必須在擁有表單提交之前為輸入指定一個值。

required 屬性被 textsearchurltelemailpassworddatemonthweektimedatetime-localnumbercheckboxradiofile<input> 型別以及 <select><textarea> 表單控制元件元素支援。如果在任何這些輸入型別和元素上存在,則 :required 偽類將匹配。如果未包含該屬性,則 :optional 偽類將匹配。

該屬性不受 rangecolor 輸入型別的支援或相關,因為兩者都有預設值。型別 color 預設值為 #000000。型別 range 預設值為 minmax 之間的中間值 - 如果未宣告,minmax 在大多數瀏覽器中分別預設為 0 和 100。required 也不受 hidden 輸入型別的支援 - 使用者不能期望填寫隱藏的表單欄位。最後,required 不受任何按鈕輸入型別的支援,包括 image

在同一命名組的 radio 按鈕的情況下,如果該組中的單個單選按鈕具有 required 屬性,則該組中的單選按鈕必須被選中,儘管它不必是應用了該屬性的按鈕。為了提高程式碼維護性,建議在該組中每個同名單選按鈕中都包含 required 屬性,或者都不包含。

在同一命名組的 checkbox 輸入型別的情況下,只有具有 required 屬性的複選框是必需的。

注意: 設定 aria-required="true" 會告訴螢幕閱讀器某個元素(任何元素)是必需的,但不會影響該元素的選擇性。

屬性互動

因為只讀欄位無法更改,所以 required 對也指定了 readonly 屬性的輸入沒有任何影響。

可用性

在包含 required 屬性時,請在控制元件附近提供一個可見的指示,告知使用者 <input><select><textarea> 是必需的。此外,使用 :required 偽類定位必需的表單控制元件,以一種表明它們是必需的方式對它們進行樣式設定。這提高了視力使用者的可用性。輔助技術應根據 required 屬性告知使用者表單控制元件是強制性的,但新增 aria-required="true" 不會有壞處,以防瀏覽器/螢幕閱讀器組合尚未支援 required

約束驗證

如果元素是必需的並且元素的值為空字串,則該元素存在 valueMissing 問題,並且該元素將匹配 :invalid 偽類。

無障礙問題

為使用者提供一個指示,告知他們表單控制元件是必需的。確保訊息是多方面的,例如透過文字、顏色、標記和屬性,以便所有使用者都理解需求,無論他們是否有色盲、認知差異還是使用螢幕閱讀器。

示例

HTML

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 表格僅在瀏覽器中載入

另請參見