<legend>-分组标题

<legend> 标签是 HTML 表单中用于定义 <fieldset> 元素标题的专用标签。它通常与 <fieldset> 配合使用，为表单中的一组相关控件提供语义化的分组标题，提升可访问性和视觉层次。

<legend> 的基本用法

<legend> 必须作为 <fieldset> 的第一个子元素出现，且一个 <fieldset> 只能包含一个 <legend>。以下是最基础的示例：

<fieldset>
  <legend>用户基本信息</legend>
  <label>姓名：<input type="text" name="username"></label>
  <label>年龄：<input type="number" name="age"></label>
</fieldset>

渲染效果会显示一个带边框的方框，顶部嵌入"用户基本信息"的标题。这种结构在视觉上明确区分了不同表单区块。

样式控制与布局特性

<legend> 具有独特的布局特性：

1. 默认定位：标题会"跨坐"在 <fieldset> 的边框上
2. 尺寸限制：宽度默认根据内容自动调整，但不会超过父 <fieldset> 的宽度
3. 样式覆盖：可以通过 CSS 重置默认样式

/* 自定义legend样式 */
legend {
  background: #f0f0f0;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1.2em;
  color: #333;
}

高级应用场景

复杂表单分组

在包含多层级表单时，嵌套 <fieldset> 配合 <legend> 能创建清晰的视觉结构：

<fieldset>
  <legend>订单信息</legend>
  <fieldset>
    <legend>收货地址</legend>
    <!-- 地址字段... -->
  </fieldset>
  <fieldset>
    <legend>支付方式</legend>
    <!-- 支付选项... -->
  </fieldset>
</fieldset>

交互式分组

结合 JavaScript 可以实现动态分组控制：

<fieldset>
  <legend onclick="toggleSection(this)">高级选项 ▼</legend>
  <div class="advanced-options">
    <!-- 隐藏的高级选项... -->
  </div>
</fieldset>

<script>
function toggleSection(legend) {
  const options = legend.nextElementSibling;
  options.style.display = options.style.display === 'none' ? 'block' : 'none';
  legend.textContent = legend.textContent.includes('▼') 
    ? legend.textContent.replace('▼', '▲') 
    : legend.textContent.replace('▲', '▼');
}
</script>

无障碍访问要点

1. 屏幕阅读器支持：<legend> 内容会被朗读为 <fieldset> 的标签
2. 关联控制：确保 <legend> 文本能准确描述分组内容
3. 键盘导航：通过 <fieldset> 的焦点管理提升键盘操作体验

<fieldset aria-describedby="desc1">
  <legend id="legend1">通知设置</legend>
  <p id="desc1">控制您接收哪些类型的通知</p>
  <!-- 单选按钮组... -->
</fieldset>

浏览器兼容性差异

虽然现代浏览器普遍支持良好，但需要注意：

• IE8 及以下版本对 <legend> 的定位处理存在偏差
• 某些移动浏览器可能忽略对 <legend> 的特殊样式
• 打印样式表中可能需要额外调整

/* 兼容性修复示例 */
fieldset {
  position: relative;
  padding-top: 1.5em;
}
legend {
  position: absolute;
  top: 0;
  left: 10px;
}

与 ARIA 的配合使用

当需要增强语义时，可以结合 ARIA 属性：

<fieldset role="region" aria-labelledby="legend2">
  <legend id="legend2">隐私设置</legend>
  <!-- 隐私选项... -->
</fieldset>

实际开发中的注意事项

1. 文本长度：避免过长的 <legend> 文本破坏布局
2. 表单序列化：<legend> 内容不会包含在表单提交数据中
3. 替代方案：在不需要边框的情况下，可以考虑使用 <h2> + <div> 的组合

<!-- 替代方案示例 -->
<div class="form-section">
  <h2 class="section-title">配送方式</h2>
  <!-- 表单控件... -->
</div>

创意用法示例

利用 CSS 可以创造非传统的视觉效果：

<fieldset class="custom-fieldset">
  <legend class="custom-legend"><span>特别优惠</span></legend>
  <!-- 优惠内容... -->
</fieldset>

<style>
.custom-fieldset {
  border: 2px dashed #ff6b6b;
  position: relative;
}
.custom-legend {
  background: #ff6b6b;
  color: white;
  padding: 0 15px;
  transform: rotate(-2deg);
}
.custom-legend span {
  display: inline-block;
  transform: rotate(2deg);
}
</style>