HTML表单分组[编辑 | 编辑源代码]

HTML表单分组是一种将相关表单控件组织在一起的HTML技术，通过视觉和语义上的分组提高表单的可读性和可用性。主要使用<fieldset>...</fieldset>和<legend>...</legend>元素实现，特别适用于包含多个逻辑部分的复杂表单。

基本语法[编辑 | 编辑源代码]

表单分组的基本结构如下：

<fieldset>
  <legend>分组标题</legend>
  <!-- 表单控件放在这里 -->
</fieldset>

元素说明[编辑 | 编辑源代码]

<fieldset>...</fieldset>：创建分组容器，默认带有边框样式
<legend>...</legend>：定义分组的标题，显示在边框的左上角

基础示例[编辑 | 编辑源代码]

以下是用户注册表单的简单分组示例：

<form>
  <fieldset>
    <legend>个人信息</legend>
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name"><br>
    
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email">
  </fieldset>

  <fieldset>
    <legend>账户设置</legend>
    <label for="username">用户名:</label>
    <input type="text" id="username" name="username"><br>
    
    <label for="pwd">密码:</label>
    <input type="password" id="pwd" name="pwd">
  </fieldset>
</form>

输出效果：

会显示两个带有边框的分组区域
每个区域左上角有对应的标题("个人信息"和"账户设置")
表单控件按逻辑分类排列

高级用法[编辑 | 编辑源代码]

嵌套分组[编辑 | 编辑源代码]

表单分组支持嵌套结构，适合更复杂的场景：

<fieldset>
  <legend>配送信息</legend>
  
  <fieldset>
    <legend>地址</legend>
    <!-- 地址字段 -->
  </fieldset>
  
  <fieldset>
    <legend>配送选项</legend>
    <!-- 配送选项 -->
  </fieldset>
</fieldset>

禁用整个分组[编辑 | 编辑源代码]

通过<fieldset>...</fieldset>的disabled属性可以一次性禁用组内所有控件：

<fieldset disabled>
  <legend>会员信息(当前不可用)</legend>
  <!-- 所有子控件都会被禁用 -->
</fieldset>

样式定制[编辑 | 编辑源代码]

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

fieldset {
  border: 2px dashed #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 15px;
}

legend {
  font-weight: bold;
  color: #333;
  padding: 0 10px;
}

无障碍考虑[编辑 | 编辑源代码]

屏幕阅读器会朗读<legend>...</legend>内容作为分组标识
确保<legend>...</legend>简洁且具有描述性
避免仅依赖视觉分组(如只使用边框)，应始终使用语义化元素

实际应用案例[编辑 | 编辑源代码]

电商结账表单[编辑 | 编辑源代码]

对应HTML结构：

<form>
  <fieldset>
    <legend>收货信息</legend>
    <!-- 联系人字段 -->
    <fieldset>
      <legend>配送地址</legend>
      <!-- 地址字段 -->
    </fieldset>
  </fieldset>

  <fieldset>
    <legend>支付信息</legend>
    <!-- 支付字段 -->
    <fieldset>
      <legend>账单地址</legend>
      <!-- 地址字段 -->
    </fieldset>
  </fieldset>
</form>

问卷调查表单[编辑 | 编辑源代码]

复杂问卷通常需要多级分组：

<fieldset>
  <legend>基本信息</legend>
  <!-- 姓名/年龄等 -->
</fieldset>

<fieldset>
  <legend>产品评价</legend>
  
  <fieldset>
    <legend>外观设计</legend>
    <!-- 评分问题 -->
  </fieldset>
  
  <fieldset>
    <legend>使用体验</legend>
    <!-- 评分问题 -->
  </fieldset>
</fieldset>

技术规范[编辑 | 编辑源代码]

根据HTML5标准：

<fieldset>...</fieldset>的name属性可用于脚本引用
分组内的第一个<legend>...</legend>才会被作为正式标题
表单提交时会包含分组内所有启用的控件

最佳实践[编辑 | 编辑源代码]

1. 保持分组逻辑清晰，每个分组应有明确的单一目的 2. 避免过度嵌套(通常不超过3层) 3. 移动设备上考虑使用更简单的分组方式 4. 复杂表单可结合<section>...</section>等语义元素增强结构

浏览器兼容性[编辑 | 编辑源代码]

所有现代浏览器都完全支持表单分组功能，包括：

Chrome 1+
Firefox 1+
Safari 3+
Edge 12+
Opera 9.5+