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 属性告知用户表单控件是强制性的,但添加 :required
aria-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 表格仅在浏览器中加载