HTML 的 ＜legend＞ 元素

1. 什么是 <legend> 元素

<legend> 是 HTML 中用于为 <fieldset> 表单分组提供标题说明的元素。它必须作为 <fieldset> 的第一个子元素出现，用于描述该分组内表单控件的共同用途。

<form>
  <fieldset>
    <legend>个人信息</legend>
    <label>姓名：<input type="text" name="name"></label>
    <label>年龄：<input type="number" name="age"></label>
  </fieldset>
</form>

浏览器默认会将 <legend> 的内容显示在 <fieldset> 边框的左上角，视觉上起到分组标题的作用。

2. 基本语法与规则

<legend> 是一个双标签元素，基本语法如下：

<fieldset>
  <legend>分组标题文本</legend>
  <!-- 表单控件 -->
</fieldset>

使用 <legend> 时需要注意以下几点：

• <legend> 必须直接放在 <fieldset> 内部，且建议作为第一个子元素。
• 一个 <fieldset> 内通常只使用一个 <legend>。
• <legend> 是块级元素，默认宽度占满整个 <fieldset>。
• 如果 <fieldset> 设置了 disabled 属性，<legend> 内的表单控件不会被禁用。

3. 为什么使用 <legend>

使用 <legend> 主要有以下几个好处：

• 提升可访问性 ：屏幕阅读器会将 <legend> 的内容与分组内的表单控件关联起来，帮助视障用户理解每个输入框的用途。
• 语义化清晰：将相关的表单控件组织在一起，代码结构更易读、易维护。
• 改善用户体验：用户能快速理解一组表单字段的共同主题，填写时更有方向感。

<form>
  <fieldset>
    <legend>配送地址</legend>
    <label>收件人：<input type="text" name="receiver"></label>
    <label>电话：<input type="tel" name="phone"></label>
    <label>地址：<input type="text" name="address"></label>
  </fieldset>
</form>

4. 与 <fieldset> 的配合使用

<legend> 必须与 <fieldset> 配合使用才有意义。<fieldset> 负责将相关控件分组，<legend> 则为该分组提供说明文字。

<form>
  <fieldset>
    <legend>账号信息</legend>
    <label>用户名：<input type="text" name="username"></label>
    <label>密码：<input type="password" name="password"></label>
  </fieldset>

  <fieldset>
    <legend>个人资料</legend>
    <label>昵称：<input type="text" name="nickname"></label>
    <label>性别：
      <select name="gender">
        <option value="male">男</option>
        <option value="female">女</option>
      </select>
    </label>
  </fieldset>
</form>

5. 样式化 <legend>

可以通过 CSS 对 <legend> 进行样式定制，使其更符合页面整体设计：

legend {
  font-weight: bold;
  color: #333;
  padding: 0 8px;
  background: #f5f5f5;
  border: 1px solid #ccc;
  border-radius: 4px;
}

<form>
  <fieldset>
    <legend>联系方式</legend>
    <label>邮箱：<input type="email" name="email"></label>
    <label>手机：<input type="tel" name="phone"></label>
  </fieldset>
</form>

6. 可访问性最佳实践

为了让 <legend> 发挥最大的可访问性价值，建议遵循以下实践：

• 标题文本应简洁明确，直接描述分组内控件的共同用途。
• 不要使用空的 <legend>，否则屏幕阅读器无法提供分组说明。
• 避免在 <legend> 中放置复杂的交互元素，保持其作为纯文本标题的语义。
• 当表单较长时，合理使用多个 <fieldset> + <legend> 组合，帮助用户理清填写步骤。

<form>
  <fieldset>
    <legend>第一步：基本信息</legend>
    <label>姓名：<input type="text" name="name"></label>
  </fieldset>

  <fieldset>
    <legend>第二步：联系方式</legend>
    <label>电话：<input type="tel" name="phone"></label>
  </fieldset>
</form>

7. 总结

<legend> 是 HTML 表单中一个简单但重要的语义化元素，它与 <fieldset> 配合，为表单分组提供清晰的标题说明。合理使用 <legend> 不仅能提升代码的可读性和可维护性，还能显著改善表单的可访问性，让所有用户都能更顺畅地完成表单填写。