fieldset 的核心作用是语义化分组而非美化，必须搭配 legend（首个子元素）标识逻辑组，仅用于相关表单控件，禁用整组用 disabled 属性，视觉优化需保留 legend 语义。
fieldset 标签的核心作用不是“美化”，而是语义化分组
它本身不带默认边框或标题样式，fieldset 的价值在于告诉浏览器和辅助技术：“这一组控件逻辑上属于同一类”。比如地址信息、登录凭证、偏好设置等。视觉上的边框是 legend 触发的默认渲染，但可被 CSS 覆盖——别误以为加了 fieldset 就自动获得“好看分组框”。
常见错误现象：fieldset 套着 div 或嵌套其他 fieldset；漏写 legend 导致无障碍支持断裂；用它替代 section 或 div 做纯布局。
-
legend必须是fieldset的第一个子元素，否则语义失效 - 所有表单控件（
input、select、textarea）应直接或间接位于fieldset内，否则逻辑分组不成立 - 若需禁用整组，给
fieldset加disabled属性即可，比遍历每个控件更可靠
如何让 fieldset 看起来像“现代分组框”而不破坏语义
浏览器默认样式老旧（粗边框 + 左上角 legend），但修改时不能删掉 legend —— 否则屏幕阅读器会丢失上下文。推荐做法是保留 legend，用 CSS 控制其视觉呈现：
fieldset {
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 16px;
margin-bottom: 12px;
}
legend {
font-size: 14px;
font-weight: 600;
color: #333;
margin-left: 8px;
padding: 0 6px;
}
注意：不要用 display: none 隐藏 legend，这会让视障用户完全不知道该组用途。可用 clip-path 或 position: absolute; clip: rect(0 0 0 0) 实现“视觉隐藏但语义保留”。
与 div / section 混用时的典型陷阱
很多人把 fieldset 当成“带边框的 div”，在它里面塞非表单内容（比如按钮操作区、说明文字块），结果导致语义污染。HTML 规范明确要求：fieldset 只用于一组相关表单控件。
- 如果只是排版需要分块，用
div+ class 更合适 - 如果内容含标题+描述+操作按钮，且无表单控件，选
section+h3 - 若必须混合（如分组内有“帮助链接”），把链接放在
fieldset内，但用aria-describedby关联到对应控件，而非当作独立功能区
一个容易被忽略的点：fieldset 会改变内部 label 的点击行为——点击 legend 默认聚焦第一个可聚焦子元素。这个行为不可取消，设计交互时得预判。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
