HTML 字段集标题 - <legend>

什么是 <legend> 标签？

<legend> 是HTML表单中的字段集标题元素，用于为 <fieldset> 标签提供标题或说明文字，描述字段集内表单控件的分组内容。

基本语法

html 
<fieldset>
  <legend>联系信息</legend>
  <!-- 相关表单控件 -->
</fieldset>

核心属性

align 属性

align 属性用于设置 <legend> 标题的对齐方式，但已被HTML5弃用，建议使用CSS代替。

不推荐使用示例：

html 
<fieldset>
  <legend align="center">个人信息</legend>
  <!-- 表单控件 -->
</fieldset>

推荐的CSS方式：

html 
<fieldset>
  <legend>个人信息</legend>
  <!-- 表单控件 -->
</fieldset>

<style>
  legend {
    text-align: center;
  }
</style>

重要性和作用

<legend> 标签在表单中扮演着重要的角色：

1. 提供分组说明

  • 清晰地描述字段集内表单控件的用途和分组依据
  • 帮助用户快速理解表单的结构和组织方式

2. 增强可访问性

  • 屏幕阅读器：屏幕阅读器会将 <legend> 的文本与字段集关联起来，帮助视力障碍用户理解表单结构
  • 语义化结构：为表单提供更清晰的语义化结构

3. 视觉引导

  • 在视觉上突出显示分组标题，引导用户完成表单填写
  • 浏览器通常会将 <legend> 显示在字段集边框的左上角

最佳实践

  1. 保持简洁明了：<legend> 标题应该简洁地描述字段集的内容

  2. 与 <fieldset> 配合使用：<legend> 必须是 <fieldset> 的第一个子元素

  3. 使用CSS样式化：通过CSS自定义 <legend> 的外观，使其与网站设计保持一致

  4. 考虑可访问性：确保标题文本清晰地描述字段集的用途

  5. 避免过度使用：只为有明确分组意义的表单控件使用 <fieldset> 和 <legend>

示例：

html 
<form action="/order" method="POST">
  <fieldset>
    <legend>订单信息</legend>
    
    <div class="form-group">
      <label for="product">产品：</label>
      <select id="product" name="product" required>
        <option value="">请选择产品</option>
        <option value="product1">产品1</option>
        <option value="product2">产品2</option>
        <option value="product3">产品3</option>
      </select>
    </div>
    
    <div class="form-group">
      <label for="quantity">数量：</label>
      <input type="number" id="quantity" name="quantity" min="1" value="1" required>
    </div>
  </fieldset>
  
  <fieldset>
    <legend>配送信息</legend>
    
    <div class="form-group">
      <label for="address">地址：</label>
      <textarea id="address" name="address" rows="3" required></textarea>
    </div>
    
    <div class="form-group">
      <label for="phone">联系电话：</label>
      <input type="tel" id="phone" name="phone" required>
    </div>
  </fieldset>
  
  <button type="submit">提交订单</button>
</form>

CSS样式化

可以使用CSS对 <legend> 标签进行样式化，例如：

css 
fieldset {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 20px;
  margin-bottom: 25px;
  background-color: #ffffff;
}

legend {
  font-weight: 600;
  color: #333333;
  font-size: 16px;
  padding: 0 15px;
  margin-left: 10px;
  background-color: #ffffff;
}

/* 悬停效果 */
fieldset:hover {
  border-color: #007bff;
}

fieldset:hover legend {
  color: #007bff;
}

浏览器兼容性

所有现代浏览器都支持 <legend> 标签。不同浏览器可能会对 <legend> 有不同的默认样式表现。

总结

<legend> 标签是 <fieldset> 的重要补充，它为表单控件分组提供了清晰的标题说明。正确使用 <legend> 标签，可以提高表单的可读性、可访问性和用户体验。通过与 <fieldset> 配合使用，并结合适当的CSS样式，可以创建结构清晰、视觉友好的表单界面。

最后更新：2026-02-07