表单字段集(fieldset, legend)

表单字段集（<fieldset>）和标题（<legend>）是HTML中用于组织表单元素的语义化标签。它们能将相关控件分组，并通过视觉分隔提升表单的可读性和可访问性。

<fieldset> 的基本用法

<fieldset> 是一个块级元素，用于包裹一组逻辑上相关的表单控件。浏览器默认会为 <fieldset> 添加边框，形成视觉上的分组效果。例如：

<fieldset>
  <legend>用户信息</legend>
  <label>姓名：<input type="text" name="username"></label>
  <label>邮箱：<input type="email" name="email"></label>
</fieldset>

这个例子创建了一个包含两个输入框的字段集，边框会自动包裹这两个控件。

<legend> 的作用

<legend> 必须作为 <fieldset> 的第一个子元素出现，用于描述字段集的用途。它的文本会嵌入到 <fieldset> 的边框线上：

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

样式定制示例

虽然浏览器有默认样式，但可以通过CSS完全自定义外观：

fieldset {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 1em;
}

legend {
  color: #ff6b6b;
  font-weight: bold;
  padding: 0 10px;
  background: white;
}

复杂表单分组实践

在包含多步骤的表单中，字段集能清晰划分不同部分：

<form>
  <fieldset>
    <legend>基本信息</legend>
    <!-- 姓名、电话等字段 -->
  </fieldset>
  
  <fieldset>
    <legend>配送地址</legend>
    <!-- 地址相关字段 -->
  </fieldset>
  
  <fieldset disabled>
    <legend>订单确认</legend>
    <!-- 只读的订单摘要 -->
  </fieldset>
</form>

禁用整个字段集

通过 disabled 属性可以一次性禁用组内所有控件：

<fieldset disabled>
  <legend>会员信息（非会员不可编辑）</legend>
  <label>会员卡号：<input type="text" name="vip_id"></label>
  <label>积分：<input type="number" name="points"></label>
</fieldset>

无障碍访问注意事项

屏幕阅读器会朗读 <legend> 内容作为组内控件的上下文说明。确保：

• 每个 <fieldset> 必须有对应的 <legend>
• 描述文本要简洁明确
• 避免嵌套超过3层的字段集

与ARIA的配合使用

对于更复杂的场景，可以结合ARIA属性增强语义：

<fieldset aria-describedby="hint">
  <legend>紧急联系人</legend>
  <p id="hint">至少需要填写一个紧急联系人</p>
  <!-- 联系人字段 -->
</fieldset>

实际应用案例

电商网站的筛选器常使用字段集：

<aside>
  <fieldset>
    <legend>价格区间</legend>
    <input type="range" min="0" max="1000">
  </fieldset>
  
  <fieldset>
    <legend>商品分类</legend>
    <label><input type="checkbox" name="category" value="1"> 电子产品</label>
    <label><input type="checkbox" name="category" value="2"> 家居用品</label>
  </fieldset>
</aside>

浏览器兼容性细节

所有现代浏览器都完整支持这两个元素，但需要注意：

• IE11对某些CSS样式（如 display: grid）在 <fieldset> 内的支持有问题
• 移动端浏览器可能会忽略某些边框样式
• 打印时边框可能显示不一致

表单提交行为

字段集本身不会影响表单提交数据，它纯粹是视觉和语义上的分组。提交时只会包含组内有效的表单控件数据。

嵌套字段集的使用

虽然可以嵌套，但建议最多两层：

<fieldset>
  <legend>主要信息</legend>
  
  <fieldset>
    <legend>次要信息</legend>
    <!-- 嵌套的字段 -->
  </fieldset>
</fieldset>