❮ Previous Next ❯

HTML <legend> tag

The <legend> tag is used to define caption in the <fieldset> element. It may assign as a first or last child for the figure element.

Type: Block Element

Syntax of <fieldset> tag

<fieldset>
  <legend>Name</legend>
  Form elements
</fieldset>

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<legend> Yes Yes Yes Yes Yes

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form>
  <fieldset name="groupName" form="formId">
    <legend> Contact Form </legend>
    Name: <input type="text"> <br>
    Address: <input type="text">
  </fieldset>
</form>
</body>
</html>
Run The code »

Output on the browser

Contact Form Name:
Address:

Attributes of <legend> tag

Attribute Value Note
align left
right
top
bottom		 It defines the alignment of the caption.

Example of using align attribute (Obsolete)

<legend align="center">
  Name
</legend>

Modern CSS replacement

<legend style="text-align:center;">
  Name
</legend>

More reference

Adding <legend> tag helps you more attractive on your form. It must be defined only inside the <fieldset> element; otherwise, it may be invalid. Its content must be directly related to the corresponding <fieldset> element. Only one <legend> tag should be defined for each <fieldset> element.

Default CSS properties of <legend> tag

legend {
  display:block;
  padding-left:2px;
  padding-right:2px;
  border:none;
}
❮ Previous Next ❯