Description

The HTML element <fieldset> is used to group logically related elements in a form, which can include labels, form input elements, and form controls.

  • Element <legend> can be used as its first child to define a caption for the group.
  • The group can include any number of form input elements and form controls.

It draws a box around the grouped elements to let the users know that the elements are logically related.

The element <fieldset> must follow the below rules.

  • If element <legend> is included, it must be defined as its first child, which defines the caption for the grouped elements.
  • The form elements can have labels and their input elements.

The below table summarizes its usage.

Usage Details
Placement It is displayed as a Block element.
Contents It can contain Block elements, Inline elements, and text.
In case <legend> is included, it must be the first element within the group.
Tags Both opening and closing tags are required.
Versions HTML 4, 4.01, 5

Syntax

Here is the basic syntax of the <fieldset> element.

<fieldset>...</fieldset>

Examples

In the below example, the <fieldset> element is used to group a set of input elements of a form related to user details.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Element - fieldset</title>
</head>
<body>
    <form action="http://www.example.com/" method="post">
        <fieldset>
            <legend>User Details</legend>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name"><br><br>
            <label for="name">Email:</label>
            <input type="email" id="email" name="email"><br><br>
            <label for="male">Male</label>
            <input type="radio" name="gender" value="male" id="male">
            <label for="female">Female</label>            
            <input type="radio" name="gender" value="female" id="female">
        </fieldset>
    </form>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <fieldset> tag.

Attribute Type Details
Element-Specific Attributes The tag <fieldset> doesn't have any element-specific attributes.
Global Attributes Like all other HTML tags, the tag <fieldset> supports the HTML Global Attributes.
Event Attributes The tag <fieldset> also supports the HTML Event Attributes.

Browser Compatibility

The tag <fieldset> is supported in all modern browsers.

  • Google Chrome 1+
  • Internet Explorer or Edge 4+
  • Firefox 1+
  • Apple Safari 1+
  • Opera 4+

Related Links