【HTML教程】HTML的legend标签|html入门知识
【HTML教程】HTML的legend标签|html入门知识
攻城狮与产品喵
发布于 2025-11-19 17:05:39
发布于 2025-11-19 17:05:39
【定义和用法】
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;}本文参与 腾讯云自媒体同步曝光计划，分享自微信公众号。
原始发表：2025-10-31，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
