HTML legend 语法
在 HTML 中，legend 标签通常搭配 fieldset 标签来一起实现表单分组。其中，legend 标签用于定义 fieldset 标签的标题部分。
语法：
<fieldset>
<legend>分组标题</legend>
……
</fieldset>说明：
fieldset 和 legend 这 2 个标签，主要有以下 3 个作用。
- 在代码层面上，增强表单结构的语义。
- 在用户层面上，提高用户体验。
- 使用 fieldset 标签的 disabled 属性，可以很方便禁用整个组中的表单元素。
注意:
- legend 标签只能放在 fieldset 标签的内部开头处。
- legend 标签主要用于包含文本内容，也可以包含 span、b、i 等标签来修饰文本。
HTML legend 摘要
| 属于 | HTML 表单 |
|---|---|
| 使用频率 | 高 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
HTML legend 示例
接下来，我们通过一个简单的例子来讲解一下 HTML legend 标签是如何使用的。
示例：legend 标签的基本用法
<!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 个标签之后，表单形成了非常美观的 “书签” 效果。
