fieldset和legend是唯一能真正实现语义化表单分组的原生html方案，直接影响可访问性、表单提交逻辑和js行为；legend必须为fieldset首个子元素且非空，否则整组语义失效，屏幕阅读器无法识别分组。
fieldset 和 legend 是唯一能真正实现语义化表单分组的原生 HTML 方案，不是加个边框那么简单——它直接影响可访问性、表单提交逻辑和 JS 行为。
为什么必须用 fieldset 包裹同组控件
浏览器和屏幕阅读器只认 DOM 结构，不认 CSS class 或视觉位置。光靠 div + 样式，JS 获取 form.elements 时无法区分“兴趣爱好”和“通知偏好”这两组复选框；后端收到的 name="hobby" 也只会是最后一个值，而非数组。
- 必须用
fieldset把一组input[type="checkbox"]或input[type="radio"]包起来，才构成逻辑分组 -
legend是该分组的可访问标题，会被读屏软件朗读，且必须是fieldset的第一个子元素 - 如果只是视觉分组（比如纯展示、无交互），用
div+ CSS 更轻量，别硬套fieldset -
fieldset里至少得有一个可聚焦的表单控件（input、select、textarea、button），否则语义失效，部分浏览器甚至不渲染边框
legend 放错位置或内容为空会怎样
legend 不是装饰标签，它是语义锚点。放错位置或留空，等于把整组字段“隐形”了。
- 错误写法：
<fieldset> <input name="city"><legend>收货地址</legend> </fieldset>——legend不在最前，读屏器跳过整组 - 错误写法：
<legend><h3>支付方式</h3></legend>—— 内嵌h3会干扰可访问性名称获取，WCAG 检测失败 - 错误写法：
<legend></legend>—— 空legend被播报为“空白分组”，比不写更误导 - 正确写法：
<legend>收货地址</legend>，纯文本，无标签包裹，无前后空格
用 disabled 控制整组状态的副作用
给 fieldset 加 disabled 属性，确实能一键禁用内部所有控件，但它的影响比你想象中更彻底。
- 内部所有
input、select、button自动变为不可交互，且值不会出现在FormData中，也无法通过form.elements访问 -
legend文字也会变灰（但默认不自动降 opacity），需手动加 CSS：fieldset[disabled] { opacity: 0.6; } - Chrome/Firefox 对
<button type="submit"></button>在fieldset[disabled]内仍可能触发提交（旧版常见），建议统一用<button type="button"></button> - 若只需视觉禁用但保留 JS 绑定能力（比如监听点击做日志），改用
fieldset[aria-disabled="true"]+ CSS 模拟，别碰原生disabled
移动端 Safari 中 legend 不响应点击怎么办
iOS Safari 默认不把 legend 当作可点击区域，这不是 bug，是规范行为——它本质是说明文字，不是交互控件。
- 不要给
legend直接绑onclick或addEventListener('click')，大概率不触发 - 如需点击展开/折叠分组，应把事件绑定到
fieldset容器上，再通过 JS 控制内部显示状态 - 若想让整个区域可点（比如切换启用/禁用），用
fieldset本身做 target，配合aria-expanded和aria-controls做语义补充 - 避免用
legend包含按钮或链接——结构混乱，可访问性检测直接报错
真正容易被忽略的是：服务端模板渲染时，如果条件性地渲染某组字段，却忘了同步控制 fieldset 的开闭标签，会导致 DOM 结构断裂——比如只输出了 <fieldset></fieldset> 没有闭合，或漏掉 <legend></legend>。这种错误在 SSR 场景下静默发生，直到无障碍测试或表单提交异常才暴露出来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
