HTML - <fieldset> 标签

HTML <fieldset> 标签用于在网页表单中对多个控件和标签进行分组。它是 HTML5 中引入的新标签，此元素用作分组表单元素的容器。HTML <legend> 标签也可以用于标记该组。

语法

<fieldset>
   ...
</fieldset>

属性

HTML fieldset 标签支持 HTML 的全局和事件属性。也接受一些特定的属性，如下所示。

属性	值	描述
disabled	disabled	指定应禁用一组相关的表单元素。
form	form_id	指定 fieldset 属于哪个表单。
name	text	指定 fieldset 的名称。

HTML fieldset 标签示例

下面的示例将演示 fieldset 标签的用法，以及在表单中何时以及如何使用它来创建 fieldset。

创建 fieldset

在下面的程序中，我们使用 HTML <fieldset> 标签在网页表单中对多个控件进行分组，但我们没有将其与表单一起使用，因此它只会显示一个匿名框。

<!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> 元素一起使用，以在网页表单中对多个控件进行分组。它为表单内容提供了一个匿名框。

<!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 的内容来设置前面创建的 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>

分组多个表单元素和样式设置

考虑这个例子，我们使用 <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

让我们看看下面的程序，我们在其中使用 <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	是	是	是	是	是

html_tags_reference.htm

打印页面