【HTML教程】HTML的legend标签|html入门知识
时间: 2025-02-17 18:14:34 浏览次数：14
常用的html标签汇总、以及操作过程中的一些bug问题解决方法，以下龙腾飞网络科技-小吴在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就查询搜索一下，实践出真章，做多了自然就熟悉了：【定义和用法】legend 标签定义 fieldset 元素 的标题(caption
常用的html标签汇总、以及操作过程中的一些bug问题解决方法，以下龙腾飞网络科技-小吴在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就查询搜索一下，实践出真章，做多了自然就熟悉了：
【定义和用法】
legend 标签定义 fieldset 元素 的标题(caption)。
【实例】
例子 1
在表单中对相关元素进行分组：
<form action="/action_page.php"> <fieldset> <legend>个人信息：</legend> <label for="fname">名字：</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">姓氏：</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">电邮：</label> <input type="email" id="email" name="email"><br><br> <label for="birthday">生日：</label> <input type="date" id="birthday" name="birthday"><br><br> <input type="submit" value="提交"> </fieldset> </form>
例子 2
让字段集标题向右浮动(使用 CSS)：
<form action="/action_page.php"> <fieldset> <legend style="float:right">个人信息：</legend> <label for="fname">名字：</label> <input type="text" id="fname" name="fname"><br><br> <label for="lname">姓氏：</label> <input type="text" id="lname" name="lname"><br><br> <label for="email">电邮：</label> <input type="email" id="email" name="email"><br><br> <label for="birthday">生日：</label> <input type="date" id="birthday" name="birthday"><br><br> <input type="submit" value="提交"> </fieldset> </form>
例子 3
使用 CSS 设置 fieldset 和 legend 的样式：
<html>
<head>
<style>
fieldset {
background-color: #eeeeee;
}
legend {
background-color: gray;
color: white;
padding: 5px 10px;
}
input {
margin: 5px;
}
</style>
</head>
<body>
<form action="/action_page.php">
<fieldset>
<legend>个人信息：</legend>
<label for="fname">名字：</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">姓氏：</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">电邮：</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">生日：</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="提交">
</fieldset>
</form>
</body>
</html>【默认的 CSS 设置】
大多数浏览器将使用以下默认值显示 legend 元素：
legend {
display: block;
padding-left: 2px;
padding-right: 2px;
border: none;}