HTML <legend> (Descriptive Legend) Tag

<form action="action.php">
  <fieldset>
    <legend>User Information:</legend>
    <label for="fname">First name:</label>
    <input type="text" id="fname" name="fname">

    <label for="lname">Last name:</label>
    <input type="text" id="lname" name="lname">

    <input type="submit" value="Submit">
  </fieldset>
</form>

Meaning

The <legend> element is used to assign a caption to a set of form fields as defined by a <fieldset> element.

Notes: Under early drafts of the In HTML5 specification, this element is also found in the figure and details elements. This was later replaced by the <dt> element.

Version: HTML 2, 3.2, 4, 4.01, 5

Standard Syntax

<legend>(Descriptive text)</legend>

Browser Support

Status

Global Attributes

<legend> element also supports the Global Attributes in HTML.

Event Attributes

<legend> element also supports the Event Attributes in HTML.

More Examples

The following example show how add CSS to <legend> element:

<style>
legend {
  background-color: black;
  color: white;
  padding: 4px 16px;
  border-radius: 5px;
}
</style>

By Default CSS Value(s)

Most of the browsers will display the <legend> element with the following by default value(s)

legend {
  display: block;
  padding-left: 2px;
  padding-right: 2px;
  border: none;
}