用于语义化表单逻辑分组，需按用户意图（如“收货信息”）合理归类控件； 为必选首子元素，禁用整个分组用 disabled 属性，不可用 模拟，嵌套时验证需下沉至最内层。
用 <fieldset></fieldset> 包裹相关表单控件即可实现逻辑分组
浏览器原生支持 <fieldset></fieldset>，不需要 JS 或 CSS 预处理。它天然语义化，对屏幕阅读器友好，且默认带边框和缩进视觉提示。关键不是“怎么加标签”，而是“哪些控件该归一组”——通常按用户填写意图划分，比如「收货信息」「支付方式」「账户偏好」。
常见错误是把所有输入框硬塞进一个 <fieldset></fieldset>，或反过来，每个 <input> 单独套一层。这会破坏语义结构，反而让辅助技术更难理解。
-
<legend></legend>必须作为<fieldset></fieldset>的第一个子元素，用于说明本组用途；缺省时屏幕阅读器可能读作“未命名组” - 禁用整个分组只需在
<fieldset></fieldset>上加disabled属性，内部所有表单控件（<input>、<select></select>、<textarea></textarea>等）自动失效 - 不要用
<div> 模拟 <code><fieldset></fieldset>：无法传递可访问性角色（role="group"不能替代原生语义），也不能响应disabled<legend></legend>的位置和样式限制必须注意<legend></legend>默认渲染在<fieldset></fieldset>左上角边框上，这是 UA 样式决定的，不能用position: absolute直接覆盖而不调整边框。强行移除边框（如border: none）又会让视觉分组失效。真正可控的方式是：
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 保留
border，用legend { padding: 0 0.5em; }控制文字内边距 - 若需左对齐文字（而非默认居中），可用
legend { text-align: left; }，但部分旧版 Safari 需配合width: fit-content - 绝对定位要同步重绘边框：给
<fieldset></fieldset>加position: relative，再给<legend></legend>设top: -0.5em; left: 0.5em;，并手动清除上边框（border-top: none）避免重叠
与
aria-labelledby混用时容易忽略焦点顺序问题当
<legend></legend>内容不够描述性（比如只写“选项”），有人会额外加一个隐藏标题并用aria-labelledby关联。但注意：<fieldset></fieldset>本身不接受tabindex，焦点不会停在它身上；用户 Tab 导航时，焦点直接落在组内第一个可聚焦元素（如第一个<input>）。这意味着：
-
aria-labelledby只影响读屏播报，不影响键盘导航流 - 如果组内第一个控件是
<input type="radio">，焦点会落在第一个单选按钮上，但屏幕阅读器会先读<legend></legend>再读当前项，顺序正确 - 若用 JS 动态插入新控件到组内末尾，需确保它们仍可被 Tab 到（即 tabindex 不为 -1，且未被
disabled）
嵌套
<fieldset></fieldset>在表单验证中可能引发意外行为嵌套本身合法，但多数表单验证库（如 HTML5
checkValidity()、reportValidity()）只检查直属子元素。如果把<input required>放在二级<fieldset></fieldset>里，父级<fieldset></fieldset>调用checkValidity()会返回true，即使子输入为空。验证逻辑必须下沉到最内层
<fieldset></fieldset>，或改用form.checkValidity()全局校验。- 不要依赖外层
<fieldset></fieldset>的invalid事件来捕获子项错误 - 动态显示/隐藏某组时，用
hidden属性比display: none更安全——前者会从可访问性和表单提交中彻底排除该组 - 服务端接收数据时，仍需按 name 属性解析，
<fieldset></fieldset>不改变字段名结构
- 保留
