What is the tag used for?

The tag provides a title or a caption for a group of related form elements. It should be used with the tag, which is used to group related form elements together.

Table of contents

Syntax of Legend Tag in HTML

Attributes of legend tag in HTML

2.1.

Tag Specific Attributes

2.2.

Global Attributes

2.3.

Event Attributes

2.3.1.

Form Events

2.3.2.

Keyboard Events

2.3.3.

Mouse Events

2.3.4.

Drag Events

2.3.5.

Clipboard Events

Usage of <legend > Tag

Examples

4.1.

Example 1- Online Form

4.2.

Example 2: Contact Information Form

4.3.

Example 3: Survey Form

Accessibility Considerations

Styling the <legend> Tag

Best Practices for using <legend> tag in HTML

Frequently Asked Questions

8.1.

What is the legend tag in HTML used for?

8.2.

How does the legend tag in HTML improve accessibility?

8.3.

Can the <legend> tag be styled using CSS?

8.4.

Can we use the legend tag in the table?

Conclusion

Last Updated: Jul 15, 2024

Medium

<legend> Tag in HTML

Author Tisha

The <legend> tag in HTML is used to define a caption for the <fieldset> element. The <fieldset> element is used to group related elements within a form, and the <legend> provides a title for the group, making the form more accessible and easier to understand.

The <legend> tag in HTML is used with the <fieldset> tag. When the <legend> tag is used, it should be the first child element of the <fieldset> tag.

In this article, we will discuss about the legend tag in HTML in depth. We will discuss its syntax, example, accessibility considerations, best practices, etc.

Syntax of Legend Tag in HTML

The syntax for the legend tag in HTML is below with an example.

<legend>Text</legend>

Example-

<fieldset>
  	<legend>Coding Ninjas</legend>
  	<label for="name">Your Name:</label>
  	<input type="text" id="name" name="name"><br><br>
  	<label for="email">Your Email:</label>
  	<input type="email" id="email" name="email"><br><br>
</fieldset>

In this example, the <legend> tag provides a caption for the group of form elements that follow it. The text "Coding Ninjas" will be displayed as the caption for the group of form elements.

The <legend> tag can be used in various ways to provide captions or titles for different groups of form elements. For example, use the <legend> tag to provide a caption for a group of radio buttons, checkboxes, or select menus.

Attributes of legend tag in HTML

The <legend> tag is used within <fieldset> elements to provide a caption or description for a group of related form controls. It doesn't have any unique attributes of its own.

Tag Specific Attributes

The <legend> tag has no specific attributes; it relies on the attributes and properties of the parent <fieldset> tag for styling and behavior.

Attribute	Key	Description
align	align, top, bottom, left, right	The alignment of the content

Global Attributes

Global attributes can be used with any HTML element, including <legend>. Examples include class, id, style, and title.

Attribute	Description
class	Assigns CSS classes for custom styling.
id	Provides a unique identifier for scripting.
style	Adds inline CSS styles for precise control.
accesskey	Defines a keyboard shortcut for quick access.
contenteditable	Enables content editing if set to "true."
dir	Specifies text direction: "ltr" or "rtl".

Event Attributes

Event attributes, like onclick and onmouseover, can be used with the <legend> tag to define JavaScript behavior that responds to user interactions with the caption.

onabort
onblur
onclick
onfocus
onkeydown
onkeypress
onkeyup
onload
onmouseenter

Form Events

Form events like onblur and onfocus can also be applied to the <legend> tag to trigger actions when users interact with form elements associated with the fieldset.

Attribute	Description
onblur	Occurs when an element loses focus.
onchange	Fires when the value of an input element changes.
onfocus	Occurs when an element gains focus.
oninput	Triggers when the value of an input element is entered.
onreset	Executes when a form is reset.
onsubmit	Occurs when a form is submitted.

Keyboard Events

Keyboard events like onkeydown and onkeyup can capture keyboard input events related to the legend element.

Attribute	Description
onkeydown	Fires when a key is pressed down.
onkeypress	Occurs when a key is pressed and released.
onkeyup	Executes when a key is released.

Mouse Events

Mouse events like onmousedown and onmouseup can be applied to the <legend> tag to respond to mouse actions.

Attribute	Description
onclick	Occurs when the user clicks the mouse button.
ondblclick	Fired when the user double-clicks the mouse button.
onmousedown	Fires when a mouse button is pressed down.
onmouseup	Occurs when a mouse button is released.
onmousemove	Executes as the mouse pointer moves over an element.
onmouseover	Fired when the mouse pointer enters an element.

Drag Events

Drag events like ondragstart and ondragend can be used if drag-and-drop functionality is implemented within the fieldset.

Attribute	Description
ondrag	Fired when an element or text selection is being dragged.
ondragend	Occurs when the user has finished dragging an element or selection.
ondragenter	Fires when the mouse pointer enters a draggable element.
ondragleave	Occurs when the mouse pointer leaves a draggable element.

Clipboard Events

Clipboard events like oncut and oncopy can be used to manage clipboard-related interactions within the <legend> element and associated form controls.

Attribute	Description
oncopy	Fired when the user copies content to the clipboard.
oncut	Occurs when the user cuts content to the clipboard.
onpaste	Fires when the user pastes content from the clipboard.

Usage of <legend > Tag

Explain in 3-4 pointers

Examples

Give 3 examples

Example 1- Online Form

<!DOCTYPE html>
<html>
	<head>
	<title>Use <legend> Tag in HTML</title>

	<style>
	legend {
	font-size 1.7em;
	font-weight: bold;
	color: #333;
	}
	</style>

	</head>
	<body>
		<form>
			<fieldset>
				<legend>Coding Ninjas Code</legend>
				<label for="name">Your Name:</label>
				<input type="text" id="name" name="name"><br><br>
				<label for="email">Your Email:</label>
				<input type="email" id="email" name="email"><br><br>
				<label for="phone">Your number:</label>
				<input type="tel" id="phone" name="phone">
				<br><br>
			</fieldset>
			<fieldset>
    				<legend>Favorite Colors</legend>
    				<label for="red">Red</label>
    				<input type="checkbox" id="red" name="color" value="red"><br>
    				<label for="blue">Blue</label>
    				<input type="checkbox" id="blue" name="color" value="blue"><br>
    				<label for="green">Green</label>
    				<input type="checkbox" id="green" name="color" value="green">
    				<br>
			</fieldset>
			<fieldset>
    			<legend>Favorite Sport</legend>
    			<label for="sport">Choose your favorite sport:</label>
    			<select id="sport" name="sport">
        			<option value="football">Football</option>
        			<option value="basketball">Basketball</option>
        			<option value="soccer">Soccer</option>
        			<option value="tennis">Tennis</option>
    			</select>
			</fieldset>
			<br>
			<button type="submit">Submit</button>
		</form>
	</body>
</html>

Output

Example 2: Contact Information Form

<form>
  <fieldset>
    <legend>Contact Information</legend>
    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone">
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </fieldset>
</form>

Example 3: Survey Form

<form>
  <fieldset>
    <legend>Survey</legend>
    <label for="age">Age:</label>
    <input type="number" id="age" name="age">
    <br>
    <label for="gender">Gender:</label>
    <select id="gender" name="gender">
      <option value="male">Male</option>
      <option value="female">Female</option>
      <option value="other">Other</option>
    </select>
  </fieldset>
</form>

Accessibility Considerations

Use of the <legend> tag can help in improving the accessibility of your HTML forms. When the <legend> tag is used, screen readers can announce the caption or title for the group of form elements. It makes it easier for users with disabilities to understand the form's purpose.

In addition to providing captions or titles for group form elements, the <legend> tag can provide instructions or additional context. For example, use the <legend> tag to provide instructions for filling out a complex form or to provide context for a group of related form elements.

Styling the <legend> Tag

The <legend> tag can be styled using CSS. It allows you to customize the appearance of the caption or title for the group of form elements. Here is an example:

legend {
  font-size 1.8em;
  font-weight: bold;
  color: #0000FF;
}

Best Practices for using <legend> tag in HTML

Here are some best practices for using the legend tag in HTML forms:

Always use the <legend> tag with the <fieldset> tag.
Keep the text of the <legend> tag short and descriptive.
Use the <legend> tag to provide captions or titles for groups of form elements.
Consider using the <legend> tag to provide instructions or additional context for the form.
Use CSS to customize the <legend> tag's appearance to match your website's design.

Check this out, indexOf in JavaScript

Frequently Asked Questions

What is the legend tag in HTML used for?

The <legend> tag provides a title or a caption for a group of related form elements. It should be used with the <fieldset> tag, which is used to group related form elements together.

How does the legend tag in HTML improve accessibility?

By using <legend> tag, screen readers can announce the caption or title for the group of form elements, making it easier for users with disabilities to understand the form's purpose. Additionally, the <legend> tag can provide instructions or additional context for the form, improving accessibility.

Can the <legend> tag be styled using CSS?

Yes, the <legend> tag can be styled using CSS, allowing you to customize the appearance of the caption or title to match the design of your website. This can include changing the font, font weight, size, and color of the <legend> tag.

Can we use the legend tag in the table?

No, the <legend> tag is specifically designed for use with the <fieldset> element in HTML forms and is not used in tables.

Conclusion

This article taught about <legend> tag in HTML. The <legend> tag is a valuable tool for improving the accessibility and usability of HTML forms. By providing captions or titles for groups of form elements, screen readers can announce the form's purpose to users with disabilities, making it easier for them to interact with the website.

Additionally, the <legend> tag can be styled using CSS, allowing you to customize the appearance of the caption or title to match the design of your website. By following best practices for using the <legend> tag, you can create more accessible and user-friendly HTML forms that will improve the user experience for all visitors to your website. Must read Built-in Helpers in web2py A to Z.

You may refer to our Guided Path on Code 360ing Ninjas Studio for enhancing your skill set on DSA, Competitive Programming, System Design, etc. Check out essential interview questions, practice our available mock tests, look at the interview bundle for interview preparations, and so much more!