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