HTML fieldset 语法
在 HTML 中，fieldset 标签用于对表单元素进行分组。它将表单相关元素分成一组，并添加边框和标题，从而让表单结构更清晰、易于理解。
语法：
<fieldset>
<legend>分组标题</legend>
……
</fieldset>说明：
fieldset 标签通常搭配 legend 标签一起使用，它们有以下 3 个作用。
- 在代码层面上，增强表单结构的语义。
- 在用户层面上，提高用户体验。
- 使用 fieldset 标签的 disabled 属性，可以很方便禁用整个组中的表单元素。
fieldset 标签常用的属性有 3 个，如下表所示。
| 属性 | 说明 |
|---|---|
| name | 分组的名称，用于标识 |
| form | 所属表单的 ID |
| disabled | 是否禁用 |
HTML fieldset 摘要
| 属于 | HTML 表单 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML fieldset 示例
接下来，我们通过一个简单的例子来讲解一下 HTML fieldset 标签是如何使用的。
示例：fieldset 标签的基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form method="post" action="/">
<fieldset>
<legend>登录绿叶网</legend>
<p>
<label>账号：<input type="text" name="name"></label>
</p>
<p>
<label>密码：<input type="password" name="password"></label>
</p>
<p>
<label><input type="checkbox" name="remember-me">记住我</label>
<button type="submit">登录</button>
</p>
</fieldset>
</form>
</body>
</html>页面效果如下图所示。
分析：
从页面效果可以看出，使用了 fieldset 和 legend 这 2 个标签之后，表单形成了非常美观的 “书签” 效果。
