The <legend> tag adds a caption to a <fieldset> element.
This helps users better understand the purpose of the input fields.
A <legend> that describes the input fields.
<form action="/tutorial/action.html">
<fieldset>
<legend>Customer Information</legend>
<input type="text" placeholder="First name" name="firstname"><br /><br />
<input type="text" placeholder="Last name" name="lastname"><br /><br />
<input type="text" placeholder="City" name="city"><br /><br />
<div>
<input type="checkbox" id="insurance" name="hasinsurance" value="hasinsurance">
<label for="insurance">Has Insurance</label>
</div>
<input type="submit" value="Submit" />
</fieldset>
</form>
The <legend> element adds a caption to a <fieldset>.
This element helps users better understand input elements and forms.
The <legend> tag must be the first tag inside <fieldset>.
A <legend> element styled with CSS.
<form action="/tutorial/action.html">
<fieldset>
<legend style="background-color:aliceblue;font-style:italic;border:1px solid navy;">
Student Registration
</legend>
<input type="text" placeholder="First name" name="firstname"><br /><br />
<input type="text" placeholder="Last name" name="lastname"><br /><br />
<input type="text" placeholder="City" name="city"><br /><br />
<input type="submit" value="Submit" />
</fieldset>
</form>
The <legend> element has no attributes, but it does accept global attributes.
The following are commonly used.
| Attribute | Value | Description |
|---|---|---|
| id | value | Provides the legend element with a unique identifier. |
| class | classnames | Assigns one or more classnames to the legend element. |
| style | CSS-values | Assigns CSS style values to the legend element. |
For additional global attributes see our global attributes list.
The <legend> tag is part of a group of tags
that are used to create data entry forms.
This group is referred to as the Form tag group.
Together, they allow you to create comprehensive data input solutions.
Here is a list of form tags
| Element | Description |
|---|---|
| <form> | Defines a data entry area that contains input elements |
| <input> | Creates an input field in which data can be entered |
| <label> | Creates a label or brief description before input elements |
| <textarea> | Creates a multi-line text input control |
| <select> | Creates a dropdown control |
| <button> | Creates a clickable button that can contain text or an image |
| <datalist> | Specifies a list of options for a textfield (<input>) element |
| <fieldset> | Groups related form elements and displays a box with a legend around these |
| <legend> | Defines a caption for a fieldset |
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
