HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

HTML Tags

HTML <label> Tag

The <label> tag is used to define a label for an HTML form control like <input>, <textarea>, or <select>.
Clicking the label automatically focuses the associated form control, improving usability and accessibility.

Associating labels with controls helps screen readers and improves user experience.

Syntax

html

<label for="inputId">Label Text</label>

Attributes

AttributeDescription
forAssociates the label with a form control’s id.
formSpecifies the form the label belongs to (useful if outside the form).
idAssigns a unique ID to the label element.

Example

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Label Example</title>
</head>
<body>
  <h2>Login Form</h2>
  <form action="/samples/form_processor.php" method="post">
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" placeholder="Enter your username" required><br><br>

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" placeholder="Enter your password" required><br><br>

    <input type="submit" value="Login">
  </form>
</body>
</html>

Output

Browser Output

html

You will see a form with labels next to text and password fields.
Clicking on the Username or Password label focuses the respective input field.
Use our TryIt Editor to test how labels improve usability.

Browser Support

Chrome
Edge
Firefox
Safari
Opera
IE9+
YesYesYesYesYesYes

All major browser supports <lable> tag.

Notes

  • Always use <label> for better accessibility.
  • The for attribute must match the id of the input.
  • Can be used with all types of inputs, including <textarea> and <select>.
  • Reduces the chance of users clicking the wrong field.

Conclusion

The <label> tag is essential for accessible and user-friendly forms.
It ensures that users and assistive technologies can correctly associate form controls with their descriptions.

PreviousHTML <optgroup> TagNextHTML <fieldset> Tag