htmlfieldset：HTML 中的标签，表单分组的艺术

来源：网络作者：日期：2025-11-07 11:22:00

在 HTML 中，<fieldset> 标签用于将表单中的相关控件（如输入框、按钮等）组合在一起，通常与 <legend> 标签配合使用，为分组提供标题，本文将深入探讨 <fieldset> 的用途、语法、示例及其在现代网页开发中的最佳实践。

`<fieldset>` 的定义与用途

<fieldset> 是 HTML5 中的标准元素，用于定义表单中的一个区域，通常包含一组关联的控件（如输入字段、按钮等），它的主要作用是将表单元素分组，增强页面的语义化和可访问性。

一个登录表单可以将用户名、密码和提交按钮用 <fieldset> 分组，而将注册信息用另一个 <fieldset> 分组。

语法结构

<fieldset> 标签通常与 <legend> 标签一起使用，<legend> 为分组提供标题，基本语法如下：

<form>
  <fieldset>
    <legend>分组标题</legend>
    <!-- 表单控件 -->
  </fieldset>
</form>

示例演示

以下是一个简单的示例,展示如何使用 <fieldset> 和 <legend>：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">fieldset 示例</title>
  <style>
    fieldset {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px;
      border-radius: 5px;
    }
    legend {
      font-weight: bold;
      font-size: 1.2em;
    }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>个人资料</legend>
      <label for="name">姓名：</label>
      <input type="text" id="name" name="name"><br><br>
      <label for="email">邮箱：</label>
      <input type="email" id="email" name="email"><br><br>
    </fieldset>
    <fieldset>
      <legend>联系方式</legend>
      <label for="phone">电话：</label>
      <input type="tel" id="phone" name="phone"><br><br>
      <label for="address">地址：</label>
      <input type="text" id="address" name="address"><br><br>
    </fieldset>
    <input type="submit" value="提交">
  </form>
</body>
</html>

在这个示例中,表单被分为两个分组：“个人资料”和“联系方式”，每个分组都有自己的标题和控件。