fieldset 不是可有可无的装饰，而是为单选按钮组提供必要语义分组的容器：它通过必含且唯一的 legend 明确问题上下文，确保屏幕阅读器先读标题再逐项朗读，避免用户困惑；legend 不可用 aria-label 替代，不可隐藏，需视觉可见或正确隐藏；样式需重置但保留分组感知；disabled 属性可整体禁用，禁止嵌套，动态插入时须保证结构完整。
为什么 fieldset 不是可有可无的装饰
单选按钮组（<input type="radio">）本身没有隐含的分组语义，仅靠 name 属性对齐无法告诉屏幕阅读器“这几个选项属于同一问题”。不加 fieldset 时，辅助技术可能把每个 radio 当作独立控件朗读，用户得反复听“男，未选中”“女，未选中”“其他，未选中”，却不知道它们在回答同一个问题。
加上 fieldset 并配 legend，才能形成真正的语义容器：屏幕阅读器会先读出 legend 文本（如“性别”），再逐个读选项，上下文立刻清晰。
legend 必须直接子元素且不可省略
legend 是 fieldset 的唯一合法首子元素，且不能用 aria-label 或 title 替代。以下写法无效：
<fieldset aria-label="性别"> <input type="radio" name="gender" value="male"> 男 </fieldset>
正确结构必须是：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
<fieldset> <legend>性别</legend> <input type="radio" name="gender" value="male"> <label for="male">男</label> <input type="radio" name="gender" value="female"> <label for="female">女</label> </fieldset>
-
legend必须存在，且只能有一个 - 不要用 CSS 隐藏
legend（如display: none），否则语义丢失；如需视觉隐藏，用clip-path: inset(50%)或position: absolute; clip: rect(1px, 1px, 1px, 1px) -
legend文本应简洁明确，避免“请选择”这类冗余词
样式重置比想象中更关键
浏览器默认会给 fieldset 加边框和外边距，还可能让 legend 偏移居中——这些在现代 UI 中常需覆盖。但直接 border: none 会削弱视觉分组感，建议保留轻量边界或用背景色区分：
fieldset {
border: 1px solid #e0e0e0;
border-radius: 4px;
padding: 12px;
}
legend {
font-size: 0.9em;
font-weight: 600;
color: #333;
margin-left: 8px;
padding: 0 6px;
}
- 别忽略
padding：没内边距时，radio挨着边框，视觉拥挤且点击热区小 -
legend默认是块级且居中，若想左对齐，加float: left或width: fit-content+margin-left: 0 - 在高对比度模式下，部分系统会强制显示
fieldset边框，所以边框颜色别设为透明
嵌套与禁用场景的陷阱
fieldset 支持 disabled 属性，一次禁用整个组——这点比手动给每个 radio 加 disabled 更可靠。但要注意：
- 禁用
fieldset后，内部所有表单控件（包括radio、label、button）都不可交互，且自动获得aria-disabled="true" - 不能把
fieldset嵌套在另一个fieldset里，HTML 规范禁止这种嵌套 - 如果单选组逻辑上属于更大表单的一部分（比如“注册表单 > 性别 > 其他说明”），不要为每个小项都套
fieldset，避免语义过深 - 服务端接收数据时，仍只认
name，fieldset不影响提交逻辑，纯前端语义层
真正容易被忽略的是：当用 JavaScript 动态插入单选组时，必须确保 legend 和所有 input 都在同一个新创建的 fieldset 内，漏掉任意一个，语义就断了。
