<label> / <fieldset> / <legend>

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

<!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.

Rendered HTML Image

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.