How to Use the HTML <fieldset> Tag

The usage of the <fieldset> tag

The <fieldset> tag is used to visually group some logically related fields in the <form> tag. In this tutorial, you will find some examples of using the <fieldset> tag and find out why we need this tag at all.

In the example below, we place the <fieldset> element in a <form> tag. In the <fieldset>, we add the <legend>, <input>, and <label> elements.

Example of using the <fieldset> tag:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <fieldset>
        <legend>Book</legend>
        <input type="radio" name="book" value="html" id="book_html">
        <label for="book_html">HTML</label>
        <input type="radio" name="book" value="css" id="book_css">
        <label for="book_css">CSS</label>
        <input type="radio" name="book" value="javascript" id="book_javascript">
        <label for="book_javascript">Javascript</label>
      </fieldset>
    </form>
  </body>
</html>

Try it Yourself »

Result

To label a <fieldset>, the <legend> tag is used. The content of the <legend> describes the purpose of the <fieldset>, in which it is included.

Here, each radio button is labeled and also provides a label for the group as a whole. This is primarily important in the cases when assistive technology is used.

Let’s see another example, where we add some CSS for styling purposes.

Example of using the <fieldset> tag with some CSS properties:

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

Try it Yourself »

In the example above, we specified the margin-bottom property for the <div>, as well as set the display and width properties for the <label> element.

Why do we need the <fieldset> tag

The <fieldset> tag allows us to break forms into logical sections. In browsers, a box around the content is displayed. This is an easy way of creating groups of widgets that have the same purpose, both styling and semantic.

The importance of this tag is commonly determined by its influence over assistive technology, which makes the <fieldset> tag one of the key elements for creating accessible forms.

Whenever you have some radio buttons, you must nest them within a <fieldset>. There are also other use cases, e.g. this element can be used to section a form. If you have a long form that should be on a single page, put different related sections within different <fieldset> elements, which will improve usability.