HTML表单中字段组的清晰说明需用<fieldset>和<legend>配合——<legend>是唯一合法标题，必须为<fieldset>首个子元素，简洁标明主题（如“联系方式”），不可省略或嵌套重复；可辅以<p>或<div>加aria-describedby补充说明，CSS可微调样式但不得破坏语义。

HTML 表单中，为字段组添加清晰文字说明，核心是用 `

` 和 `

` 配合使用——`

` 就是专为字段组设计的语义化标题标签，不是 ``，也不是普通 `

` 或 `

`。

用

作为字段组的唯一标题

`

` 必须是 `

` 的第一个子元素，它直接定义该组字段的主题，比如“收货地址”“支付方式”“兴趣偏好”。屏幕阅读器会把这段文字读作“收货地址组，包含三个输入项”，提供明确上下文。

• 正确写法：<fieldset><legend>联系方式</legend><label>手机号</label><input type="tel"></fieldset>
• 不能省略 `
  `：空 `

  ` 或完全不写，会让辅助技术失去分组意图
• 不能重复嵌套：一个 `
  ` 只能有一个 `

  `，多层分组需用多个 `

  ` 套嵌

让说明更完整，可补充描述性文本

仅靠 `

` 有时不够，比如需要解释格式要求或选填逻辑。这时可在 `

` 后、表单控件前加一段普通 `

` 或 `

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

`，并用 `aria-describedby` 关联到 `

`：

• 给 `
  ` 添加 `

  勾选至少两项，系统将据此推荐内容

  `
• 再写 `
  `，屏幕阅读器会连读标题和提示
• 避免把说明塞进 `
  ` 里凑长句，保持其简洁（建议不超过12个汉字）

视觉样式与可访问性兼顾

`

` 默认显示在 `

` 左上角边框上，浏览器渲染略有差异。如需统一外观，可用 CSS 微调，但别破坏语义：

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

• 居中显示：`legend { text-align: center; }`（注意部分旧版 IE 需配合 `margin: auto`）
• 加大字号/加粗：`font-size: 1.1em; font-weight: bold;`，增强视觉层级
• 禁用 `display: block` 或 `float` 等可能脱离边框定位的属性，否则语义与视觉错位

不推荐的替代做法

以下方式看似可行，实则削弱可访问性或违反规范：

• 用 `

  ` 替代 `

  `：语义错误，屏幕阅读器不会将其识别为字段组标题

• 用 `` 包裹整个 `
  `：`` 只适用于单个控件，不支持容器
• 纯 CSS 定位 `
  `：无语义，读屏器无法关联到下方字段
• 依赖 `title` 属性或 placeholder：不可聚焦、不持久、移动端失效