HTML 字段集 - <fieldset>

什么是 <fieldset> 标签？

<fieldset> 是HTML表单中的字段集元素，用于将相关的表单控件分组，形成一个逻辑区域。它通常与 <legend> 标签配合使用，为分组提供标题。

基本语法

html 
<fieldset>
  <legend>个人信息</legend>
  <!-- 相关表单控件 -->
</fieldset>

核心属性

disabled 属性

disabled 属性禁用整个字段集，字段集中的所有表单控件都会被禁用，用户无法与之交互，且禁用的字段不会被提交。

示例：

html 
<fieldset disabled>
  <legend>旧信息（不可编辑）</legend>
  <label for="old-name">姓名：</label>
  <input type="text" id="old-name" name="old-name" value="张三">
</fieldset>

form 属性

form 属性指定字段集属于哪个表单，值为表单的 id。

示例：

html 
<form id="myForm" action="/submit" method="POST">
  <!-- 表单内容 -->
</form>

<fieldset form="myForm">
  <legend>联系信息</legend>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">
</fieldset>

name 属性

name 属性为字段集指定名称，用于标识分组。

示例：

html 
<fieldset name="personal-info">
  <legend>个人信息</legend>
  <!-- 表单控件 -->
</fieldset>

与 <legend> 标签配合使用

<fieldset> 标签通常与 <legend> 标签配合使用，<legend> 标签为字段集提供标题，描述分组的内容。

示例：

html 
<form action="/register" method="POST">
  <fieldset>
    <legend>个人信息</legend>
    
    <div class="form-group">
      <label for="name">姓名：</label>
      <input type="text" id="name" name="name" required>
    </div>
    
    <div class="form-group">
      <label for="age">年龄：</label>
      <input type="number" id="age" name="age" min="1" max="120">
    </div>
  </fieldset>
  
  <fieldset>
    <legend>联系信息</legend>
    
    <div class="form-group">
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email" required>
    </div>
    
    <div class="form-group">
      <label for="phone">电话：</label>
      <input type="tel" id="phone" name="phone">
    </div>
  </fieldset>
  
  <button type="submit">注册</button>
</form>

重要性和优势

使用 <fieldset> 标签有以下几个重要优势：

1. 提高表单可读性

  • 将相关控件分组，使表单结构更清晰
  • 用户可以更容易地理解表单的组织方式

2. 增强可访问性

  • 屏幕阅读器：屏幕阅读器可以识别字段集，帮助用户理解表单结构
  • 键盘导航：用户可以更方便地在表单组之间导航

3. 视觉组织

  • 浏览器通常会为字段集添加边框和内边距，在视觉上区分不同的分组
  • 可以通过CSS自定义字段集的样式

4. 批量操作

  • 使用 disabled 属性可以一次性禁用整个分组的控件

最佳实践

  1. 合理分组：将相关的表单控件分组，避免过度使用字段集

  2. 使用 <legend> 提供标题：为每个字段集提供清晰的标题，描述分组内容

  3. 考虑可访问性：确保字段集的使用有助于提高表单的可访问性

  4. 使用CSS自定义样式：通过CSS自定义字段集的外观，使其与网站设计保持一致

  5. 避免嵌套过深：避免过多层嵌套字段集，这会降低表单的可读性

示例：

html 
<form action="/survey" method="POST">
  <fieldset>
    <legend>个人信息</legend>
    
    <div class="form-row">
      <div class="form-group">
        <label for="first-name">名：</label>
        <input type="text" id="first-name" name="first-name" required>
      </div>
      
      <div class="form-group">
        <label for="last-name">姓：</label>
        <input type="text" id="last-name" name="last-name" required>
      </div>
    </div>
    
    <div class="form-group">
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email" required>
    </div>
  </fieldset>
  
  <fieldset>
    <legend>兴趣爱好</legend>
    
    <div class="form-group">
      <label>您的兴趣爱好：</label>
      <div class="checkbox-group">
        <label for="hobby-reading">
          <input type="checkbox" id="hobby-reading" name="hobby" value="reading"> 阅读
        </label>
        <label for="hobby-music">
          <input type="checkbox" id="hobby-music" name="hobby" value="music"> 音乐
        </label>
        <label for="hobby-sports">
          <input type="checkbox" id="hobby-sports" name="hobby" value="sports"> 运动
        </label>
      </div>
    </div>
  </fieldset>
  
  <fieldset>
    <legend>反馈信息</legend>
    
    <div class="form-group">
      <label for="feedback">您的反馈：</label>
      <textarea id="feedback" name="feedback" rows="4" cols="50"></textarea>
    </div>
  </fieldset>
  
  <button type="submit">提交</button>
</form>

CSS样式化

可以使用CSS对 <fieldset> 和 <legend> 标签进行样式化，例如：

css 
fieldset {
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 15px;
  margin-bottom: 20px;
  background-color: #f9f9f9;
}

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

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input, textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.checkbox-group {
  margin-top: 5px;
}

.checkbox-group label {
  display: inline-block;
  margin-right: 15px;
}

浏览器兼容性

所有现代浏览器都支持 <fieldset> 标签及其常用属性。

总结

<fieldset> 标签是HTML表单中用于分组相关控件的重要元素。通过与 <legend> 标签配合使用，可以创建结构清晰、易于理解的表单布局，提高表单的可读性和可访问性。正确使用 <fieldset> 标签，可以使表单更加用户友好，特别是对于包含大量控件的复杂表单。

最后更新：2026-02-07