HTML Legend Tag: How it Works in Fieldset Tag with Examples

In this article, you will learn how HTML legend works in the fieldset tag with examples.

HTML fieldset and legend tags group related fields and provide a label to describe them.

Understand How the <legend> Tag Works Inside the <fieldset> Tag in HTML

The <fieldset> tag groups related elements in a form. It draws a box around the controls to show they belong together.

A <fieldset> creates a visual group of form controls. It improves structure and helps users understand the relationship between fields.

Here is an example:

<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

The <fieldset> tag wraps all related form controls. The browser draws a box around them. The optional <legend> inside the fieldset names the group.

This structure helps screen readers, too. It improves accessibility because it describes related fields.

Here are the use cases:

• Groups related form fields.
• Makes complex forms easier to scan.
• Improves user experience.
• Supports better accessibility.
• Helps you organize forms in a logical way.

You use <fieldset> to group controls that share a purpose. For example, payment details or shipping address.

<fieldset>
  <legend>Payment Details</legend>
  <label for="card">Card Number:</label>
  <input type="text" id="card" name="card">
  
  <label for="expiry">Expiry Date:</label>
  <input type="text" id="expiry" name="expiry">
</fieldset>

This group’s payment fields are grouped together so users know they belong in the same section.

So, what is the <legend> tag in HTML?

The <legend> tag defines a caption for a <fieldset>. It names the group of fields inside the box.

<legend> gives a short label for the contents of a fieldset. It sits on the border of the box by default.

The browser places the text as a caption for that group when you add <legend> inside <fieldset>. It tells users what the section is about.

<fieldset>
  <legend>Contact Information</legend>
  <label for="phone">Phone:</label>
  <input type="tel" id="phone" name="phone">
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

Here, “Contact Information” tells users the purpose of the fields inside.

Style <fieldset> and <legend> with CSS

You can customize the look of the fieldset and legend with CSS to match your design.

Change Border and Padding:

<style>
  fieldset {
    border: 2px solid #333;
    padding: 15px;
  }
</style>

This makes the box stand out with a thicker border and extra space inside.

Style Legend Text

<style>
  legend {
    font-weight: bold;
    font-size: 18px;
    color: #444;
  }
</style>

This gives the legend a larger, bolder appearance for better readability.

Remove Default Border

<style>
  fieldset {
    border: none;
    padding: 10px;
    background-color: #f9f9f9;
  }
</style>

This creates a card-like look without the default border.

Examples of HTML Fieldset and Legend Tags

Simple Group

<fieldset>
  <legend>Login Details</legend>
  <label for="user">Username:</label>
  <input type="text" id="user" name="user">

  <label for="pass">Password:</label>
  <input type="password" id="pass" name="pass">
</fieldset>

Group’s login fields.

Multiple Fieldsets in a Form

<form>
  <fieldset>
    <legend>Personal Info</legend>
    <label for="fname">First Name:</label>
    <input type="text" id="fname" name="fname">
    
    <label for="lname">Last Name:</label>
    <input type="text" id="lname" name="lname">
  </fieldset>

  <fieldset>
    <legend>Address</legend>
    <label for="street">Street:</label>
    <input type="text" id="street" name="street">
    
    <label for="city">City:</label>
    <input type="text" id="city" name="city">
  </fieldset>
</form>

Uses multiple fieldsets to organize a longer form into sections.

Styled Fieldset:

<style>
  fieldset {
    border: 2px dashed #007BFF;
    padding: 20px;
  }

  legend {
    color: #007BFF;
    font-size: 20px;
  }
</style>

<fieldset>
  <legend>Survey</legend>
  <label for="feedback">Feedback:</label>
  <textarea id="feedback" name="feedback"></textarea>
</fieldset>

Custom styles are used here to enhance the visual appeal.

Browser support and compatibility notes

Fieldset and legend have excellent support in all major browsers.

• Works in Chrome, Firefox, Safari, Edge, and Opera.
• Mobile browsers support them too.
• Slight differences in default styles exist across browsers, so you may want to use CSS to unify the look.

Wrapping Up

In this article, you learned what the HTML fieldset and legend tags do and how to use them. You also saw how to style them and use them to organize forms.

Here is a quick recap:

• <fieldset> groups related form controls with a box.
• <legend> provides a label for that group.
• They improve form usability and accessibility.
• You can customize their look with CSS.
• All modern browsers support them.

FQAs

Similar Reads