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 表格仅在浏览器中加载

另请参见