html
  1. html-label-tag

HTML <label> Tag

  • The HTML <label> tag represents a caption or a descriptive text for a form element.
  • It is commonly used along with the <input> element.

Syntax

<label for="input_element_id">Text for the label</label>

The required attribute "for" specifies the ID of the form element the label is associated with.

Example

<label for="username">Username:</label>
<input type="text" id="username" name="username">
Try Playground

Here, the label "Username" is associated with the input field "username" using the "for" attribute.

Explanation

  • The <label> element is used to identify the purpose of a form element for users who use assistive technologies like screen readers.
  • The "for" attribute must be used to specify which form element the label is associated with. When a user clicks on the label, it will automatically activate and put focus on the associated form field.

Use

The <label> tag is used to make web forms more accessible for users, especially those who rely on assistive technologies. It is also used for better usability as it makes it easier for users to select the correct input field.

Important Points

  • The "for" attribute of the label element must be the same as the "id" attribute of the input element to which the label is associated.
  • Nested labels are not allowed in HTML.

Summary

The HTML <label> tag is used to provide a caption or descriptive text for a form element. It is associated with a form element using the "for" attribute. It is useful for improving accessibility and usability of web forms.

Published on: