legend 标签用于为 fieldset 元素定义标题，提升表单结构清晰度与可访问性。1. legend 必须作为 fieldset 的第一个子元素，用于标识分组标题；2. 可通过 css 修改其样式以更美观协调；3. 提供语义化信息，帮助屏幕阅读器理解表单逻辑结构；4. 支持通过 javascript 动态修改内容与样式；5. 默认显示在 fieldset 左上角，不建议随意更改位置；6. 在复杂表单中支持嵌套使用，增强层次结构；7. 当需要分组多个相关字段时应使用 legend，替代方案可用 div 与 h2 但需手动处理可访问性问题。
legend 标签用于为 fieldset 元素定义标题，通常在表单中用来分组相关的表单元素。它能让表单结构更清晰，用户体验更好。
图例标签详解：
legend 的基本用法
legend 必须是 fieldset 的第一个子元素。它定义了 fieldset 的标题。
立即学习“前端免费学习笔记（深入）”；
<fieldset> <legend>个人信息</legend> <label for="name">姓名：</label> <input type="text" id="name" name="name"><br><br> <label for="email">邮箱：</label> <input type="email" id="email" name="email"> </fieldset>
这段代码创建了一个名为 "个人信息" 的 fieldset，包含姓名和邮箱两个输入框。
legend 的样式定制
legend 标签默认样式可能不太美观，可以通过 CSS 进行定制。
<style>
fieldset {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
}
legend {
padding: 5px 10px;
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>
<fieldset>
<legend>联系方式</legend>
<label for="phone">电话：</label>
<input type="tel" id="phone" name="phone"><br><br>
<label for="address">地址：</label>
<input type="text" id="address" name="address">
</fieldset>这段代码修改了 fieldset 和 legend 的样式，使它们看起来更协调。
legend 的语义化作用
使用 legend 标签，不仅仅是为了美观，更重要的是语义化。它告诉浏览器和屏幕阅读器，这部分表单元素属于同一个逻辑分组。
legend 与可访问性
对于视力障碍用户，legend 标签可以帮助他们理解表单的结构。屏幕阅读器会朗读 legend 的内容，帮助用户理解每个字段的含义。所以，务必为每个 fieldset 添加有意义的 legend。
如何使用 JavaScript 操作 legend？
有时候，可能需要通过 JavaScript 动态修改 legend 的内容或样式。
<fieldset id="myFieldset">
<legend id="myLegend">默认标题</legend>
<input type="text" id="input1">
</fieldset>
<script>
const legend = document.getElementById('myLegend');
legend.textContent = '新的标题';
legend.addEventListener('click', function() {
legend.style.backgroundColor = 'yellow';
});
</script>这段代码首先获取 legend 元素，然后修改其文本内容，并添加一个点击事件，点击后改变背景颜色。
legend 的定位问题
legend 的默认位置是在 fieldset 的左上角。可以通过 CSS 的 float 或 position 属性来改变它的位置，但通常不建议这样做，因为可能会破坏表单的结构。
legend 内容为空的情况
如果 legend 的内容为空，浏览器通常会显示一个空的标题。虽然这不会导致错误，但最好避免这种情况，确保每个 legend 都有明确的含义。
legend 在复杂表单中的应用
在复杂的表单中，fieldset 和 legend 可以嵌套使用，形成更清晰的结构。
<fieldset>
<legend>用户信息</legend>
<fieldset>
<legend>基本信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><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><br>
<label for="phone">电话：</label>
<input type="tel" id="phone" name="phone">
</fieldset>
</fieldset>这段代码创建了一个包含两层 fieldset 的表单，结构更清晰。
什么时候应该使用 legend？
只要表单包含多个相关的字段，就应该考虑使用 fieldset 和 legend。这不仅可以提高用户体验，还可以增强表单的可访问性。
legend 的替代方案
虽然 legend 是定义 fieldset 标题的标准方式，但如果需要更灵活的布局，可以使用 div 和 h2 标签来模拟 fieldset 的效果。不过，这样做需要手动处理语义化和可访问性问题。
