HTML - <fieldset> Tag

The HTML <fieldset> tag is used to group several controls within a web form. By using the <fieldset> tag and <legend> tag, we can make a HTML form much eaiser to understand to the users.

The <legend> element is used to provide a caption or a title for the content of an <fieldset> element, which is used to group related form elements together. The <legend> element must be the first child of the <fieldset> element. The text included within the <legend> tag will appear above the form components contained within the <fieldset>.

Syntax

Following is the syntax for HTML <fieldset> tag −

<fieldset>.......</fieldset>

Specific Attributes

The HTML <button> tag also supports the following additional attributes −

S.No. Attribute & Description
1

align

(Deprecated)Specifies the content alignment.
2

disabled

Specifies that a group of related form elements should be disabled.
3

form

Specifies forms which belongs to fieldset.
4

name

Specifies a name for fieldset.

Example

In the following program, we are using the HTML <fieldset> element 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 Tag</title>
</head>
<body>
   <!--create a fieldset-->
   <p>HTML fielset element</p>
   <fieldset></fieldset>
</body>
</html>

When we run the above code, it will generate an output consisting of the fieldset area on the webpage.

Example

The following is another example of the HTML <fieldset> element. Here, we are using this element with <legend> element that provides a caption for the displayed anonymous box.

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML fieldset Tag</title>
</head>
<body>
   <!--create a fieldset-->
   <p>HTML fieldset element</p>
   <fieldset>
      <legend>Fieldset</legend>
   </fieldset>
</body>
</html>

On running the above code, the output window will pop up displaying the text along with fieldset area on the webpage.

Example

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 lang="en">
<head>
   <title>HTML fieldset Tag</title>
</head>
<body>
   <!--create a fieldset-->
   <p>HTML fieldset element</p>
   <form>
      <fieldset>
      <legend>Login form</legend>
      <label for="">Username</label>
      <input type="text">
      <br>
      <label for="">Password</label>
      <input type="password">
      <br>
      <button>Login</button>
      </fieldset>
   </form>
</body>
</html>

When we run the above code, it will generate an output consisting of the fieldset used within the form tag displayed on the webpage.

Example

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 Tag</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 element</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>

On running the above code, the output window will pop up displaying the fieldset applied with a CSS on the webpage.

Example

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 element</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>

When we run the above code, it will generate an output consisting of the fieldset used with disabled attribute displayed on the webpage.

html_tags_reference.htm
Advertisements