| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 4 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
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.
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 (particularly when
you want to remove the spacing to the left of the text using CSS padding
or margin properties), 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, depending on what screen reader they have and how it is configured,
have to listen to the announcement of the legend text
with every form input inside the fieldset that the
legend. relates to.
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.
