必须配legend且为fieldset首个子元素，内容非空；仅禁用直属子控件；多组应平级分拆，避免深层嵌套；UI框架中须验证DOM真实存在。

在表单页面中合理使用字段集（fieldset），核心是用语义表达逻辑关系，而不是只为加边框或视觉分隔。它直接支撑可访问性、键盘导航和原生表单行为，漏掉关键规则反而会削弱表单质量。

必须配legend且位置严格限定

legend不是可选装饰，而是

的语义必需项——它必须是fieldset的第一个子元素，且内容不能为空。

• 正确写法：<fieldset> <legend>收货地址</legend> <input name="addr"> </fieldset>
• 错误示例：<fieldset> <input><legend>收货地址</legend> </fieldset>（顺序错，语义断裂）
• 避免嵌套标题标签：<legend><h3>支付方式</h3></legend>会干扰读屏器识别，纯文本即可
• 如需视觉隐藏但保留语义，用position: absolute; clip: rect(1px, 1px, 1px, 1px);，禁用display: none或visibility: hidden

按业务逻辑分层，避免深层嵌套

多个fieldset适合划分大模块（如“基本信息”“联系方式”“隐私设置”），但嵌套不宜超过两层。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 推荐结构：单层并列分组，靠CSS控制间距、边框样式实现视觉层次
• 嵌套三层及以上易导致Tab键焦点卡住，尤其当内层legend缺失或为空时
• 若必须嵌套（例如“地址”下再分“发票地址”和“收货地址”），每层都必须有明确、非空的legend
• legend里不要放按钮、链接等交互元素，防止焦点管理混乱

善用disabled属性控制整组状态

fieldset[disabled]不是视觉灰化，而是触发浏览器原生禁用逻辑：所有**直接子级**标准控件（input、select、textarea、button）自动失效、无法聚焦、提交时值被排除。

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

• 生效范围：仅限直接子元素，<div><input></div>内的控件不受影响
• 不生效对象：自定义组件、contenteditable区域、通过JS模拟的输入框
• 若业务需要提交被禁用字段的值，须用JS手动补全：formData.append('email', emailInput.value)
• label点击行为在Chrome与Firefox中表现不一致，务必真机测试

警惕UI框架对语义的剥离

Ant Design、Bootstrap等主流框架常将fieldset视为冗余，用CSS Grid/Flex模拟分组结构，导致DOM中实际丢失fieldset和legend。

• 上线前检查渲染后的真实HTML，确认fieldset和legend节点存在且未被脚本移除
• 服务端渲染（SSR）模板中，条件渲染字段组时，要同步控制fieldset的开闭，否则DOM结构断裂
• 不用aria-labelledby或div+ARIA替代fieldset：它们无法继承禁用状态，也不参与自动填充、表单API识别等原生能力