必须配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适合划分大模块（如“基本信息”“联系方式”“隐私设置”），但嵌套不宜超过两层。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 推荐结构：单层并列分组，靠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识别等原生能力

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！