HTML表单分组怎么实现_HTML中fieldset与legend标签的分组用法

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

HTML表单分组怎么实现_HTML中fieldset与legend标签的分组用法

2025-11-23

浏览次数：次

返回列表

fieldset 与 legend 标签用于表单分组，提升可读性和可访问性；fieldset 包裹相关控件，legend 作为其标题，应位于首位且每组仅一个，缺失将影响无障碍体验。

html表单分组怎么实现_html中fieldset与legend标签的分组用法

在HTML中，fieldset 和 legend 标签常用于对表单元素进行逻辑分组，提升可读性和可访问性。这种结构不仅让页面更清晰，还对屏幕阅读器等辅助工具友好。

使用 fieldset 进行表单分组

fieldset 标签会将一组相关的表单控件和标签组合在一起，浏览器通常会在周围绘制一个边框。

常见应用场景包括：用户基本信息、联系方式、兴趣爱好等分类填写项。

基本语法如下：

<fieldset>
  <legend>个人信息</legend>
  <label>姓名：<input type="text" name="name"></label>
  <label>年龄：<input type="number" name="age"></label>
</fieldset>

legend 标签的作用

legend 标签定义 fieldset 的标题，它会显示在边框的左上边缘位置，说明该组内容的用途。

Avatar AI

AI成像模型，可以从你的照片中生成逼真的4K头像

92 查看详情 Avatar AI

注意点：

每个 fieldset 最好只包含一个 legend
legend 应该是 fieldset 内的第一个子元素
缺少 legend 会影响无障碍体验

实际应用示例

以下是一个包含多个分组的注册表单片段：

<form>
  <fieldset>
    <legend>登录信息</legend>
    <label>用户名：<input type="text" name="username"></label>
    <label>密码：<input type="password" name="pwd"></label>
  </fieldset>

  <fieldset>
    <legend>兴趣爱好</legend>
    <label><input type="checkbox" name="hobby" value="read"> 阅读</label>
    <label><input type="checkbox" name="hobby" value="music"> 听音乐</label>
  </fieldset>
</form>

基本上就这些。合理使用 fieldset 与 legend，能让表单更有结构感，也更容易被各类设备正确解析。不复杂但容易忽略。