HTML <legend> (Descriptive Legend) Tag

❮ Previous Reference Next ❯


<form action="action.php">
    <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">


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


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:


legend {
  background-color: black;
  color: white;
  padding: 4px 16px;
  border-radius: 5px;

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;

Related Tags:

<button>, <datalist>, <fieldset>, <form>, <input>, <label>, <meter>, <optgroup>, <option>, <output>, <progress>, <select> and <textarea>
❮ Previous Reference Next ❯