legend element
If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.
Table of contents
Description
The legend
element represents a caption, name or title for a set of controls, grouped width the fieldset
element. This element becomes vital when readability needs to be improved, specially in large forms. Its content, being the caption of the fieldset
it belongs to, is usually rendered on top of the frame provided by it.
Examples
In the following example, we're grouping thematically the information collected by a form
. Each group of controls has its legend
properly declared as the first child of the fieldset
element it belongs to.
<form action="../../form-result.php" target="_blank">
<fieldset>
<legend>Contact information</legend>
<p>Full name: <input type="text" name="fullname"></p>
<p>Address: <input type="text" name="address"></p>
<p>Phone number: <input type="tel" name="phone"></p>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<p><input type="checkbox" name="pref-cars"> Cars</p>
<p><input type="checkbox" name="pref-vacation"> Vacation</p>
<p><input type="checkbox" name="pref-lifestyle"> Lifestyle</p>
<p><input type="checkbox" name="pref-astronomy"> Astronomy</p>
</fieldset>
<p><input type="submit" value="Send information"></p>
</form>
The legend
element may contain other elements. This can be useful in certain situations like the one shown in the following example. There, the legend
element has, besides the title for the ser of controls, a checkbox that, through a client-side program, allows the entire group of controls to be enabled or disabled.
<form action="../../form-result.php" target="_blank">
<fieldset>
<legend>
<label>
<input type="checkbox" name="subscription" checked onchange="switchFieldset(this)"> Suscribe to the newsletter
</label>
</legend>
<p>E-mail: <input type="email" name="e-mail"></p>
</fieldset>
<p><input type="submit" value="Sen data"></p>
</form>
Attributes
Specific attributes
align
A value indicating where the user agent should place the title in relation with the control's group. It can take one of four case-insensitive values:
- top: on top of the control's group.
- bottom: under the control's group.
- left: at the left side of the control's group.
- right: at the right side of the control's group.
This attribute has become obsolete in HTML5 and its use is no longer valid. Authors are encouraged to use style sheets to provide presentational properties to the elements.
Example
<legend align="bottom">Personal information</legend>
Global attributes
For information about global attributes refer to this list of global attributes in HTML5.
Events
Global events
For information about global events refer to this list of global events in HTML5.