fieldset 和 legend 是实现表单逻辑隔离最规范的方式，必须配用且 legend 为首子元素；仅直接子级控件受 disabled 影响；多平行 fieldset 优于嵌套；div 无语义，不可替代 fieldset。
用 fieldset 和 legend 标签实现逻辑隔离是最规范、最可靠的方式。它们不是为了加边框或排版，而是向浏览器和辅助技术明确传达“这一组控件属于同一语义类别”。
必须配 legend，且它得是第一个子元素
legend 不是可选项，是语义必需项。没有它，fieldset 就失去分组意义：屏幕阅读器读作“未命名组”，浏览器可能忽略边框渲染，disabled 属性也无法向下传递。
- 正确写法：
<fieldset><legend>收货信息</legend><input name="city"></fieldset> - 错误写法包括：
<fieldset><input><legend>地址</legend></fieldset>（legend不是首子元素），或空<legend></legend> - 视觉上不想显示标题？可用视觉隐藏类：
position: absolute; clip: rect(1px, 1px, 1px, 1px);，但不能用display: none或visibility: hidden
确保控件是直接子级，禁用才真正生效
fieldset[disabled] 能一键禁用整组，但只对它的**直接子级表单控件**有效——比如 input、select、textarea、button、input[type="radio"] 等。
- 有效：
<fieldset disabled><legend>支付方式</legend><input type="radio" name="pay"></fieldset> - 失效：
<fieldset disabled><legend>地址</legend><div><input name="street"></div></fieldset>（div中断了禁用继承） - 如需布局包裹，改用
span或 CSS Flex/Grid，避免插入语义中断层
多个平行 fieldset 比嵌套更清晰实用
按业务逻辑切分成多个独立的 fieldset，比多层嵌套更利于可访问性和维护。每组一个明确主题，键盘用户可按组跳转，后端也方便通过 name 前缀区分字段（如 user[email] 和 payment[card]）。
立即学习“前端免费学习笔记（深入）”；
- 适合场景：注册页的“登录信息”“隐私偏好”“安全验证”；订单页的“收货地址”“发票信息”“配送方式”
- 每个
fieldset至少包含一个可聚焦的表单控件，纯文本或<p>不足以激活语义分组 - 避免一个
fieldset包几十个字段，尤其跨功能模块时
别用 div 替代 fieldset 做逻辑分组
div 是通用容器，没有语义。它无法触发屏幕阅读器的分组播报，不支持原生 disabled 继承，也不参与表单数据结构解析。即使加了 CSS 边框，对可访问性毫无帮助。
- 如果只是视觉分隔、无交互需求，用
div+ CSS 即可 - 只要涉及输入控件、需要逻辑归类、要支持禁用或无障碍导航，就必须用
fieldset+legend - 不要把
fieldset塞进<table><td>里，部分浏览器解析异常；如需表格布局，先用div包一层
