fieldset 是语义化表单分组容器，用于逻辑相关的控件（如 radio/checkbox 组或子模块），必须配 legend 以保障可访问性，支持整组禁用和聚焦跳转，不可仅作装饰使用。
fieldset 是什么，什么时候该用它fieldset 不是装饰性标签，它的核心作用是语义化地把逻辑相关的表单控件归为一组，并天然支持禁用整组（disabled）和聚焦跳转（legend 作为可访问的组标题）。如果你有一组 radio 或 checkbox 选项、或几个字段共同描述一个子模块（比如“收货地址”“支付方式”），就该用 fieldset —— 而不是单纯为了加个边框去套 div。
必须配合 legend 才算完整语义
没有 legend 的 fieldset 在可访问性上是残缺的：屏幕阅读器会忽略它，键盘用户无法通过 Tab 进入该组，甚至部分浏览器会降级为普通容器。
- legend 必须是 fieldset 的第一个子元素
- 它不能用 aria-label 或 title 替代
- 如果视觉上不想显示文字，可用 visually-hidden 类（如 position: absolute; width: 1px; height: 1px;），但标签文本仍需存在
<fieldset>
<legend>通知偏好</legend>
<label><input type="checkbox" name="notify-email"> 邮件</label>
<label><input type="checkbox" name="notify-sms"> 短信</label>
</fieldset>
disabled 属性会影响整个组，但要注意嵌套行为
给 fieldset 加 disabled，它内部所有可交互元素（input、select、button、textarea）都会自动禁用，包括被 fieldset 包裹的 fieldset。但注意：
- disabled 不会传递给 legend（它本身不可交互）
- 内部若存在已手动设为 disabled 的控件，其状态不会被覆盖
- 若某控件需单独启用，就不能放在这个 fieldset 里，得拆出来
样式控制比 div 更受限，别硬套 resetfieldset 默认有边框、外边距和 padding，且不同浏览器渲染略有差异（比如 Chrome 的 border 和 Firefox 的 margin）。重置时：
- 直接用 border: none 会丢失语义分组感，建议保留或改用 outline / box-shadow
- padding 可调，但不要设为 0——否则 legend 会贴边，视觉混乱
- legend 的定位默认居顶居中，若要左对齐，用 legend { float: left; margin-left: 8px; } 比 position: relative 更稳妥
legend 的 fieldset 在可访问性上是残缺的：屏幕阅读器会忽略它，键盘用户无法通过 Tab 进入该组，甚至部分浏览器会降级为普通容器。
- legend 必须是 fieldset 的第一个子元素
- 它不能用 aria-label 或 title 替代
- 如果视觉上不想显示文字，可用 visually-hidden 类（如 position: absolute; width: 1px; height: 1px;），但标签文本仍需存在
<fieldset> <legend>通知偏好</legend> <label><input type="checkbox" name="notify-email"> 邮件</label> <label><input type="checkbox" name="notify-sms"> 短信</label> </fieldset>
disabled 属性会影响整个组，但要注意嵌套行为
给 fieldset 加 disabled，它内部所有可交互元素（input、select、button、textarea）都会自动禁用，包括被 fieldset 包裹的 fieldset。但注意：
- disabled 不会传递给 legend（它本身不可交互）
- 内部若存在已手动设为 disabled 的控件，其状态不会被覆盖
- 若某控件需单独启用，就不能放在这个 fieldset 里，得拆出来
样式控制比 div 更受限，别硬套 resetfieldset 默认有边框、外边距和 padding，且不同浏览器渲染略有差异（比如 Chrome 的 border 和 Firefox 的 margin）。重置时：
- 直接用 border: none 会丢失语义分组感，建议保留或改用 outline / box-shadow
- padding 可调，但不要设为 0——否则 legend 会贴边，视觉混乱
- legend 的定位默认居顶居中，若要左对齐，用 legend { float: left; margin-left: 8px; } 比 position: relative 更稳妥
fieldset 默认有边框、外边距和 padding，且不同浏览器渲染略有差异（比如 Chrome 的 border 和 Firefox 的 margin）。重置时：
- 直接用 border: none 会丢失语义分组感，建议保留或改用 outline / box-shadow
- padding 可调，但不要设为 0——否则 legend 会贴边，视觉混乱
- legend 的定位默认居顶居中，若要左对齐，用 legend { float: left; margin-left: 8px; } 比 position: relative 更稳妥
真正容易被忽略的是：当 fieldset 里混用非表单元素（比如说明文字 p 或图标 span），它们不会受 disabled 影响，也不会被屏幕阅读器识别为组内内容——这类内容要么移到 legend 里，要么加 aria-describedby 关联。
