HTML <legend> 标签

2025年3月25日 | 阅读 4 分钟

HTML <legend> 标签用于为其父元素（如 <fieldset>）插入标题或说明。<legend> 元素必须是 <fieldset> 元素的第一个子元素。

通过将 <legend> 标签与 <form> 元素一起使用，可以很容易地理解分组表单元素的用途。

语法

在 html 页面中，标题使用以下语法。

<fieldset>
<legend> Content........<legend>  
<!-- other content -->
</fieldset>

规范

以下是关于 HTML <legend> 标签的一些规范

显示	块
开始标签/结束标签	开始和结束标签均有
用途	文本

示例

以下示例多次展示了带有默认设置和 CSS 属性的 legend 标签，以供用户交互。

示例 1：带有默认设置的 HTML legend 标签

<!DOCTYPE html>
<html>
<head>
<title>Legend Tag</title>
</head>
<body>
 <h1>Example of Legend Tag</h1>	
 <form>
              <fieldset>
		<legend>Employee basic information:</legend>
		<label>First Name</label><br>
		<input type="text" name="fname"><br>
		<label>Last Name</label><br>
		<input type="text" name="lname"><br>
		<label>Enter Email</label><br>
		<input type="email" name="email"><br><br>
		<input type="Submit"><br>
                </fieldset>
</form>
</body>
</html>

输出

示例 2：带有 CSS 的 html legend 标签

该示例展示了带有背景、外边距、内边距、边框和其他 CSS 属性及其值的 HTML legend 标签。

<!DOCTYPE html>
<html>
<head>
<title> HTML Legend Tag </title>
<style>
legend {
display: block;
padding-left: 24px;
padding-right: 24px;
padding-top: 5px;
padding-bottom: 5px;
border: 4px solid black;
background-color: orange;
color: navy;
}
</style>
</head>
<body>
<h3> Basic Example of Html Legend Tag  </h3>
<h4> Html Legend Tag with CSS </h4>
<form>
<fieldset>
<legend> Student Information: </legend>
<label> Username First Name </label> <br>
<input type = "text" name = "fname"> <br>
<label> Username Last Name </label> <br>
<input type = "text" name = "lname"> <br>
<label> Username Email </label> <br>
<input type = "email" name = "email"> <br><br>
<input type = "Submit" value = "Save"> <br>
</fieldset>
</form>
</body>
</html>

输出

输出显示带有所需样式的 legend 标签。

示例 3：右对齐的 html legend 标签

该示例展示了右对齐和各种 CSS 属性的 legend 标签。吸引人的 legend 标签显示在块的右侧。

<!DOCTYPE html>
<html>
<head>
<title> HTML Legend Tag </title>
<style>
legend {
display: block;
padding-left: 24px;
padding-right: 24px;
padding-top: 5px;
padding-bottom: 5px;
border: 4px solid black;
background-color: orange;
color: navy;
align: bottom;

}
</style>
</head>
<body>
<h3> Example of Html Legend Tag  </h3>
<h4> Html Legend Tag with right align </h4>
<form>
<fieldset>
<legend align="right"> Student Information: </legend>
<label> Username First Name </label> <br>
<input type = "text" name = "fname"> <br>
<label> Username Last Name </label> <br>
<input type = "text" name = "lname"> <br>
<label> Username Email </label> <br>
<input type = "email" name = "email"> <br><br>
<input type = "Submit" value = "Save"> <br>
</fieldset>
</form>
</body>
</html>

输出

输出显示带有所需样式的 legend 标签。

示例 4：多个带对齐的 html legend 标签

该示例展示了两个带有顶部和右侧对齐以及各种 CSS 属性的 legend 标签。吸引人的 legend 标签显示了主要信息标签和表单标签。

<!DOCTYPE html>
<html>
<head>
<title> HTML Legend Tag </title>
<style>
#legend {
display: block;
padding-left: 24px;
padding-right: 24px;
padding-top: 5px;
padding-bottom: 5px;
border: 4px solid black;
background-color: orange;
color: navy;
}
</style>
</head>
<body>
<h3> Example of Html Legend Tag  </h3>
<h4> Html Legend Tag with right and top align </h4>
<form>
<fieldset>
<legend align = "top" id = "legend"> Student Information: </legend>
<label> Username First Name </label> <br>
<input type = "text" name = "fname"> <br>
<label> Username Last Name </label> <br>
<input type = "text" name = "lname"> <br>
<label> Username Email </label> <br>
<input type = "email" name = "email"> <br><br>
<input type = "Submit" value = "Save"> <br>
</fieldset>
<br>
<fieldset>
<legend align = "right"> Write Student Information: </legend>
we can provide the student information for the user interactive data!
</fieldset>
</form>
</body>
</html>

输出

输出显示带有所需样式的 legend 标签。

示例 5：层级函数中的多个 HTML legend 标签

该示例展示了两个带有各种 CSS 属性的 legend 标签。吸引人的 legend 标签显示了主要表单标签，另一个 legend 标签显示了第一个标签内部的内容。

<!DOCTYPE html>
<html>
<head>
<title> HTML Legend Tag </title>
<style>
#legend1 {
display: block;
padding-left: 24px;
padding-right: 24px;
padding-top: 5px;
padding-bottom: 5px;
border: 4px solid black;
background-color: orange;
color: navy;
align: bottom;
}
#legend2 {
display: block;
padding-left: 20px;
padding-right: 20px;
padding-top: 4px;
padding-bottom: 4px;
border: 2px solid black;
background-color: yellow;
color: navy;
align: bottom;
}
</style>
</head>
<body>
<h3> Example of Html Legend Tag  </h3>
<h4> Various Html Legend Tag </h4>
<form>
<fieldset>
<legend align="right" id = "legend1"> Student Information: </legend>
<label> Username First Name </label> <br>
<input type = "text" name = "fname"> <br>
<label> Username Email </label> <br>
<input type = "email" name = "email"> <br>
<input type = "Submit" value = "Save"> <br><br>
<form>
<fieldset>
<legend id = "legend2"> Do you have a Id Card? </legend>
<input type = "radio" id = "yess">
<label for = "yess"> Yes </label>
<input type = "radio" id = "not">
<label for = "not"> No </label>
</fieldset>
</form>
</fieldset>
</form>
</body>
</html>

输出

输出显示带有所需样式的 legend 标签。

属性

这些属性支持标签在全局和事件函数中的位置。

标签特定属性

特定于标签的属性有助于在 fieldset 的所需侧显示 legend 标签。

属性	值	描述
align	top bottom (底部) 左右	它指定了标题的对齐方式。（HTML5 中不支持）底部对齐方式不支持网络浏览器。

全局属性

<legend> 标签支持 HTML 中的全局属性

事件属性

<legend> 标签支持 HTML 中的事件属性。

支持的浏览器

以下浏览器支持 HTML legend 标签，并且除了底部对齐之外，其他对齐方式都支持。

元素	Chrome	IE	Firefox	Opera	Safari
<legend>	是的	是的	是的	是的	是的

下一主题HTML 列表

HTML <legend> 标签

语法

规范

示例

属性

标签特定属性

全局属性

事件属性

支持的浏览器

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML <legend> 标签

语法

规范

示例

属性

标签特定属性

全局属性

事件属性

支持的浏览器

相关帖子

HTML mark 标签

HTML time 标签

HTML input 标签

HTML ins 标签

HTML map 标签

HTML 5 标签

HTML meta 标签

HTML main 标签

HTML select 标签

HTML link 标签

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器