HTML <legend> Tag

The <legend> tag adds a caption or description to a <fieldset> element. This element helps users better understand the purpose of the input fields.

HTML Tag

Example

#

A <legend> that wraps and describes input fields.

Customer Information





<form action="/tutorial/action.html">
  <fieldset>
    <legend>Customer Information</legend>
  
    <input type="text" placeholder="First name" name="firstname"><br /><br />
    <input type="text" placeholder="Last name" name="lastname"><br /><br />
    <input type="text" placeholder="City" name="city"><br /><br />
    <div>
      <input type="checkbox" id="insurance" name="hasinsurance" value="hasinsurance">
      <label for="insurance">Has Insurance</label>
    </div>

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

Using <legend>

The <legend> element adds a caption to a <fieldset>.

This element helps users better understand input elements and forms.

The <legend> tag must be the first tag inside <fieldset>.

More Examples

A <legend> element styled with CSS.

Student Registration





<form action="/tutorial/action.html">
  <fieldset>
    <legend style="background-color:aliceblue;font-style:italic;border:1px solid navy;">
       Student Registration
    </legend>
  
    <input type="text" placeholder="First name" name="firstname"><br /><br />
    <input type="text" placeholder="Last name" name="lastname"><br /><br />
    <input type="text" placeholder="City" name="city"><br /><br />

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

Attributes for <legend>

The <legend> element has no attributes, but it does accept global attributes.
The following are commonly used.

Attribute Value Description
id    value Provides the legend element with a unique identifier.
class    classnames Assigns one or more classnames to the legend element.
style    CSS-values Assigns CSS style values to the legend element.

For additional global attributes see our global attributes list.


Form Tags

The <legend> tag is part of a group of tags that are used to create data entry forms. This group is referred to as the Form tag group. Together, these tags allow you to create comprehensive data input solutions.

Here is a list of form tags

Element Description
<form> Defines a data entry area that contains input elements
<input> Creates an input field in which data can be entered
<label> Creates a label or brief description before input elements
<textarea> Creates a multi-line text input control
<select> Creates a dropdown control
<button> Creates a clickable button that can contain text or an image
<datalist> Specifies a list of options for a textfield (<input>) element
<fieldset> Groups related form elements and displays a box with a legend around these
<legend> Defines a caption for a fieldset

Browser support

Chrome
1.0 Sep 2008
Firefox
1.0 Sep 2002
IE/Edge
1.0 Aug 1995
Opera
1.0 Jan 2006
Safari
1.0 Jan 2003

You may also like

Guides