<fieldset>用于语义化表单分组，<legend>为其唯一合法直接子元素且须置于最前；禁用整组用<fieldset disabled>；仅含表单控件，避免混入非交互内容。
用 <fieldset> 包裹相关控件，<legend> 做组标题
表单分组不是靠 CSS 或 JS 实现的，HTML 原生就支持语义化分组：<fieldset> 是容器，<legend> 是唯一合法的直接子元素，用来描述这组控件的用途。浏览器默认会加边框和缩进，屏幕阅读器也能正确识别逻辑分组。
- 必须把
<legend>放在<fieldset>内部最前面，否则语义失效，部分辅助技术无法读取 -
<fieldset>不能嵌套（HTML5 允许但无实际意义，且多数屏幕阅读器不支持嵌套解析） - 如果只是视觉分组、不需要语义或可访问性，别硬套
<fieldset>—— 用<div>+ CSS 更轻量
禁用整组控件时，直接给 <fieldset> 加 disabled
这是 <fieldset> 最被低估的实用能力：设 disabled 属性后，内部所有表单控件（<input>、<select>、<textarea>、<button>）自动变为不可交互状态，且值不会提交。比逐个加 disabled 简洁、可靠。
- 注意：Chrome/Firefox 对
<fieldset disabled>内的<button type="submit">仍可能触发提交（旧版存在），建议配合 JS 拦截或统一用<button type="button"> - 样式上，
<fieldset>的disabled不会自动灰掉文字颜色，需手动加 CSS：fieldset[disabled] { opacity: 0.6; } - 不要对
<legend>单独设disabled—— 它不响应该属性，也不该被禁用
避免在 <fieldset> 里放非表单内容
<fieldset> 的语义是“一组相关表单控件”，W3C 明确建议只包含可交互的表单元素。混入段落、标题、图片等，会破坏可访问性树结构，导致屏幕阅读器朗读混乱或跳过关键信息。
- 常见错误：把说明文字写在
<fieldset>里但不用<legend>，比如<p>请选择偏好语言</p>—— 应该合并进<legend>或用<div aria-hidden="true"> - 如果需要额外说明，优先用
<small>或<span>包裹在<legend>内，或放在<fieldset>开头、<legend>之后并加aria-describedby - 动态渲染时（如 React/Vue），确保
<legend>始终存在 —— 缺失会导致整组失去语义，Lighthouse 可访问性检测直接报错
React/Vue 中使用 <fieldset> 的注意事项
框架本身不干涉 <fieldset> 行为，但 JSX 或模板语法容易忽略 HTML 规则。比如条件渲染 <legend> 时没兜底，或把 key 放在 <fieldset> 上导致重渲染异常。
立即学习“前端免费学习笔记（深入）”；
- JSX 中写
<legend>{title}</legend>时，确保title不为空字符串，否则生成空<legend></legend>，语义弱化 - Vue 模板中避免
v-if控制<legend>存在与否 —— 推荐用v-show隐藏，或用 CSSvisibility: hidden保留 DOM 结构 - SSR 场景下，服务端渲染的
<fieldset>若含客户端才有的交互逻辑（如动态disabled），需同步初始化状态，否则首屏与交互态不一致
<fieldset>，结果反而让键盘用户 tab 顺序变乱、屏幕阅读器多读一堆无意义的“组”提示。该用的时候别省，不该用的时候别凑。 
