怎样定义表单分组标题_LEGEND标签为FIELDSET添加说明-html教程-PHP中文网

必须直接嵌套在内且为首个子元素，否则语义失效、屏幕阅读器不朗读、tabindex错乱；不可为空、不宜过长、禁用display:none隐藏，更新内容应避免innerhtml直接替换。

怎样定义表单分组标题_legend标签为fieldset添加说明

为什么 `<legend></legend>` 必须直接嵌套在 `<fieldset></fieldset>` 里

因为浏览器和辅助技术（如屏幕阅读器）只认这种严格嵌套结构：<fieldset></fieldset> 的第一个子元素要是 <legend></legend>，否则语义就断了。不是“建议放”，是“不放就失效”——表单分组标题不会被朗读，tabindex 逻辑也会错乱。

常见错误现象：

<legend></legend> 被包在 <div> 或 <code><p></p> 里
用 <h3></h3> 替代 <legend></legend>，以为视觉效果一样就行
<legend></legend> 放在 <fieldset></fieldset> 外面，靠 CSS 定位“看起来”挨着

`<legend></legend>` 的内容必须可访问、不可空、不宜过长

空的 <legend></legend>（比如 <legend></legend>）等于没写；纯图标（<legend><svg>...</svg></legend>）对屏幕阅读器不友好；超过一行的文字会让某些旧版浏览器渲染错位。

实操建议：

用简明动词短语，比如 <legend>登录凭证</legend>，别写“请输入您的用户名和密码以完成身份验证”
需要图标时加 aria-label 或隐藏文本，例如：<legend> <span aria-hidden="true">?</span>安全设置</legend>
避免在 <legend></legend> 里塞 <input> 或交互控件——它只负责说明，不负责操作

样式控制要小心：不要用 `display: none` 或 `visibility: hidden` 隐藏 `<legend></legend>`

这两者都会让屏幕阅读器彻底忽略 <legend></legend>，导致分组语义丢失。想“视觉隐藏但保留可访问性”，得用专门的辅助技术隐藏类：

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

然后这样用：<legend class="visually-hidden">地址信息</legend>。注意：这不是为了“隐藏标题”，而是极少数场景下（比如已有视觉标题）做冗余规避，正常情况不该隐藏。