HTML Fieldset 标签

2025 年 3 月 25 日 | 阅读 5 分钟

HTML <fieldset> 标签将 HTML 表单中逻辑相关的字段/标签分组。

在创建 HTML 表单时使用此标签是可选的，但使用 <fieldset> 标签可以更容易地理解表单中分组元素的用途。

<legend> 标签与 <fieldset> 元素一起作为第一个子元素使用，用于定义分组相关字段的标题。

<fieldset> 标签和 <legend> 标签的这种组合有助于组织和构建表单，使其对用户更易于理解和访问。

<fieldset> 标签的语法

以上语法包含

<fieldset>： 它是 <fieldset> 元素的起始标签。
</fieldset>： 它是 <fieldset> 元素的结束标签。

表单元素放置在 <fieldset> 标签之间。

<legend> 标签的语法

以上语法包含

<legend>： 它是 <legend> 元素的起始标签。
</legend>： 它是 <legend> 元素的结束标签。

标题写在 <legend> 元素的起始标签和结束标签之间。

<fieldset> 标签的示例

示例 1

在此示例中，我们使用 <fieldset> 标签创建一个“用户基本信息”组。

代码

<!DOCTYPE html>
<html>
<head>
<title>Example-1 of &ltfieldset&gt tag</title>
<style>
   body {
        text-align: center;
       }  
    p {
        color: #db7093;  
        text-align: center;
        font-size: 40px;  
        font-weight: bold;  
        }  
    form{  
        color: white;
        width: 600px;  
        height: 315px;  
        margin: auto;
        }  
    div {
        background-color: #28455e;  
        }  
    .feedback {
        margin-left: 15px;  
        }  
</style>  
</head>  
<body>  
 <h1>Example-1 of the &ltfieldset&gt tag</h1>  
 <p>User Feedback Form</p>  
 <div>  
 <form class="wd">  
     <fieldset class="wd">  
        <legend>User basic information:</legend>  
        <label>First Name</label> <br>  
        <input type="text" name="fname"> <br>  
        <label>Last Name</label> <br>  
        <input type="text" name="lname"> <br>  
        <label>Enter Email</label> <br>  
        <input type="email" name="email"> <br><br>  
     </fieldset> <br>  
    <label class="feedback">Enter your feedback:</label> <br>  
    <textarea class="feedback" cols="30"></textarea> <br><br>  
     <input  class="feedback" type="Submit" value="Submit"> <br>  
  </form>  
 </div>  
</body>  
</html>    

输出

如下所示，显示了组名称，并在分组元素周围绘制了边界线。

示例 2

在此示例中，我们使用 <fieldset> 标签创建了两个组，分别命名为“联系信息”和“地址信息”。

代码

 <!DOCTYPE html>
<html>
<head>
    <title>Example-2 of the &ltfieldset&gt tag</title>
    <style>
        body {
            font-family:'Courier New', Courier, monospace;
            text-align: center;
        }
        form {
            width: 350px;
            margin: auto;
        }
        fieldset {
            border: 2px solid #f8afaf;
            border-radius: 5px;
            margin-bottom: 15px;
            padding: 10px;
        }
        legend {
            font-weight: bold;
            color: #910c0c;
        }
        label {
            display: inline-block;
            text-align: right;
            margin-right: 5px;
        }
        .submit {
            background-color: #9c2f0e;
            color: #fde2e2;
            font-size: 18px;
            padding: 6px 15px;
            border: none;
            border-radius: 6px;
        }
    </style>
</head>
<body>
    <h1>Example-2 of the &ltfieldset&gt tag</h1>
    <form>
        <fieldset>
            <legend>Contact Information</legend>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name"> <br><br>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email"> <br><br>
            <label for="phone">Phone:</label>
            <input type="tel" id="phone" name="phone"> <br><br>
        </fieldset>
        <fieldset>
            <legend>Address Information</legend>
            <label for="street">Street:</label>
            <input type="text" id="street" name="street"> <br><br>
            <label for="city">City:</label>
            <input type="text" id="city" name="city"> <br><br>
            <label for="state">State:</label>
            <input type="text" id="state" name="state"> <br><br>
        </fieldset>
        <input type="submit" value="Submit" class="submit">
    </form>
</body>
</html>

输出

如下所示，在两个组周围绘制了一条边界线。

示例 3

在此示例中，我们使用 <fieldset> 标签创建了两个组，分别命名为“产品详情”和“配送详情”。

代码

<!DOCTYPE html>
<html>
<head>
    <title>Example-3 of the &ltfieldset&gt tag</title>
    <style>
        body {
            font-family:Arial, Helvetica, sans-serif;
            background-color: #fdf8e7;
        }
        h1 {
            text-align: center;
        }
        form {
            max-width: 500px;
            margin: auto;
            background-color: #fbeb75;
            padding: 25px;
            border-radius: 6px;
        }
        fieldset {
            border: 3px dotted #68541d;
            border-radius: 6px;
            padding: 10px;
            margin-bottom: 20px;
        }
        legend {
            font-weight: bold;
            color: #261e1e;
        }
        label {
            display: inline-block;
            font-size: 18px;
            color: #cf6610;
            text-align: right;
        }
        #product, #quantity, textarea {
            padding: 10px 20px;
            border: 1px solid #fdf39e;
            border-radius: 2px;
            background-color: #f3f0dd;
        }
        #submit {
            background-color: #48f35c;
            color: white;
            border: none;
            font-size: 15px;
            font-weight: bold;
            padding: 15px 30px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <h1>Example-3 of the &ltfieldset&gt tag</h1>
    <form>
        <fieldset>
            <legend>Product Details</legend>
            <label for="product">Product Name:</label> 
            <input type="text" id="product" name="product"> <br><br>
            <label for="quantity">Quantity:</label> 
            <input type="number" id="quantity" name="quantity">
        </fieldset>
        <fieldset>
            <legend>Shipping Information</legend>
            <label for="address">Shipping Address:</label> <br><br>
            <textarea id="address" name="address" cols="50" rows="4"></textarea> <br><br>
        </fieldset>
        <input type="submit" value="Place Order" id="submit">
    </form>
</body>
</html>

输出

如下所示，在两个组周围绘制了一条边界线。

示例 4

在此示例中，我们创建了一个名为“您的信息”的组，并使用“disabled”属性关闭了 <fieldset> 标签内的所有表单控件。

代码

<!DOCTYPE html>
<html>
<head>
    <title>Example-4 of the &ltfieldset&gt tag</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #eaccfa;
            text-align: center;
        }
        .container {
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #eaccfa;
            border-radius: 50px;
            box-shadow: 0 0 50px rgba(63, 56, 56, 0.2);
        }
        h2 {
            color: #6c0c77;
        }
        fieldset {
            border: 2px solid #e1b2fa;
            padding: 10px;
            border-radius: 25px;
            margin-bottom: 25px;
        }
        legend {
            font-weight: bold;
            color: #6c0c77;
        }
        label {
            display: inline-block;
        }
        #name, #Email-ID {
            width: 75%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 3px;
        }
        #submit {
            background-color: #062f5a;
            color:White;
            border: none;
            padding: 10px 35px;
            border-radius: 50px;
            }
    </style>
</head>
<body>
    <h1>Example-4 of the &ltfieldset&gt tag</h1>
    <div class="container">
        <h2>Subscribe to Our Newsletter</h2>
        <form>
            <fieldset disabled>
                <legend>Your Information</legend>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                <label for="Email-ID">Email-ID:</label>
                <input type="Email-ID" id="Email-ID" name="Email-ID" required>
            </fieldset>
            <input type="submit" value="Subscribe" id="submit">
        </form>
    </div>
</body>
</html>

输出

如下所示，在组周围绘制了一条边界线，并且所有表单控件都已关闭。

属性

标签特定属性

属性	值	描述
Disabled	Disabled	它指定 <fieldset> 标签内的所有表单控件都已禁用。
形式	form_id	当表单包含多个字段集时，它指定 <fieldset> 属于哪个表单。
名称	文本	它指定与 <fieldset> 关联的名称。它不会在浏览器中显示，但对 JS 有用。

全局属性

HTML <fieldset> 标签支持 HTML 中的全局属性。

事件属性

HTML <fieldset> 标签支持 HTML 中的事件属性。

浏览器支持

以下是支持 <fieldset> 标签的浏览器

Safari
谷歌浏览器
Internet Explorer
火狐
Microsoft Edge
Opera

结论

在本文中，您通过示例了解了 HTML <fieldset> 标签以及它如何用于在 HTML 表单中对相关字段进行分组。

下一主题HTML figcaption 标签

HTML Fieldset 标签

<fieldset> 标签的语法

<legend> 标签的语法

<fieldset> 标签的示例

示例 1

示例 2

示例 3

示例 4

属性

浏览器支持

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

HTML 教程

HTML 属性

HTML 标签列表

HTML5 高级

HTML API

HTML 颜色名称

HTML 杂项

选择题

面试题

HTML Fieldset 标签

<fieldset> 标签的语法

<legend> 标签的语法

<fieldset> 标签的示例

示例 1

示例 2

示例 3

示例 4

属性

浏览器支持

结论

相关帖子

HTML <a> 标签

HTML tt 标签

HTML <form> 标签

HTML mark 标签

HTML rt 标签

HTML script 标签

HTML output 标签

HTML <h1> 到 <h6> 标签

HTML section 标签

HTML ruby 标签

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器