fieldset 和 legend 用于语义化表单逻辑分组，legend 必须为 fieldset 的首个子元素且不可省略；需包含至少一个可聚焦表单控件；支持原生 disabled 禁用整组；多组 fieldset 可提升复杂表单的可访问性与结构清晰度。
用 fieldset 和 legend 对表单控件做逻辑分组，核心是表达“哪些控件属于同一语义类别”，不是为了加边框或排版。只要结构写对，浏览器和读屏软件就能自动识别分组关系。
必须用 legend 作标题，且它得是 fieldset 的第一个子元素
legend 不是可选项，而是语义必需项。没有它，fieldset 就失去分组意义，屏幕阅读器不会把这组控件当一个整体来播报。
- 正确写法：
<fieldset> <legend>收货地址</legend> <input name="city"> </fieldset> - 错误写法：漏掉
legend、把它放在input后面、或者用<div><legend>...</legend></div>包裹 - 视觉隐藏 legend 时，不能用
display: none或visibility: hidden，可用position: absolute; clip: rect(1px, 1px, 1px, 1px)保留语义
每组 fieldset 至少包含一个可聚焦的表单控件
只包 div、p 或纯文本，浏览器可能忽略该 fieldset 的语义，甚至不渲染边框。它需要实际参与表单交互的元素来“激活”分组逻辑。
- 有效子元素包括：
input、select、textarea、button、radio/checkbox组 - 避免这样写：
<fieldset> <legend>说明</legend> <p>这只是提示文字</p> </fieldset> - 如果真只需要展示说明，改用
div+ CSS 更稳妥
用 disabled 属性一键禁用整组，无需 JS
给 fieldset 加 disabled，它内部所有可交互子元素会自动失效，并从 FormData 提交中排除——这是原生能力，比 CSS 灰色遮罩可靠得多。
<fieldset disabled> <legend>支付方式</legend> <input type="radio" name="pay"> </fieldset>- 注意：禁用效果只作用于
fieldset的**直接子级**表单控件，嵌套在div里的input不受影响 - 不要用 CSS 模拟禁用状态，那只是视觉欺骗，破坏可访问性和表单行为
多个 fieldset 拆分复杂表单，别堆在一个里
注册页、多步骤表单、设置面板等场景，适合按业务逻辑切分成多个 fieldset，每组一个明确主题，既提升可读性，也方便键盘用户按组跳转。
- 例如：
<fieldset> <legend>登录信息</legend>...</fieldset>、<fieldset> <legend>隐私偏好</legend>...</fieldset> - 避免一个
fieldset包几十个控件，尤其跨功能模块时 - 不要把
fieldset直接塞进table的td里，需先用div包一层，否则部分浏览器解析异常
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
