<legend>-分组标题

<legend>标签的基本概念

<legend>标签是HTML表单中用于定义<fieldset>元素标题的专用标签。它必须作为<fieldset>的第一个子元素出现，通常显示在<fieldset>的边框顶部。这个标签在视觉上会将标题"嵌入"到<fieldset>的边框线中，形成一种独特的视觉效果。

<fieldset>
  <legend>用户登录信息</legend>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username">
  <label for="password">密码:</label>
  <input type="password" id="password" name="password">
</fieldset>

<legend>标签的语法特性

<legend>标签的语法非常简单，它没有强制要求的属性，但支持所有全局HTML属性。从语义上讲，它代表了所属<fieldset>内容的描述性标签。

<!-- 基本语法 -->
<fieldset>
  <legend>这是分组标题</legend>
  <!-- 表单内容 -->
</fieldset>

<!-- 带有属性的示例 -->
<fieldset>
  <legend class="form-legend" id="address-legend">收货地址</legend>
  <!-- 地址表单字段 -->
</fieldset>

<legend>标签的样式控制

虽然<legend>有默认的浏览器样式，但可以通过CSS进行完全自定义。常见的样式调整包括字体、颜色、位置等。

fieldset {
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 20px;
}

legend {
  color: #333;
  font-size: 1.2em;
  font-weight: bold;
  padding: 0 10px;
  background: white;
}

<legend>标签的布局行为

<legend>元素在布局上有一些独特特性：

• 默认情况下会"打断"<fieldset>的顶部边框
• 宽度会根据内容自动调整
• 可以使用CSS的float和position属性改变其位置

<fieldset>
  <legend style="float: right; margin-right: 20px;">右侧标题</legend>
  <p>这个legend元素被浮动到了右侧</p>
</fieldset>

<legend>标签的辅助功能

对于辅助技术用户，<legend>提供了重要的上下文信息。屏幕阅读器会朗读<legend>内容作为其内部表单控件的标签。

<fieldset>
  <legend>支付方式</legend>
  <input type="radio" id="credit" name="payment" value="credit">
  <label for="credit">信用卡</label>
  <input type="radio" id="paypal" name="payment" value="paypal">
  <label for="paypal">PayPal</label>
</fieldset>

<legend>标签的复杂应用

在复杂表单中，<legend>可以结合其他HTML元素创建更丰富的界面。

<fieldset>
  <legend>
    <span class="icon">📅</span>
    预约时间
    <span class="required">*</span>
  </legend>
  <input type="datetime-local" id="appointment" name="appointment" required>
</fieldset>

<legend>标签的浏览器兼容性

所有现代浏览器都完全支持<legend>标签，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera
• Internet Explorer 9+

在极少数需要支持旧版IE的情况下，可能需要额外的样式调整。

<legend>标签的最佳实践

1. 保持<legend>文本简洁但具有描述性
2. 为相关表单控件提供额外的<label>
3. 使用CSS增强可读性而不牺牲可访问性
4. 避免在<legend>中放置交互式元素

<fieldset>
  <legend>配送选项</legend>
  <div class="form-group">
    <input type="radio" id="standard" name="shipping" value="standard" checked>
    <label for="standard">标准配送 (3-5个工作日)</label>
  </div>
  <div class="form-group">
    <input type="radio" id="express" name="shipping" value="express">
    <label for="express">加急配送 (1-2个工作日)</label>
  </div>
</fieldset>

<legend>标签的创意用法

虽然主要用途是表单分组，但<legend>也可以用于其他创意布局。

<style>
  .info-box {
    border: none;
    border-top: 3px solid #4CAF50;
    position: relative;
  }
  .info-box legend {
    position: absolute;
    top: -0.8em;
    left: 20px;
    background: white;
    padding: 0 10px;
    color: #4CAF50;
    font-weight: bold;
  }
</style>

<fieldset class="info-box">
  <legend>重要提示</legend>
  <p>您的订单将在24小时内处理。如有任何问题，请联系客服。</p>
</fieldset>

<legend>标签与JavaScript交互

可以通过JavaScript动态操作<legend>元素，实现动态表单标题。

<fieldset>
  <legend id="dynamic-legend">默认标题</legend>
  <button onclick="document.getElementById('dynamic-legend').textContent = '标题已更改!'">
    更改标题
  </button>
</fieldset>