HTML标签之legend的使用

简介

legend 标签用于定义 fieldset 元素的标题。 fieldset 元素通常用来将表单中的相关元素分组。

<fieldset>
   <legend>个人信息</legend>
   <label>用户名：<input type="text" name="username"></label>
   <label>密码：<input type="password" name="password"></label>
   <label>确认密码：<input type="password" name="password2"></label>
</fieldset>

在上述示例中， fieldset 元素用于将表单元素分组， legend 标签用于定义 fieldset 组的标题， label 标签则用于定义每个表单元素的标签。

语法

legend 标签在 fieldset 元素中使用，用于定义组标题。其语法如下：

<fieldset>
   <legend>组标题</legend>
   <!-- 表单元素 -->
</fieldset>

属性

legend 标签有如下属性：

• accesskey：定义元素的快速访问键，如Alt + H（Windows下）；
• align：定义标题的对齐方式，可取值为left、center 或 right。

<fieldset>
   <legend accesskey="h" align="left">组标题</legend>
   <!-- 表单元素 -->
</fieldset>

样式

legend 标签支持 CSS 样式，可以通过 CSS 修改组标题的样式，如颜色、字体等。以下是一些常用的样式属性：

• color：定义元素前景色，如颜色值、颜色名等；
• font-size：定义元素字体大小，单位可以是 px、pt 等；
• font-family：定义元素字体族名，如 Arial、Helvetica 等；
• font-weight：定义元素字体粗细，取值可以是 normal、bold 等。

<style>
    legend {
        color: red;
        font-size: 20px;
        font-family: Arial;
        font-weight: bold;
    }
</style>

<fieldset>
   <legend>组标题</legend>
   <!-- 表单元素 -->
</fieldset>

注意事项

• fieldset 元素必须包含一个 legend 元素，以方便用户识别和访问表单数据；
• legend 元素应该放在 fieldset 元素的开头处，以便正确显示表单元素的分组和标题；
• 不要使用 fieldset 元素和 legend 元素来分组和描述非表单元素的内容。

总结

legend 标签用于在 fieldset 元素中定义组标题，通常用于将表单中的相关元素分组，帮助用户更快地理解表单数据的结构和意义。同时，通过样式表，可以对 legend 元素进行更细致的样式修饰，以更好地适应各种网页设计需求。