<legend>
The caption of a `<fieldset>` group of fields, displayed on its border.
- Display
- block
- Closing tag
- Required
- Permitted content
- Phrasing content, optionally with
<h1>-<h6>headings
Example
#<fieldset>
<legend>How often do you want to study?</legend>
<label><input type="radio" name="pace" value="daily"> Every day</label>
<label><input type="radio" name="pace" value="weekly" checked> A few times a week</label>
<label><input type="radio" name="pace" value="weekend"> On weekends</label>
</fieldset>Definition and usage
#The <legend> element names a group of fields. It must be the first child of a <fieldset> element. The browser draws it in a special way: the text breaks the top edge of the border, like a title set into the frame.
Screen readers use the legend as the name of the whole group. For questions with radio buttons, the legend should hold the question itself, for example "How often do you want to study?", with the button labels holding only the answers.
Inside it you can place phrasing content, and if the group is a large section of the form, even a heading (<h1>-<h6>).
Syntax
#<fieldset>
<legend>Group caption</legend>
…
</fieldset>Attributes
#This element has no attributes of its own. It supports the global attributes, such as class, id and hidden.
Default CSS
#Most browsers display this element with these default styles:
legend {
display: block;
padding-inline: 2px;
}Browser support
#Widely available
Works in all modern browsers, phones included. You can use it without worry.
- Chrome
- Edge
- Firefox
- Safari
Good practices
#- Write short legends. Some screen readers repeat them at every field in the group.
- A legend only works as the first child of
<fieldset>. Anywhere else it’s just plain text with no special meaning.
Related entries
#Spotted a mistake or missing an example? Write to us.