Example
Group related elements in a form:
<form>
<fieldset>
<legend>Personalia:</legend>
Name: <input type=”text” size=”30″><br>
Email: <input type=”text” size=”30″><br>
Date of birth: <input type=”text” size=”10″>
</fieldset>
</form>
Definition and Usage
The <legend> tag defines a caption for the <fieldset> element.
Browser Support
| Element | |||||
|---|---|---|---|---|---|
| <legend> | Yes | Yes | Yes | Yes | Yes |
Differences Between HTML 4.01 and HTML5
The “align” attribute is not supported in HTML5.
Attributes
| Attribute | Value | Description |
|---|---|---|
| align | top bottom left right |
Not supported in HTML5. Specifies the alignment of the caption |
Global Attributes
The <legend> tag also supports the Global Attributes in HTML.
Event Attributes
The <legend> tag also supports the Event Attributes in HTML.
Related Pages
HTML DOM reference: Legend Object
HTML <legend> align Attribute
Example
Align the caption to the right:
<form>
<fieldset>
<legend align=”right”>Personalia:</legend>
Name: <input type=”text” size=”30″><br>
Email: <input type=”text” size=”30″><br>
Date of birth: <input type=”text” size=”10″>
</fieldset>
</form>
Definition and Usage
The align attribute specifies the alignment of the caption in a fieldset.
Browser Support
| Attribute | |||||
|---|---|---|---|---|---|
| align | Yes | Yes | Yes | Yes | Yes |
The “left” and “right” values of the align attribute is supported in all major browsers, except Opera 12 and earlier versions. The “bottom” value does not work in any of the major browsers.
Compatibility Notes
The align attribute of <legend> is not supported in HTML5. Use CSS instead.
CSS syntax: <legend style=”float:right”>
In our CSS tutorial you can find more details about the float property.
Syntax
<legend align=”left|right|top|bottom”>
Attribute Values
| Value | Description |
|---|---|
| left | Aligns the caption to the left (this is default) |
| right | Aligns the caption to the right |
| top | Aligns the caption at the top |
| bottom | Aligns the caption at the bottom |