【HTML教程】HTML的fieldset标签|html入门知识
时间: 2025-01-27 10:40:27 浏览次数：12
常用的html标签汇总、以及操作过程中的一些bug问题解决方法，以下龙腾飞网络科技-小吴在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就查询搜索一下，实践出真章，做多了自然就熟悉了： 【定义和用法】 fieldset
常用的html标签汇总、以及操作过程中的一些bug问题解决方法，以下龙腾飞网络科技-小吴在建站实操中笔记记录，一路走来，一步步学习、总结、整理的一些资料，不用死记硬背，保存使用非常方便，实操过程中遇到了就查询搜索一下，实践出真章，做多了自然就熟悉了：
【定义和用法】
fieldset 标签用于在表单中分组相关元素。
fieldset 标签会在相关元素周围绘制一个框。
legend 标签为 fieldset 元素定义标题。
【实例】
例子 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">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="提交">
</fieldset></form>
例子 2
使用 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 设置】
大多数浏览器将使用以下默认值显示 fieldset 元素：
fieldset {
display: block;
margin-left: 2px;
margin-right: 2px;
padding-top: 0.35em;
padding-bottom: 0.625em;
padding-left: 0.75em;
padding-right: 0.75em;
border: 2px groove (internal value);}