Grouping HTML Form Elements

You can use the fieldset element to group related elements within an HTML form. You can also use the legend element to provide a caption for the group.

When you have a long or complex form, breaking it up into smaller, logical sections makes it much easier for users to digest. The fieldset tag draws a visual border around its contents, while the legend tag acts as a title that sits neatly on that border.

Basic Syntax

To use these tags, wrap your related inputs inside a fieldset, and place the legend as the very first element inside it:

Enhancing Accessibility

Grouping elements isn't just about making the form look better. It's also a major win for accessibility. When a screen reader encounters a fieldset, it will often read out the legend before each input inside the group. This helps visually impaired users understand the context of the fields they are filling out.

This is especially important when grouping a list of radio buttons or checkboxes, where a single label isn't enough to explain the entire group.

Full Working Example

In the following example, we use two separate fieldsets to clearly divide the form into "Personal Information" and "Subscription Preferences":

<!DOCTYPE html>
<html>
<head>
<title>Fieldset and Legend Example</title>
<style>
  body {
    font-family: sans-serif;
    margin: 20px;
    background-color: #fcfcfc;
  }
  form {
    max-width: 400px;
  }
  fieldset {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }
  legend {
    background-color: #007bff;
    color: white;
    padding: 5px 15px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 14px;
  }
  .form-group {
    margin-bottom: 15px;
  }
  .form-group label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
  }
  .form-group input[type="text"],
  .form-group input[type="email"] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .radio-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: normal;
  }
  button[type="submit"] {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
  }
  button[type="submit"]:hover {
    background-color: #218838;
  }
</style>
</head>
<body>

<form action="/submit" method="post">
  
  <fieldset>
    <legend>Personal Information</legend>
    <div class="form-group">
      <label for="fname">First Name</label>
      <input type="text" id="fname" name="fname">
    </div>
    <div class="form-group">
      <label for="lname">Last Name</label>
      <input type="text" id="lname" name="lname">
    </div>
  </fieldset>

<fieldset>
    <legend>Subscription Preferences</legend>
    <div class="radio-group">
      <label><input type="radio" name="sub_type" value="daily" checked> Daily Newsletter</label>
      <label><input type="radio" name="sub_type" value="weekly"> Weekly Digest</label>
      <label><input type="radio" name="sub_type" value="none"> Unsubscribe</label>
    </div>
  </fieldset>

<button type="submit">Update Preferences</button>

</form>

</body>
</html>

View Output Full Screen Preview

Tip: Styling the Legend

By default, browsers render the legend overlapping the top border of the fieldset. You can easily customize this using CSS. As seen in the example, adding a background color, some padding, and a border radius can turn a basic legend into a modern, professional-looking badge.