<label> / <fieldset> / <legend>

Since:		HTML 4（1997）

The label element associates a text label with a form control. The fieldset element groups related form controls together, and the legend element displays a caption for that group.

Syntax

<!-- Match the label's for attribute with the input's id -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">

<!-- Wrap the input inside the label (no for/id needed) -->
<label>Email address:<input type="email" name="email"></label>

<!-- Group controls with fieldset and legend -->
<fieldset>
  <legend>Shipping Address</legend>
  <label for="zip">ZIP code:</label>
  <input type="text" id="zip" name="zip">
  <label for="address">Address:</label>
  <input type="text" id="address" name="address">
</fieldset>

Attributes

Attribute	Description
for (label)	Specifies the `id` of the form control to associate with.
form (label)	Associates the label with a form element located elsewhere on the page by its id.
disabled (fieldset)	Disables all controls within the group at once.
form (fieldset)	Specifies the id of the form to associate the fieldset with.
name (fieldset)	Specifies a name for the fieldset, used when referencing it from JavaScript.

Sample Code

sample_label_fieldset_legend.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>label / fieldset / legend</title>
</head>
<body>

  <form>

    <!-- Personal information group -->
    <fieldset>
      <legend>Personal Information</legend>

      <p>
        <label for="fname">Name:</label>
        <input type="text" id="fname" name="name">
      </p>
      <p>
        <label for="femail">Email address:</label>
        <input type="email" id="femail" name="email">
      </p>
    </fieldset>

    <!-- Payment method group -->
    <fieldset>
      <legend>Payment Method</legend>

      <p>
        <!-- Wrapping the input inside the label -->
        <label><input type="radio" name="pay" value="card"> Credit card</label>
        <label><input type="radio" name="pay" value="bank"> Bank transfer</label>
        <label><input type="radio" name="pay" value="cash"> Cash on delivery</label>
      </p>
    </fieldset>

    <p><button type="submit">Place Order</button></p>
  </form>

</body>
</html>

Result

Two bordered groups are displayed — "Personal Information" and "Payment Method" — each with a legend caption. The radio button labels are also clickable to select the option.

View sample page

Overview

Using the label element links a text label to its form control, so clicking the label moves focus to the input or toggles a checkbox. This expands the clickable area — especially for checkboxes and radio buttons — and significantly improves accessibility and usability. This is particularly important on mobile devices where input targets are small.

There are two ways to use label: (1) set the for attribute to match the target control's id, or (2) wrap the control inside the label element. Both approaches have the same effect.

fieldset groups related form fields together, and legend displays a name for that group. Use them to divide a form into meaningful sections — such as shipping address, payment method, or survey question groups. Adding the disabled attribute disables all controls in the group at once, which is handy for sections that should be read-only based on a condition.

Customizing fieldset and legend with CSS

How to redesign the plain browser-default styles into something polished.

<style>
  /* Reset and restyle the fieldset border */
  fieldset {
    border: 2px solid #3498db;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
  }
  legend {
    padding: 0 8px;
    color: #3498db;
    font-weight: bold;
    font-size: 1rem;
  }
  /* Stack labels and inputs vertically */
  label {
    display: block;
    margin-bottom: 4px;
    font-weight: bold;
    font-size: 0.9rem;
    color: #555;
  }
  input[type="text"],
  input[type="email"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
  }
  /* Highlight on focus */
  input:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
  }
</style>

<fieldset>
  <legend>Contact Information</legend>
  <p>
    <label for="name">Name</label>
    <input type="text" id="name" name="name">
  </p>
  <p>
    <label for="email">Email Address</label>
    <input type="email" id="email" name="email">
  </p>
</fieldset>

Dynamically Disabling a fieldset with JavaScript

A pattern for enabling or disabling an entire form section based on a condition.

// Enable/disable an entire fieldset
var section = document.getElementById("billing-section");

// Toggle with a "billing address differs from shipping" checkbox
var toggle = document.getElementById("diff-billing");
toggle.addEventListener("change", function() {
  section.disabled = !this.checked;
});

// Find the control associated with a label via JavaScript
var label = document.querySelector('label[for="name"]');
console.log(label.control);  // returns the associated input element