<fieldset> 用于语义化表单逻辑分组，需按用户意图（如“收货信息”）合理归类控件；<legend> 为必选首子元素，禁用整个分组用 disabled 属性，不可用 <div> 模拟，嵌套时验证需下沉至最内层。
用 <fieldset> 包裹相关表单控件即可实现逻辑分组
浏览器原生支持 <fieldset>，不需要 JS 或 CSS 预处理。它天然语义化，对屏幕阅读器友好，且默认带边框和缩进视觉提示。关键不是“怎么加标签”，而是“哪些控件该归一组”——通常按用户填写意图划分，比如「收货信息」「支付方式」「账户偏好」。
常见错误是把所有输入框硬塞进一个 <fieldset>，或反过来，每个 <input> 单独套一层。这会破坏语义结构，反而让辅助技术更难理解。
-
<legend>必须作为<fieldset>的第一个子元素，用于说明本组用途；缺省时屏幕阅读器可能读作“未命名组” - 禁用整个分组只需在
<fieldset>上加disabled属性，内部所有表单控件（<input>、<select>、<textarea>等）自动失效 - 不要用
<div>模拟<fieldset>：无法传递可访问性角色（role="group"不能替代原生语义），也不能响应disabled
<legend> 的位置和样式限制必须注意
<legend> 默认渲染在 <fieldset> 左上角边框上，这是 UA 样式决定的，不能用 position: absolute 直接覆盖而不调整边框。强行移除边框（如 border: none）又会让视觉分组失效。
真正可控的方式是：
- 保留
border，用legend { padding: 0 0.5em; }控制文字内边距 - 若需左对齐文字（而非默认居中），可用
legend { text-align: left; }，但部分旧版 Safari 需配合width: fit-content - 绝对定位要同步重绘边框：给
<fieldset>加position: relative，再给<legend>设top: -0.5em; left: 0.5em;，并手动清除上边框（border-top: none）避免重叠
与 aria-labelledby 混用时容易忽略焦点顺序问题
当 <legend> 内容不够描述性（比如只写“选项”），有人会额外加一个隐藏标题并用 aria-labelledby 关联。但注意：<fieldset> 本身不接受 tabindex，焦点不会停在它身上；用户 Tab 导航时，焦点直接落在组内第一个可聚焦元素（如第一个 <input>）。
这意味着：
-
aria-labelledby只影响读屏播报，不影响键盘导航流 - 如果组内第一个控件是
<input type="radio">，焦点会落在第一个单选按钮上，但屏幕阅读器会先读<legend>再读当前项，顺序正确 - 若用 JS 动态插入新控件到组内末尾，需确保它们仍可被 Tab 到（即 tabindex 不为 -1，且未被
disabled）
嵌套 <fieldset> 在表单验证中可能引发意外行为
嵌套本身合法，但多数表单验证库（如 HTML5 checkValidity()、reportValidity()）只检查直属子元素。如果把 <input required> 放在二级 <fieldset> 里，父级 <fieldset> 调用 checkValidity() 会返回 true，即使子输入为空。
验证逻辑必须下沉到最内层 <fieldset>，或改用 form.checkValidity() 全局校验。
- 不要依赖外层
<fieldset>的invalid事件来捕获子项错误 - 动态显示/隐藏某组时，用
hidden属性比display: none更安全——前者会从可访问性和表单提交中彻底排除该组 - 服务端接收数据时，仍需按 name 属性解析，
<fieldset>不改变字段名结构
