HTML - <fieldset> Tag

Quiz

HTML <fieldset> Tag

The HTML <fieldset> tag is used to group several controls and labels within a web form. This element, introduced in HTML5, serves as a container for grouping form elements. The HTML <legend> tag can be used to label that group as well.

Syntax

Following is the syntax of <fieldset> tag −

<fieldset>
   ...
</fieldset>

Attributes

The HTML <fieldset> tag supports both Global and Event attributes. It also accepts some specific attributes which are listed bellow.

Attribute	Value	Description
disabled	disabled	Specifies that a group of related form elements is disabled.
form	form_id	Specifies forms that belong to the fieldset.
name	text	Specifies a name for fieldset.

Example: Creating Fieldset

In the following program, we use the HTML <fieldset> tag to group several controls within a web form. However, since it is not used within a form, it will display only as an anonymous box.

<!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>

Example: Form Fieldset

In this program, the <fieldset> element is used with the <form> element to group several controls within a web form. It provides a container for the form contents.

<!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>

Example: Styling Fieldset

In the following example we will style our previously created <fieldset> by modifying its width, border color, and other properties using CSS.

<!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>

Example: Grouping and Styling

In this example, we use the <fieldset> element to group several controls within the form. We then use CSS to style the fieldset element.

<!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>

Example: Disabled Fieldset

Let's look at the following program, where we use the disabled attribute within the <fieldset> element to disable it.

<!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>

Supported Browsers

Tag
fieldset	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm

Print Page