在开发复杂的HTML表单时，如果表单项过多，页面往往会显得杂乱无章，用户体验极差。为了提升表单的可读性和语义化，HTML提供了专门用于表单分组的标签：<fieldset> 和 <legend>。本文将详细介绍这两个标签的用法，并教你如何优雅地对表单进行分组。
一、 认识 <fieldset> 和 <legend> 标签
<fieldset>标签：用于将表单内的相关元素分组。浏览器默认会在分组的内容周围绘制一个边框，视觉上将它们框起来，告诉用户这些表单控件属于同一个逻辑单元。<legend>标签：用于为<fieldset>元素定义标题。它必须作为<fieldset>的第一个子元素使用，标题会默认显示在边框的左上角，清晰地说明该分组的内容。
二、 基本语法与用法
下面是一个最简单的表单分组示例，展示了 <fieldset> 和 <legend> 的基本嵌套关系：
<form> <fieldset> <legend>用户登录</legend> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br><br> <label for="password">密码：</label> <input type="password" id="password" name="password"> </fieldset> <input type="submit" value="登录"> </form>
在这个例子中，用户名和密码输入框被包裹在同一个分组中，边框上方会显示“用户登录”的标题。
三、 如何使用它们对复杂表单进行分组？
当表单包含多种不同类型的信息（如个人信息、联系方式、工作经历等）时，使用多个 <fieldset> 进行分组是非常必要的。这不仅能改善视觉排版，还能让代码结构更加清晰。
你可以将上述代码复制到 www.ipipp.com 提供的在线编辑器中进行实时预览和测试。
<form> <!-- 第一组：基本信息 --> <fieldset> <legend>基本信息</legend> <label>姓名：<input type="text" name="name"></label><br><br> <label>年龄：<input type="number" name="age"></label> </fieldset> <br> <!-- 第二组：联系方式 --> <fieldset> <legend>联系方式</legend> <label>邮箱：<input type="email" name="email"></label><br><br> <label>电话：<input type="tel" name="phone"></label> </fieldset> <br> <input type="submit" value="提交"> </form>
通过这种方式，原本冗长的表单被拆分成了逻辑清晰的模块，用户填写时更有针对性。
四、 进阶技巧：<fieldset> 的 disabled 属性
<fieldset> 标签支持一个非常有用的属性：disabled。当为 <fieldset> 添加 disabled 属性时，该分组内的所有表单控件（如输入框、下拉菜单、按钮等）都会被禁用。用户无法与之交互，且这些数据不会被提交到服务器。
<form> <fieldset disabled> <legend>高级会员专属功能（您尚未开通）</legend> <label>专属域名：<input type="text" name="domain"></label><br><br> <label>云盘空间：<input type="number" name="storage"> GB</label> </fieldset> <input type="submit" value="提交"> </form>
五、 美化分组样式
默认情况下，浏览器自带的 <fieldset> 边框样式比较粗糙。我们可以通过CSS来美化它，使其更符合现代网页的设计风格。
fieldset {
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
background-color: #fafafa;
}
legend {
font-size: 18px;
font-weight: bold;
color: #333;
padding: 0 10px;
/* 让legend背景透明，融入fieldset背景 */
background-color: transparent;
}六、 无障碍访问（Accessibility）的意义
使用 <fieldset> 和 <legend> 不仅仅是为了视觉上的美观，更重要的是它们对无障碍访问（a11y）至关重要。当屏幕阅读器遇到分组时，会朗读 <legend> 的内容，帮助视障用户理解当前表单区域的上下文。例如，当焦点进入“联系方式”分组中的电话输入框时，屏幕阅读器可能会朗读“联系方式，电话”，从而避免用户混淆。
总结
合理使用 <fieldset> 和 <legend> 标签，不仅能通过视觉上的边框和标题让长表单变得井井有条，还能提升表单的语义化和无障碍体验。在实际开发中，遇到包含多个功能模块的复杂表单时，请务必使用它们进行分组，并结合CSS打造出既美观又易用的表单界面。