HTML <fieldset> 标签用于将 HTML 元素分组，它可以帮助创建结构化和组织良好的文档。使用 <fieldset> 标签可以将表单中的相关字段分组，以更有条理的方式显示表单字段。
在本实验中，我们将演示如何使用 <fieldset> 标签来创建结构化和组织良好的表单。
注意：你可以在
index.html中练习编码，并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的“Go Live”以在端口 8080 上运行 Web 服务。然后，你可以刷新 Web 8080 标签以预览网页。
创建一个名为 index.html 的文件，并编写 HTML 页面的基本结构。
<!doctype html>
<html>
<head>
<title>使用 Fieldset 标签创建表单</title>
</head>
<body></body>
</html>在 HTML 的 body 中添加一个表单元素，然后使用 <fieldset> 标签将相关的表单字段分组。我们还将为表单元素添加 label 标签，以便为输入字段添加描述。
<form>
<fieldset>
<legend>用户信息</legend>
<label for="fname">名字：</label>
<input type="text" id="fname" name="firstname" /><br /><br />
<label for="lname">姓氏：</label>
<input type="text" id="lname" name="lastname" /><br /><br />
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" /><br /><br />
</fieldset>
<fieldset>
<legend>账户信息</legend>
<label for="uname">用户名：</label>
<input type="text" id="uname" name="username" /><br /><br />
<label for="pass">密码：</label>
<input type="password" id="pass" name="password" /><br /><br />
</fieldset>
<input type="submit" value="提交" />
</form>以上代码将创建一个分为两个字段组（fieldset）的表单。第一个字段组包含用户的个人信息，第二个字段组包含账户信息。你可能会注意到，我们使用了 label 标签为字段提供了一些上下文说明。
我们可以使用 CSS 为 fieldset 添加样式，使其具有更好的设计效果。我们可以添加边框、背景颜色和一些内边距，让 fieldset 看起来更美观。
<style>
fieldset {
padding: 10px;
border: 1px solid #c0c0c0;
border-radius: 4px;
margin: 5px;
background-color: #f8f8f8;
}
</style>在浏览器中打开 HTML 文件，查看表单并测试其效果。
Fieldset 标签用于创建结构化和组织良好的文档，特别适用于创建表单。使用 label 标签可以为输入字段提供上下文说明。Fieldset 标签将相关的表单字段分组，并为这些字段添加边框。最后，通过 CSS 样式为 fieldset 提供设计，使其看起来更加美观。
