fieldset是唯一原生支持表单逻辑分组、批量禁用和无障碍语义的html元素；必须配legend且为首个子元素，否则语义失效；disabled属性可穿透控制所有内部表单控件。
直接说结论：fieldset不是“可有可无的装饰标签”，它是唯一能原生实现表单逻辑分组+批量禁用+无障碍语义三合一的 HTML 元素。不用它，你得靠 JS 模拟、CSS 伪造、ARIA 补漏，反而更费劲。
为什么必须配legend且只能放第一个子位置
没legend的fieldset就像没标题的文档——浏览器仍画边框，但屏幕阅读器读作“group”，用户完全不知道这组控件是干啥的。更麻烦的是，部分旧版 Safari 和 IE 甚至不渲染边框。
-
legend必须是fieldset的第一个子元素，否则语义断裂；不能用div或span替代，也不能靠aria-label绕过 - 如果真不想显示文字，用
<legend class="sr-only">收货地址</legend>，而不是删掉它 - 嵌套
fieldset时，每一层都得有自己的legend，否则内层可能被读屏软件跳过
disabled属性怎么批量控制内部所有控件
fieldset的disabled是少数几个真正“穿透式”的原生能力：加在fieldset上，里面所有<input>、<select></select>、<textarea></textarea>、<button></button>自动失效，值也不提交。
- 哪怕某个
input自己写了disabled="false"，只要父fieldset是disabled，它照样不可交互 - 别用
fieldset[aria-disabled="true"]假装禁用——它不会阻止键盘聚焦，也不会拦截表单提交值 - 需要“视觉灰化但保留提交”？老老实实用 CSS 控制样式，别碰
disabled
自定义样式时legend总跑偏，怎么办
默认legend浮在边框左上角，这是浏览器 UA 样式决定的。一动border或padding，它就容易被裁剪、错位、重叠。
- 最稳妥的做法：保留默认边框，只微调
legend { padding: 0 0.5em; }控制文字间距 - 要左对齐文字？用
legend { text-align: left; width: fit-content; }，但 Safari 15 以下需补width: -webkit-fit-content; - 绝对定位要同步处理边框：
fieldset { position: relative; border-top: none; }+legend { position: absolute; top: -0.5em; left: 0.5em; }
真正容易被忽略的点：分组不是按 HTML 结构，而是按用户填写意图。比如“收货地址”和“账单地址”即使字段相同，也该分两个fieldset——因为用户心理上是两件事，辅助技术也需要区分上下文。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
