HTML - <fieldset> Tag

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

Syntax

<fieldset>
   ...
</fieldset>

Attribute

HTML fieldset tag supports Global and Event attributes of HTML. Accept some specific attributes as well which are listed bellow.

Attribute	Value	Description
disabled	disabled	Specifies that a group of related form elements should be disabled.
form	form_id	Specifies forms which belongs to fieldset.
name	text	Specifies a name for fieldset.

Examples of HTML fieldset Tag

Bellow examples will illustrate the usage of fieldset tag, where, when and how to use it to create fieldset in a form.

Creating fieldset

In the following program, we are using the HTML <fieldset> tag to group several controls within the web form, but we have not used it with the form, so it will display only 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>

Fieldset on Form Elements

In this program, the <fieldset> element is used with the <form> element to group several controls within a web form. It provides an anonymous box 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>

Styling fieldset

In the following example we will style our previusly created fieldset by modifying width, border color anything we want to 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>

Grouping Several form Elements and Styling

Considering the example, we are using the <fieldset> element to group the several controls within the form. We use the CSS to style the current ‘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>

Disabled fieldset

Let's look at the following program, where we use the ‘disabled’ attribute within the <fieldset> element to make it 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>

Supported Browsers

Tag
fieldset	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm