HTML Legend Tag: What Are The Uses Of Legend Tag In HTML Form

  • Post category:HTML
  • Post author:
  • Post last modified:May 26, 2022
  • Reading time:5 mins read
You are currently viewing HTML Legend Tag: What Are The Uses Of Legend Tag In HTML Form

HTML legend tag is an important element of an HTML Form. You need to have a clear understanding of what is HTML legend tag, How it works. In this post, we describe what is legend tag. These tags are used in HTML Form to define a caption for the fieldset element. It improves the looks of HTML Form and properly define the HTML Form element.

The legend element in HTML represents a caption for the fieldset element. It improves the readability of a user. and it properly describes what information users have to be filled under the fieldset element. let’s learn the legend tag syntax with proper examples.

HTML Legend Tag – Syntax

html legend tag

The legend tag in HTML starts with the opening <legend> tag and closed with closing </legend> tag. And The Caption text is written between the opening legend tag and closing legend tag.

Example Of HTML Legend Tag

<form action="action_page">
<fieldset>
<legend>Personal Information</legend>
<label>Name</label>
<input type="name">
<label>Mobile</label>
<input type="number">
<label>Age</label>
<input type="number">
</fieldset>
</form>
Personal Information



Legend Element Attributes

The legend tag does not have any specific attribute for itself. It supports HTML all global attributes and event attributes also.

Default CSS Of Legend Tag

Here is the default CSS of the legend tag that is used by a browser.

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

Legend element style

You can also add a custom style to the HTML legend tag.

Example

<!doctype html>
<html>
<head>
<style>
    legend{
        background-color: grey;
        color: white;
        padding: 5px;
    }
</style>
</head>
<body>
<form>
<fieldset>
<legend>Personal Information</legend>
<label>Name</label>
<input type="text"><br><br>
<label>Ph. Number</label>
<input type="number"><br><br>
<label>Age</label>
<input type="number">
</fieldset>
</form>
</body>
</html>

Result

Personal Information



Chapter Summary (HTML legend tag)

  • Usually, the Legend tag is used to represent a caption for the fieldset element.
  • Remember legend tag can contain another HTML tag also.
  • Legend tag supports HTML global attribute and HTML event attribute also.
  • The browser uses a default CSS property for the legend tag, you can change it using your custom CSS.

Ashim Khatua

Professionally Web Developer since 2015, And also a Blogger. I am the founder of SiteCodings.com. I love to share my knowledge, which I earned the past few years. I want to share my knowledge with you through my Blog. Keep Reading.

Leave a Reply