<fieldset>是HTML5中唯一语义化分组表单控件的原生标签，必须包含<legend>作为首个子元素，支持禁用传播、无障碍访问及表单提交控制，不可嵌套，禁用时子控件不参与提交。
用 <fieldset> 包裹控件实现逻辑分组
<fieldset> 是 HTML5 中唯一语义化分组表单控件的原生标签，它不只是视觉容器，还影响表单可访问性与提交行为。浏览器默认会加边框、缩进，并把其中的 <legend> 作为该组标题渲染在左上角。
- 必须包含至少一个
<legend>，否则屏幕阅读器可能忽略分组语义 - 所有子控件（
<input>、<select>、<textarea>等）自动继承<fieldset>的disabled状态：设disabled后整组不可交互且不参与表单提交 - 不能嵌套
<fieldset>—— 多层分组需并列书写，再用 CSS 控制布局
<legend> 必须是 <fieldset> 的第一个子元素
如果 <legend> 不是直接子节点，或位置不在最前，部分旧版浏览器（如 IE11）会渲染异常，且 WAI-ARIA 检查工具会报错。它不支持 hidden 属性隐藏，如需视觉隐藏但保留语义，应使用辅助技术友好方式：
<fieldset> <legend class="sr-only">联系方式</legend> <input type="email" name="email"> <input type="tel" name="phone"> </fieldset>
对应 CSS（.sr-only 是常见屏幕阅读器专用类）：
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
禁用整组时注意 disabled 的传播行为
给 <fieldset> 设置 disabled，会强制禁用所有内部可交互元素，且这些元素的值不会被 form.submit() 或 FormData 收集 —— 这和单纯用 CSS 灰掉 opacity 完全不同。
立即学习“前端免费学习笔记（深入）”；
- JavaScript 动态启用/禁用：操作
fieldset.disabled = true即可，无需遍历子元素 - 若只需禁用部分控件，不要用
<fieldset>包裹全部，而应拆分或改用<div>+ ARIA（但会丢失原生表单语义） - 服务端校验仍需独立处理：前端禁用只是体验优化，不能替代后端对字段存在性与合法性的判断
和 <div> 分组对比：别为了“看起来整齐”放弃语义
用 <div> 加 CSS 实现视觉分组很常见，但它不提供任何表单语义、无障碍支持或原生禁用能力。只有当分组纯属 UI 布局（例如卡片式表单项排列），且无逻辑关联、无需统一禁用或无障碍要求时，才考虑 <div>。
真正需要分组语义的场景（如「收货地址」「账单地址」、「兴趣标签多选」）—— 一律优先用 <fieldset> + <legend>。省略 <legend> 或用空文本（<legend></legend>）等于主动放弃可访问性基础。
