HTML - fieldset 标签_HTML 菜鸟教程

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

<< HTML - label 标签 HTML - legend 标签 >>