fieldset 必须正确使用：legend 为首个子元素且非空，内含可聚焦表单控件，禁用用 disabled 属性，多组按逻辑分拆避免嵌套，UI 框架中需验证 DOM 真实存在。
fieldset 不是用来“加边框”的，写错位置、漏掉 legend 或只当视觉容器用，等于没写。
legend 必须是 fieldset 的第一个子元素，且不能空
浏览器和读屏软件靠 legend 文本识别这组控件的语义名称。空 <legend></legend> 会被播报为“空白分组”，比不写更误导；把 legend 放在 input 后面，语义直接断裂。
- 正确：
<fieldset><legend>收货地址</legend><input name="city"></fieldset> - 错误：
<fieldset><input name="city"><legend>收货地址</legend></fieldset> - 错误：
<fieldset><legend><h3>收货地址</h3></legend></fieldset>（h3会干扰可访问性名称获取） - 视觉隐藏但保留语义：用
position: absolute; clip: rect(1px, 1px, 1px, 1px);，别用display: none或visibility: hidden
fieldset 里至少得有一个可聚焦的表单控件
只包 <p>、<div> 或纯文本，fieldset 就“失活”了：浏览器可能忽略其语义，边框不渲染，读屏器跳过整组。
- 有效子元素：
input、select、textarea、button、radio/checkbox组 - 无效示例：
<fieldset><legend>说明</legend><p>请填写真实信息</p></fieldset>→ 改用div+ CSS - 一组
radio（如性别选项）必须套在同一个fieldset里，否则辅助技术无法识别它们属于同一逻辑项
用 disabled 属性禁用整组，别手动画灰或加 pointer-events
fieldset 的 disabled 是原生行为：所有直接子级表单控件自动失效、无法聚焦、提交时值被排除。CSS 模拟只是障眼法，键盘仍能操作，表单仍会提交值。
立即学习“前端免费学习笔记（深入）”；
- 生效范围仅限直接子级——嵌套在
<div>里的input不受影响 - 错误做法：
<fieldset style="opacity:0.5; pointer-events:none">→ 完全破坏可访问性和表单逻辑 -
label在fieldset[disabled]下点击行为不一致：Chrome 允许穿透到内部控件（即使禁用），Firefox 则拦截，务必真机测试 - 被禁用的控件值不会出现在
FormData中；若业务要求提交，需 JS 手动补全
多组 fieldset 按业务逻辑切分，别堆一起或过度嵌套
注册页、设置面板这类复杂表单，适合拆成多个 fieldset，每组一个明确主题。深层嵌套（≥3 层）会让键盘用户卡在 Tab 导航里出不来，尤其当某层 legend 缺失或为空时。
- 推荐结构：
<fieldset><legend>登录信息</legend></fieldset>+<fieldset><legend>隐私偏好</legend></fieldset> - 避免：
<fieldset><fieldset><fieldset>…</fieldset></fieldset></fieldset> - UI 框架（如 Bootstrap、Ant Design）常剥离
fieldset和legend——打开开发者工具检查最终 DOM，确认标签真实存在且未被 JS 移除 - 如果框架不支持，宁可手写原生
fieldset+legend，再用 CSS 对齐样式
最常被忽略的是：很多团队写了 fieldset 却没验证它是否真在 DOM 里起作用——尤其用了 UI 框架之后，legend 可能被删了，disabled 可能没传递，焦点路径可能已错乱。
