<legend>:域集图例元素

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

<legend> HTML 元素表示其父级 <fieldset> 内容的标题。

可定制的 <select> 元素中,<legend> 元素允许作为 <optgroup> 的子元素,用于提供一个易于定位和样式的标签。这会替换 <optgroup> 元素的 label 属性中设置的任何文本,并且具有相同的语义。

试一试

<fieldset>
  <legend>Choose your favorite monster</legend>

  <input type="radio" id="kraken" name="monster" value="K" />
  <label for="kraken">Kraken</label><br />

  <input type="radio" id="sasquatch" name="monster" value="S" />
  <label for="sasquatch">Sasquatch</label><br />

  <input type="radio" id="mothman" name="monster" value="M" />
  <label for="mothman">Mothman</label>
</fieldset>
legend {
  background-color: black;
  color: white;
  padding: 3px 6px;
}

input {
  margin: 0.4rem;
}

属性

此元素仅包含全局属性

示例

有关 <legend> 的示例,请参阅 <form>

技术摘要

内容类别 无。
允许内容 短语内容标题(h1–h6 元素)。
标签省略 无,起始标签和结束标签都必须存在。
允许父级 一个 <fieldset>,其第一个子元素是这个 <legend> 元素。在 可定制的 select 元素中,<legend> 元素允许作为 <optgroup> 的子元素。
隐式 ARIA 角色 没有对应的角色
允许的 ARIA 角色 不允许 role
DOM 接口 HTMLLegendElement

规范

规范
HTML
# the-legend-element

浏览器兼容性

另见