是HTML5中唯一语义化分组表单控件的原生标签,必须包含作为首个子元素,支持禁用传播、无障碍访问及表单提交控制,不可嵌套,禁用时子控件不参与提交。

用 包裹控件实现逻辑分组
是 HTML5 中唯一语义化分组表单控件的原生标签,它不只是视觉容器,还影响表单可访问性与提交行为。浏览器默认会加边框、缩进,并把其中的 作为该组标题渲染在左上角。
- 必须包含至少一个
,否则屏幕阅读器可能忽略分组语义 - 所有子控件(
、、等)自动继承的disabled状态:设disabled后整组不可交互且不参与表单提交 - 不能嵌套
—— 多层分组需并列书写,再用 CSS 控制布局
必须是 的第一个子元素
如果 不是直接子节点,或位置不在最前,部分旧版浏览器(如 IE11)会渲染异常,且 WAI-ARIA 检查工具会报错。它不支持 hidden 属性隐藏,如需视觉隐藏但保留语义,应使用辅助技术友好方式:
对应 CSS(.sr-only 是常见屏幕阅读器专用类):
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
禁用整组时注意 disabled 的传播行为
给 设置 disabled,会强制禁用所有内部可交互元素,且这些元素的值不会被 form.submit() 或 FormData 收集 —— 这和单纯用 CSS 灰掉 opacity 完全不同。
立即学习“前端免费学习笔记(深入)”;
- JavaScript 动态启用/禁用:操作
fieldset.disabled = true即可,无需遍历子元素 - 若只需禁用部分控件,不要用
包裹全部,而应拆分或改用











