fieldset 和 legend 必须配对使用，legend 须为首个子元素且不可为空；仅包裹非控件内容会削弱语义；disabled 属性可原生禁用整组控件；多组 fieldset 应按业务逻辑分块，避免过度嵌套或混杂功能。

用 fieldset 和 legend 对复杂表单项做逻辑分组，核心是让每组控件在语义、行为和可访问性上真正成为一个整体——不是加个边框那么简单，而是让浏览器和读屏软件能“理解”这组字段属于同一业务意图。

必须配对使用，且 legend 要当第一个子元素

legend 不是装饰文字，是 fieldset 的语义必需项。没有它，分组就等于没命名，屏幕阅读器不会播报“支付方式组”，只会平铺读出每个输入框，用户完全失去上下文。

• 正确写法：<fieldset><legend>收货地址</legend><input name="addr"></fieldset>
• 错误写法：漏掉 legend；把它放在 input 后面；用 <div><h3>地址</h3></div> 包裹
• 空 <legend></legend> 或纯空格也等同于缺失，WCAG 会报错

每组至少包含一个可聚焦的表单控件

fieldset 需要“被激活”才有完整语义。只包提示文字、div 或 p，浏览器可能忽略其分组作用，甚至不渲染默认边框。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 有效子元素包括：input、select、textarea、button、radio/checkbox 组
• 避免这样：<fieldset><legend>说明</legend><p>请填写真实信息</p></fieldset> —— 纯说明建议改用 div + CSS

用 disabled 属性一键禁用整组，别手动操作

给 fieldset 加 disabled，内部所有可交互子元素自动失效：不能聚焦、无法输入、提交时值被排除。这是原生能力，比 JS 控制或 CSS 灰显可靠得多。

立即学习“前端免费学习笔记（深入）”；

• 生效范围仅限直接子级控件；嵌套在 div 里的 input 不受影响
• 不要用 style="pointer-events: none" 模拟禁用——它不阻止键盘操作，也不影响表单提交
• 如果需要局部启用（如“同意条款”复选框），只能移除 fieldset[disabled]，再用 JS 单独控制

多组 fieldset 拆分复杂表单，按业务逻辑切分

注册页、设置面板、多步骤流程等场景，适合按用户认知切分成多个 fieldset，每组一个明确主题。既方便键盘用户按组跳转，也利于前端校验和状态管理。

• 推荐分组示例：<fieldset><legend>登录信息</legend></fieldset>、<fieldset><legend>隐私偏好</legend></fieldset>
• 避免一个 fieldset 塞几十个控件，尤其跨功能模块时（比如把“头像上传”和“密码重置”硬塞进同一组）
• 嵌套需谨慎：两层以内可接受（如“支付方式”下再分“银行卡”和“支付宝”），但 ≥3 层易导致 Tab 导航卡死，尤其当某层 legend 缺失或被隐藏