表单中的 <fieldset> 与 <legend> 标签的作用及分组方法
在 HTML 表单开发中，表单元素往往数量众多且功能各异，为了让结构更清晰、语义更明确，可以使用 <fieldset> 与 <legend> 标签对表单内容进行分组。这不仅有助于提升可访问性，还能让用户在视觉上快速理解不同区域的功能。
<fieldset> 标签的作用
<fieldset> 用于将表单中的相关元素包裹成一个逻辑组。浏览器通常会为它绘制一个边框，使组内元素在视觉上形成独立区块，从而区分不同类别的输入项。
它的主要作用包括：
将语义相关的表单控件聚合在一起，便于理解与维护。
配合屏幕阅读器等辅助技术，让视障用户感知表单的分组结构。
可通过 CSS 对分组进行统一样式控制，提高开发效率。
<legend> 标签的作用
<legend> 必须作为 <fieldset> 的第一个子元素出现，用于为分组提供标题说明。它相当于该组的“名称”，帮助用户和辅助设备快速识别分组的用途。
例如在一个用户信息表单中，可以用 <legend> 标注“基本信息”或“联系方式”，使结构一目了然。
如何使用 <fieldset> 与 <legend> 分组表单元素
基本用法是将一组相关的表单控件放入 <fieldset> 中，并在开始位置加入 <legend> 定义组名。下面给出一个完整示例：
<form action="/submit" method="post"> <fieldset> <legend>基本信息</legend> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br> <label for="age">年龄：</label> <input type="number" id="age" name="age"> </fieldset> <fieldset> <legend>联系方式</legend> <label for="email">邮箱：</label> <input type="email" id="email" name="email"><br> <label for="phone">电话：</label> <input type="tel" id="phone" name="phone"> </fieldset> <input type="submit" value="提交"> </form>
上述代码中，第一个 <fieldset> 包含姓名与年龄字段，并用 <legend> 标注为“基本信息”；第二个 <fieldset> 包含邮箱与电话字段，标注为“联系方式”。这样用户在填写时可以清楚分辨不同信息类别。
分组的最佳实践
按业务逻辑或功能划分分组，例如“账户信息”“支付信息”“收货地址”等。
每个 <fieldset> 尽量只包含一个 <legend>，避免混淆。
对于复杂表单，可以嵌套使用 <fieldset>，但需保持层次清晰，防止结构过于复杂影响可用性。
在涉及可访问性时，确保每个分组都有明确的 <legend>，以便屏幕阅读器准确朗读分组含义。
样式与扩展
虽然浏览器会为 <fieldset> 添加默认边框，但在实际项目中常通过 CSS 调整外观，以契合整体设计风格。例如隐藏边框、修改背景色、调整间距等。需注意保持足够的对比度，以免削弱可读性。
下面是一个简单的 CSS 示例，仅作结构展示，不应用于生产环境直接套用：
fieldset {
border: 1px solid #ccc;
padding: 10px 15px;
margin-bottom: 15px;
}
legend {
font-weight: bold;
padding: 0 5px;
}总结
<fieldset> 与 <legend> 是 HTML 表单中重要的结构与语义标签。<fieldset> 能将相关表单控件归为一组，形成视觉与逻辑上的独立区块；<legend> 则为此组提供明确的标题说明。合理使用它们不仅提升表单的可读性与可维护性，也能显著改善无障碍访问体验。在设计复杂表单时，应依据功能合理划分分组，并保持结构简洁明了，以帮助用户高效完成输入任务。