legend

< html‎ | elements
Jump to: navigation, search

legend

This article is In Progress.



Summary

The legend element represents a title or explanatory caption for the contents of its parent fieldset element.


Overview Table

DOM Interface HTMLLegendElement

The legend element represents a caption for the the contents of the legend element's parent fieldset element, if any.


Compatibility

Do you think this data can be improved? You can ask to add by opening an issue or make a pull request.

Desktop

FeaturesChromeFirefoxInternet ExplorerOperaSafari
Basic support
?
Yes
1.0
Yes
?
Yes
?
Yes
?
Yes

Mobile

FeaturesAndroidFirefox MobileIE MobileOpera MobileSafari Mobile
Basic support
?
Yes
1.0
Yes
?
Yes
?
Yes
?
Yes

Examples

View live exampleSimple form with fieldset, legend, and label elements.

HTML

<form action="" method="post">
  <fieldset>
    <legend>User credentials</legend>
    <label for="username">Username</label>
    <input type="text" name="username" id="username">
    <label for="password">Password</label>
    <input type="password" name="password" id="password"> 
  </fieldset>
</form>

Usage

Generally, the legend element can be used in combination with a fieldset element when a group of form elements needs a caption. Pretty similar to a headline element but the legend element is the most semantic element in that case.

Notes

The first legend element in a fieldset is used as the caption of the fieldset. Additional legend elements are ignored.

The legend element will be placed within the border of the fieldset element if you are using a fieldset and leaving the default browser styles untouched. The position will change as soon as you set border: none; to your fieldset.

The »problem« with the fieldset and legend elements is that they don’t behave like normal block/inline elements. A general workaround with any styling and position issues (especially in old IEs) is to wrap your legends content with another element.

<fieldset>
  <legend><span>Legend link</span></legend>
</fieldset>

Related specifications

Specification Status Related Changes
HTML5 Candidate Recommendation

See also

Related articles

HTML


















































… further results

Other articles

External resources