HTML <fieldset> 标签用于对 Web 窗体中的多个控件和标签进行分组。它是 HTML5 中引入的新标签，此元素用作对表单元素进行分组的容器。HTML <legend> 标签也可用于 lebel 该组。
语法
<fieldset> ... </fieldset>
属性
<fieldset> 标签支持 HTML 的 全局属性 和 事件属性。也接受下面列出的一些特定属性。
| 属性 | 值 | 描述 |
|---|---|---|
| disabled | disabled | 指定应禁用一组相关的表单元素。 |
| form | form_id | 指定属于 fieldset 的表单。 |
| name | text | 指定字段集的名称。 |
<fieldset> 标签示例
下面的示例将说明<fieldset> 标签的使用，在哪里，何时以及如何使用它在表单中创建fieldset。
创建<fieldset> 标签
在下面的程序中，我们使用 HTML <fieldset> 标签对 Web 表单中的多个控件进行分组，但我们尚未将其与表单一起使用，因此它只会显示一个匿名框。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Fieldset</title>
</head>
<body>
<strong>HTML fielset Tag</strong>
<br>
<br>
<!-- Create a fieldset -->
<fieldset>
<input type="radio" id='english'>
<label for="english">English</label>
<input type="radio" id='english'>
<label for="english">Hindi</label>
<input type="radio" id='english'>
<label for="english">Telegu</label>
</fieldset>
</body>
</html>
表单元素上的<fieldset> 标签
在此程序中，<fieldset> 元素与 <form> 元素一起使用，以对 Web 窗体中的多个控件进行分组。它为表单内容提供了一个匿名框。
<!DOCTYPE html>
<html>
<head>
<title>HTML Fieldset</title>
<style>
input{
width: 40%;
}
textarea {
width: 90%;
}
</style>
</head>
<body>
<form>
<fieldset>
<label>First Name</label>
<input type="text" name="FirstName"/>
<br><br>
<label>Last Name</label>
<input type="text" name="LastName"/>
</fieldset>
<br>
<fieldset>
<label>Email id</label>
<input type="email" name="email"/>
<br><br>
<label>Enter your password</label>
<input type="password" name="password"/>
<br><br>
<label>Confirm your password</label>
<input type="password"name="confirmPass"/>
</fieldset>
<br>
<fieldset>
<label>Address</label>
<br>
<textarea name="address"></textarea>
</fieldset>
<br>
<button>Submit</button>
</form>
</body>
</html>
<fieldset> 标签设置css样式
在下面的示例中，我们将通过修改宽度、边框颜色、我们想要使用 CSS 的任何内容来设置我们预先创建的<fieldset> 标签的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Fieldset</title>
<style>
fieldset{
border-color: gray;
width: 250px;
padding-left: 25px;
}
</style>
</head>
<body>
<strong>HTML fielset Tag</strong>
<br>
<br>
<!-- Create a fieldset -->
<fieldset>
<input type="radio" id='english'>
<label for="english">English</label>
<input type="radio" id='english'>
<label for="english">Hindi</label>
<input type="radio" id='english'>
<label for="english">Telegu</label>
</fieldset>
</body>
</html>
对多个表单元素进行分组并设置CSS样式
考虑到这个例子，我们使用 <fieldset> 元素来对窗体中的多个控件进行分组。我们使用 CSS 来设置当前 'fieldset' 元素的样式。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Fieldset</title>
<style>
fieldset {
width: 50%;
height: 100px;
color: rgb(43, 255, 0);
}
legend {
width: 150px;
height: 50px;
background-color: green;
color: white;
background-color: blueviolet;
}
</style>
</head>
<body>
<!--create a fieldset-->
<p>HTML fieldset Tag</p>
<fieldset>
<legend>Choose your fav languages</legend>
<input type="checkbox">
<label for="">HTML</label>
<input type="checkbox">
<label for="">JavaScript</label>
<input type="checkbox">
<label for="">Java</label>
</fieldset>
</body>
</html>
已禁用的字段集
让我们看一下下面的程序，我们在 <fieldset> 元素中使用 'disabled' 属性来禁用它。
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML fieldset Tag</title>
<style>
fieldset {
width: 70%;
height: 100px;
color: rgb(0, 195, 255);
}
</style>
</head>
<body>
<!--create a fieldset-->
<p>HTML fieldset Tag</p>
<form>
<fieldset disabled>
<legend>Disabled login fieldset</legend>
<label for="">Username</label>
<input type="text" placeholder="Username">
<br>
<br>
<label for="">Password</label>
<input type="password" placeholder="Password">
</fieldset>
</form>
</body>
</html>
支持的浏览器
| 浏览器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| <fieldset> | Yes | Yes | Yes | Yes | Yes |
