fieldset 和 legend 的正确使用是为了实现语义化分组，legend 必须为 fieldset 的第一个子元素以确保屏幕阅读器正确绑定名称；每组需含至少一个可聚焦控件；disabled 属性仅对直属子控件生效；多组应平级而非嵌套，并在视觉重置后补充可感知的分组线索。
用 fieldset 和 legend 组织表单，不是为了加个边框或排个版，而是让浏览器、键盘用户和屏幕阅读器真正“理解”哪些控件属于同一业务模块——比如“收货地址”或“支付方式”。结构对了，语义才成立。
legend 必须是 fieldset 的第一个子元素
这是硬性要求，不是建议。屏幕阅读器（如 NVDA、VoiceOver）靠 DOM 顺序把 legend 文本绑定为整组控件的可访问名称。一旦位置错，语义就断了。
- 正确：
<fieldset><legend>登录凭证</legend><input name="email"></fieldset> - 错误：把
legend放在input后面，或用<div><legend>...</legend></div>包裹 - 错误：用
<h3>登录凭证</h3>替代legend—— 它没有语义绑定能力，也不会触发禁用传播
每组 fieldset 至少包含一个可聚焦控件
fieldset 需要“被激活”才有完整语义。只包说明文字、div 或 p，浏览器可能忽略其分组作用，甚至不渲染默认边框。
- 有效子元素包括：
input、select、textarea、button、radio/checkbox组 - 避免这样写：
<fieldset><legend>提示</legend><p>请确认信息无误</p></fieldset> - 纯说明内容建议改用普通
div+ CSS，别占用语义容器
disabled 属性能原生禁用整组，但有边界
给 fieldset 加 disabled，会递归禁用所有直属子级表单控件，并自动排除在提交数据之外——这是原生能力，比 JS 控制或 CSS 灰显更可靠。
立即学习“前端免费学习笔记（深入）”；
- 生效范围仅限直属后代：如果中间插了
div，比如<fieldset disabled><div><input name="phone"></div></fieldset>，input不会被禁用 - 禁用后，控件无法聚焦、
focus()静默失败、Tab 键直接跳过整组 - 别用
style="pointer-events: none"模拟禁用——它不影响提交行为，也不阻止键盘操作
多组 fieldset 应平级拆分，避免嵌套
注册页、多步骤流程等复杂场景，适合按用户认知切分成多个平级 fieldset，每组一个明确主题，比如“基本信息”“联系方式”“隐私设置”。
- 嵌套
fieldset在语义和行为上都不可靠，屏幕阅读器支持差，禁用传播也容易出错 - 视觉样式重置（如去掉默认边框）后，必须手动补视觉线索，比如加背景色、间距或图标，否则用户看不出哪块是一组
- 若需隐藏
legend的视觉显示又保留语义，可用position: absolute; clip: rect(1px, 1px, 1px, 1px);，但绝不能用display: none或visibility: hidden
