<fieldset> 是HTML中实现表单字段分组的标准语义化方式，必须配合 <legend> 使用以保障可访问性；其 disabled 属性可原生禁用所有子控件并阻止提交（除 type="hidden"）；JS中应使用 HTMLFieldSetElement.elements 集合而非手动遍历。
用 <fieldset> 包裹相关表单控件
HTML 中实现字段分组最直接的方式就是用 <fieldset> 元素。它天然语义化地表示一组逻辑相关的表单控件，浏览器默认会加边框和内边距，视觉上立刻形成“分组感”。<fieldset> 必须配合 <legend> 使用，否则可访问性受损——屏幕阅读器依赖 <legend> 来说明这组字段的用途。
常见错误是把 <legend> 放在 <fieldset> 外面，或干脆省略。这会导致：① 无障碍测试失败；② 某些浏览器（如旧版 Safari）不渲染边框；③ 用户无法通过键盘 Tab 进入该分组时获知上下文。
-
<fieldset>是流内容容器，可嵌套其他表单元素（<input>、<select>、<textarea>等），但不能作为<form>的直接子级以外的任意位置使用 -
<legend>必须是<fieldset>的第一个子元素，且只能有一个 - 若需隐藏视觉上的
<legend>（例如仅保留语义），可用class="sr-only"配合 CSS，但绝不能用display: none或aria-hidden="true"
禁用整组字段时用 disabled 属性而非 CSS
给 <fieldset> 设置 disabled 属性，会自动禁用其内部所有可交互的表单控件（<input>、<select>、<button> 等），且这些控件的值不会随表单提交。这是原生行为，比手动给每个子元素加 disabled 更可靠、更少出错。
容易踩的坑是试图用 opacity: 0.5 或 pointer-events: none 模拟禁用效果——这只会让视觉变灰或点不动，但控件依然可聚焦、可提交，还可能被屏幕阅读器读出为“可用”，造成严重可访问性问题。
立即学习“前端免费学习笔记（深入）”；
-
<fieldset disabled>会阻止所有子控件的 focus、click 和 submit 行为，包括自定义组件（只要它们正确使用了tabindex和事件委托） - 被禁用的
<fieldset>内部的<input type="hidden">仍会提交，这是规范行为，需留意 - 若只需视觉禁用而保留功能（比如做加载态遮罩），应改用
aria-disabled="true"+ CSS，并自行管理交互逻辑
样式定制时注意 <legend> 的定位和兼容性
<legend> 默认渲染在 <fieldset> 左上角边框上，不同浏览器对它的定位支持差异较大。直接用 margin 或 transform 移动它，在 Firefox 和 Chrome 中表现不一致，Safari 甚至可能完全脱离边框。
真正稳定的做法是：重置 <legend> 的默认样式，用 flex 或 grid 布局重新组织 <fieldset> 内部结构，或者将 <legend> 提到 <fieldset> 外部并用 aria-labelledby 关联。后者虽牺牲一点语义嵌套深度，但换来了可控性和一致性。
- 避免对
<legend>使用position: absolute，IE 和部分移动浏览器不支持相对<fieldset>定位 - 若用 CSS Grid 控制
<fieldset>布局，需确保<legend>仍是第一个子元素，否则语义顺序与 DOM 顺序错位 - 所有现代框架（React/Vue）中动态渲染
<fieldset>时，务必保证<legend>存在且非空字符串，否则校验工具（如 axe）会报错
与 JavaScript 交互时别忽略 HTMLFieldSetElement 特有属性
JS 中获取 <fieldset> 元素后，它不是普通的 HTMLElement，而是 HTMLFieldSetElement，自带 disabled 和 elements 两个关键属性。elements 是只读的 HTMLFormControlsCollection，包含所有可提交的子控件，比 querySelectorAll("input, select, textarea") 更准确、更高效。
一个典型误操作是用 document.querySelectorAll("fieldset input") 获取字段再统一设 disabled，这既冗余又漏掉 <button> 和自定义组件。直接操作 <fieldset> 自身的 disabled 属性即可。
-
document.querySelector("fieldset").elements返回的是实时集合，包含<input disabled>，但不包括<input type="hidden">（除非显式设置了name） - 监听
change或input事件时，事件委托到<fieldset>上是可行的，但要注意event.target可能是子控件，需用event.currentTarget确保指向<fieldset> - SSR 框架中服务端渲染
<fieldset disabled>后，客户端 hydrate 阶段若 JS 修改了disabled状态，需同步更新elements的状态，否则表单提交行为可能不一致
<legend> 的语义强制性、disabled 的传播逻辑、以及 JS 中 elements 集合的边界行为，都是容易在迭代中被覆盖或误改的点。尤其当多人协作或接入第三方 UI 库时，检查 <fieldset> 是否被替换成 <div> + class 模拟，是最常被忽略的实际风险。 
