HTML <fieldset> Tag

The <fieldset> tag visually groups logically related fields in an HTML form defined with the <form> tag. The tag provides an opportunity to break forms down into logical sections. In the browser, a box around content is drawn.

The <legend> tag is used to define a caption of a logical section defined by the <fieldset> element.

Syntax

The content of the tag is written between the opening (<fieldset>) and the closing (</fieldset>) tags.

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div { 
        margin-bottom: 10px; 
      }
      label { 
        display: inline-block; 
        width: 120px; 
      }
    </style>
  </head>
  <body>
    <form>
      <fieldset style="background:#e1eff2;">
        <legend style="padding:20px 0; font-size:20px;">Personal Information:</legend>
        <div><label>Name:</label><input type="text"></div>
        <div><label> Email:</label><input type="text"></div>
        <div><label>Date of birth:</label><input type="text"></div>
        <div><label>Place of birth:</label><input type="text"></div>
      </fieldset>
    </form>
  </body>
</html>

Result

Attributes

Attribute Value Description
disabled dsabled Indicates that a group of related form elements must be disabled.
form form_id Defines one or more form identifiers (id), to which the set of related elements belongs. If there are several identifiers, then they must be separated by spaces.
name text Defines a name for the joined group of items. The name in the browser is not displayed, it is used in the work of scripts.

The <fieldset> tag supports the Global Attributes and the Event Attributes.

Browser support