Skip to: content, navigation

legend (HTML element)

Spec
Depr. Empty Version
No No HTML 4
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

<legend>
</legend>

Description

The legend is used to provide the caption text for grouped form controls and text contained in a fieldset. By default, the text appears on the left, over the boxed outline that the fieldset creates, as Figure 1 shows (the word “Friendship” is the content). No other content may appear between the opening <fieldset> tag and the opening <legend> tag—only whitespace is allowed.

Figure 1. A fieldset with the legend “Friendship” grouping related items in the form A fieldset with the legend of ‘friendship’ grouping related items in the form

Example

This legend element identifies three related XFN attributes (the online reference has more on XFN):

<form>
  <fieldset>
    <legend>Friendship</legend>
    <input type="radio" name="radFriendship" value="Not_Applicable"
        id="radFriendNot_Applicable"/>
    <label for="radFriendNot_Applicable">Not_Applicable</label>
    <input type="radio" name="radFriendship" value="acquaintance"
        id="radFriendaquaintence"/>
    <label for="radFriendaquaintence">acquaintance</label>
    <input type="radio" name="radFriendship" value="friend"
        id="radFriendfriend"/>
    <label for="radFriendfriend">friend</label>
  </fieldset>
  ⋮
</form>

Use This For …

Use this element to give a name to the grouped form elements. There are no hard rules about what goes inside the <legend> and </legend> tags, but take care: some browsers have a hard time applying styles to the legend, so it’s good practice to keep the text content as succinct as possible, in order to avoid styling problems. Another reason to keep the text short is that this is best for screen reader users who may have to listen to the announcement of the legend text before every form input inside the fieldset related to the legend.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

It causes no compatibility issues, and has excellent support across all tested browsers.

In this Section

User-contributed notes

ID:
#1
Contributed:
by AutisticCuckoo
Date:
Fri, 28 Mar 2008 11:31:04 GMT

Opera has an oddity in that the default horizontal position of the LEGEND depends on the left padding of the FIELDSET.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

Search