编辑“︁HTML表单分组”︁

= HTML表单分组 =

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

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

<syntaxhighlight lang="html">
<fieldset>
  <legend>分组标题</legend>
  <!-- 表单控件放在这里 -->
</fieldset>
</syntaxhighlight>

=== 元素说明 ===
* '''{{tag|fieldset}}'''：创建分组容器，默认带有边框样式
* '''{{tag|legend}}'''：定义分组的标题，显示在边框的左上角

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

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

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

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

<syntaxhighlight lang="html">
<fieldset>
  <legend>配送信息</legend>
  
  <fieldset>
    <legend>地址</legend>
    <!-- 地址字段 -->
  </fieldset>
  
  <fieldset>
    <legend>配送选项</legend>
    <!-- 配送选项 -->
  </fieldset>
</fieldset>
</syntaxhighlight>

=== 禁用整个分组 ===
通过{{tag|fieldset}}的<code>disabled</code>属性可以一次性禁用组内所有控件：

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

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

<syntaxhighlight lang="css">
fieldset {
  border: 2px dashed #ccc;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 15px;
}

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

== 无障碍考虑 ==
* 屏幕阅读器会朗读{{tag|legend}}内容作为分组标识
* 确保{{tag|legend}}简洁且具有描述性
* 避免仅依赖视觉分组(如只使用边框)，应始终使用语义化元素

== 实际应用案例 ==
=== 电商结账表单 ===
<mermaid>
flowchart TD
    A[结账表单] --> B[收货信息]
    A --> C[支付信息]
    B --> D[联系人]
    B --> E[配送地址]
    C --> F[信用卡]
    C --> G[账单地址]
</mermaid>

对应HTML结构：
<syntaxhighlight lang="html">
<form>
  <fieldset>
    <legend>收货信息</legend>
    <!-- 联系人字段 -->
    <fieldset>
      <legend>配送地址</legend>
      <!-- 地址字段 -->
    </fieldset>
  </fieldset>

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

=== 问卷调查表单 ===
复杂问卷通常需要多级分组：
<syntaxhighlight lang="html">
<fieldset>
  <legend>基本信息</legend>
  <!-- 姓名/年龄等 -->
</fieldset>

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

== 技术规范 ==
根据HTML5标准：
* {{tag|fieldset}}的<code>name</code>属性可用于脚本引用
* 分组内的第一个{{tag|legend}}才会被作为正式标题
* 表单提交时会包含分组内所有启用的控件

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

== 浏览器兼容性 ==
所有现代浏览器都完全支持表单分组功能，包括：
* Chrome 1+
* Firefox 1+
* Safari 3+
* Edge 12+
* Opera 9.5+

== 相关概念 ==
* 表单验证
* 无障碍表单设计
* CSS表单样式
* JavaScript表单操作

通过合理使用表单分组，可以显著提升复杂表单的用户体验和可维护性。

[[Category:编程语言]]
[[Category:HTML]]
[[Category:HTML表单]]