HTML 的 ＜legend＞ 元素

1. 什么是 <legend> 元素

<legend> 是 HTML 中用于为 <fieldset> 表单分组提供标题说明的元素。它必须作为 <fieldset> 的第一个子元素出现，用于描述该分组内表单控件的共同用途。

<form>
<fieldset>
<legend>个人信息</legend>
<label>姓名：<input type="text" name="name"></label>
<label>年龄：<input type="number" name="age"></label>
</fieldset>
</form>

浏览器默认会将 <legend> 的内容显示在 <fieldset> 边框的左上角，视觉上起到分组标题的作用。

2. 基本语法与规则

<legend> 是一个双标签元素，基本语法如下：

<fieldset>
<legend>分组标题文本</legend>
<!– 表单控件 –>
</fieldset>

使用 <legend> 时需要注意以下几点：

• <legend> 必须直接放在 <fieldset> 内部，且建议作为第一个子元素。
• 一个 <fieldset> 内通常只使用一个 <legend>。
• <legend> 是块级元素，默认宽度占满整个 <fieldset>。
• 如果 <fieldset> 设置了 disabled 属性，<legend> 内的表单控件不会被禁用。

3. 为什么使用 <legend>

使用 <legend> 主要有以下几个好处：

• 提升可访问性：屏幕阅读器会将 <legend> 的内容与分组内的表单控件关联起来，帮助视障用户理解每个输入框的用途。
• 语义化清晰：将相关的表单控件组织在一起，代码结构更易读、易维护。
• 改善用户体验：用户能快速理解一组表单字段的共同主题，填写时更有方向感。

<form>
<fieldset>
<legend>配送地址</legend>
<label>收件人：<input type="text" name="receiver"></label>
<label>电话：<input type="tel" name="phone"></label>
<label>地址：<input type="text" name="address"></label>
</fieldset>
</form>

4. 与 <fieldset> 的配合使用

<legend> 必须与 <fieldset> 配合使用才有意义。<fieldset> 负责将相关控件分组，<legend> 则为该分组提供说明文字。

<form>
<fieldset>
<legend>账号信息</legend>
<label>用户名：<input type="text" name="username"></label>
<label>密码：<input type="password" name="password"></label>
</fieldset>

<fieldset>
<legend>个人资料</legend>
<label>昵称：<input type="text" name="nickname"></label>
<label>性别：
<select name="gender">
<option value="male">男</option>
<option value="female">女</option>
</select>
</label>
</fieldset>
</form>

5. 样式化 <legend>

可以通过 CSS 对 <legend> 进行样式定制，使其更符合页面整体设计：

legend {
font-weight: bold;
color: #333;
padding: 0 8px;
background: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;
}

<form>
<fieldset>
<legend>联系方式</legend>
<label>邮箱：<input type="email" name="email"></label>
<label>手机：<input type="tel" name="phone"></label>
</fieldset>
</form>

6. 可访问性最佳实践

为了让 <legend> 发挥最大的可访问性价值，建议遵循以下实践：

• 标题文本应简洁明确，直接描述分组内控件的共同用途。
• 不要使用空的 <legend>，否则屏幕阅读器无法提供分组说明。
• 避免在 <legend> 中放置复杂的交互元素，保持其作为纯文本标题的语义。
• 当表单较长时，合理使用多个 <fieldset> + <legend> 组合，帮助用户理清填写步骤。

<form>
<fieldset>
<legend>第一步：基本信息</legend>
<label>姓名：<input type="text" name="name"></label>
</fieldset>

<fieldset>
<legend>第二步：联系方式</legend>
<label>电话：<input type="tel" name="phone"></label>
</fieldset>
</form>

7. 总结

<legend> 是 HTML 表单中一个简单但重要的语义化元素，它与 <fieldset> 配合，为表单分组提供清晰的标题说明。合理使用 <legend> 不仅能提升代码的可读性和可维护性，还能显著改善表单的可访问性，让所有用户都能更顺畅地完成表单填写。