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

列印頁面