fieldset教程：HTML5 Fieldset教程，轻松掌握表单分组与语义化

来源：网络作者：日期：2025-11-07 09:37:49

什么是Fieldset？

Fieldset是HTML5中用于分组表单元素的重要语义化标签，它通常与legend标签配合使用，为表单区域提供清晰的视觉分隔和语义组织，Fieldset可以将相关表单控件组合在一起,提升用户体验和页面可访问性。

基本语法结构

<form>
  <fieldset>
    <legend>表单分组标题</legend>
    <!-- 表单控件 -->
    <label>姓名：</label>
    <input type="text" name="username">
    <label>邮箱：</label>
    <input type="email" name="email">
  </fieldset>
  <fieldset>
    <legend>账号设置</legend>
    <!-- 其他表单控件 -->
  </fieldset>
</form>

核心特性与优势

语义化分组：明确区分不同功能的表单区域
视觉隔离：默认样式提供边框分隔，增强可读性
可访问性：为屏幕阅读器提供自然的分组导航
响应式友好：便于在不同设备上保持良好的布局结构

实用示例

<!DOCTYPE html>
<html>
<head>
  <style>
    fieldset {
      border: 1px solid #ddd;
      padding: 15px;
      margin-bottom: 15px;
      border-radius: 5px;
    }
    legend {
      font-weight: bold;
      font-size: 1.2em;
      color: #333;
    }
    .error {
      border-color: red;
    }
  </style>
</head>
<body>
  <h1>用户注册表单</h1>
  <form id="registrationForm">
    <fieldset id="personalInfo">
      <legend>个人信息</legend>
      <div>
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name">
      </div>
      <div>
        <label for="email">电子邮箱：</label>
        <input type="email" id="email" name="email">
      </div>
    </fieldset>
    <fieldset id="accountSettings">
      <legend>账号设置</legend>
      <div>
        <label for="username">用户名：</label>
        <input type="text" id="username" name="username">
      </div>
      <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password">
      </div>
      <div>
        <label>
          <input type="checkbox" name="terms"> 同意服务条款
        </label>
      </div>
    </fieldset>
    <button type="submit">注册</button>
  </form>
</body>
</html>