HTML的<fieldset>元素

HTML的<fieldset>元素是一个表单分组容器，用于将表单中的相关元素组合在一起，并可通过<legend>元素添加分组标题。

基本语法

1<fieldset>
2  <legend>分组标题</legend>
3  <!-- 表单元素 -->
4</fieldset>

主要特性

1. 视觉分组：默认会在分组周围显示边框，使表单结构更清晰
2. 语义化：提升表单可访问性，屏幕阅读器能识别分组关系
3. 禁用功能：通过disabled属性可禁用整个分组内的表单元素

使用示例

1<fieldset>
2  <legend>个人信息</legend>
3  <label>姓名：<input type="text" name="name"></label>
4  <label>年龄：<input type="number" name="age"></label>
5</fieldset>
6
7<fieldset disabled>
8  <legend>会员信息（当前不可用）</legend>
9  <label>会员等级：<input type="text" name="level"></label>
10</fieldset>

样式定制

可以通过CSS修改默认外观：

1fieldset {
2  border: 2px solid #3498db;
3  border-radius: 5px;
4  padding: 15px;
5  margin: 10px 0;
6}
7
8legend {
9  font-weight: bold;
10  color: #3498db;
11  padding: 0 10px;
12}

应用场景

1. 复杂表单的多部分信息收集（如注册表单中的个人信息、联系方式等）
2. 需要整体禁用/启用一组表单控件时
3. 提升表单的可访问性和可读性

注意事项

• 必须配合<legend>使用才能达到最佳可访问性效果
• 嵌套使用时要注意层级关系，避免过于复杂的结构
• 在现代布局中常与Flexbox/Grid配合使用