将相关元素分组到表单中:
<form action="/action_page.html">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
亲自试一试 »
下面有更多 "亲自试一试" 示例。
这个<legend>
标签定义了标题<字段集>元素。
Element | |||||
---|---|---|---|---|---|
<legend> | Yes | Yes | Yes | Yes | Yes |
这个<legend>
标签还支持HTML 中的全局属性。
这个<legend>
标签还支持HTML 中的事件属性。
让字段集标题向右浮动(使用 CSS):
<form action="/action_page.html">
<fieldset>
<legend style="float:right">Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
亲自试一试 »
使用 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.html">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
亲自试一试 »
HTML DOM 参考:图例对象
大多数浏览器都会显示<legend>
具有以下默认值的元素:
截取页面反馈部分,让我们更快修复内容!也可以直接跳过填写反馈内容!