HTML legend elements provide a title or caption for a group of related form controls. They are used with the <fieldset> element to organize forms into clear sections. The <legend> element is useful in registration forms, surveys, contact forms, checkout pages, and other forms containing multiple related fields.
What Is an HTML Legend Element?
The HTML <legend> element defines a caption for the contents of a <fieldset>. Browsers commonly display the legend along the top border of the fieldset, making the purpose of the group easy to understand.
For example, a registration form might contain fieldsets titled Personal Information, Contact Details, and Account Information.
To understand how form groups work, explore HTML Fieldset and HTML Forms.
HTML Legend Example
The following example demonstrates how to use the <legend> element inside a fieldset.
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Full Name:</label>
<input type="text" id="name" name="name">
<br><br>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">
</fieldset>
<button type="submit">Submit</button>
</form>In this example:
<fieldset>groups related form controls.<legend>displays the title “Personal Information”.<label>describes each input field.<input>allows users to enter information.<button type="submit">submits the form.
The legend helps users understand what information belongs to that section.
Important Features of HTML Legend
The <legend> element has several useful characteristics.
- Descriptive caption: Explains the purpose of a fieldset.
- Semantic meaning: Identifies the relationship between a group of controls and its heading.
- Accessible forms: Helps assistive technologies communicate the purpose of a field group.
- CSS customization: Allows developers to change its text color, font, spacing, and other visual properties.
The <legend> element belongs inside a <fieldset>. It should generally be the first child of the fieldset for the clearest structure and expected browser rendering.
Learn more about HTML Form Elements and HTML Form Attributes.
Using Multiple Legends in a Form
A form can contain several fieldsets, each with its own legend. This makes longer forms easier to navigate.
<form>
<fieldset>
<legend>Contact Details</legend>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone">
</fieldset>
<fieldset>
<legend>Account Details</legend>
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password">
</fieldset>
<button type="submit">Register</button>
</form>Each fieldset has a separate legend that describes the controls within it. This structure improves readability and makes the form easier to understand.
Styling HTML Legend with CSS
CSS can customize the appearance of a legend to match your website design.
<style>
fieldset {
border: 1px solid #007bff;
border-radius: 8px;
padding: 20px;
}
legend {
color: #007bff;
font-size: 18px;
font-weight: bold;
padding: 0 8px;
}
</style>In this example, the fieldset has a blue border, while the legend uses blue, bold text. The padding adds space around the caption.
HTML Legend vs Heading
A <legend> provides a caption for a specific fieldset. A heading element, such as <h2>, identifies a section of the overall page.
Use <legend> when a title describes a group of form controls. Use headings to organize broader page content, such as sections of a tutorial or article.
Frequently Asked Questions
Is the legend element required?
No. However, using a legend is recommended when a fieldset groups related form controls because it describes the group’s purpose.
Can I use legend without fieldset?
The <legend> element is intended to label a <fieldset>. Use it inside a fieldset rather than as a standalone page heading.
Can I style the legend with CSS?
Yes. You can change its font, color, padding, background, and other supported CSS properties.
Can a form contain multiple legends?
Yes. A form can contain multiple fieldsets, each with its own legend. This is a useful way to organize complex forms into meaningful sections.