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.

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.

The legend element can only be declared as the first child of the fieldset element it belongs to.

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>
Contact information

Full name:

Address:

Phone number:

Preferences

Cars

Vacation

Lifestyle

Astronomy

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>

E-mail:

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.