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
<label for="inputId">Label Text</label>Attributes
| Attribute | Description |
|---|---|
| for | Associates the label with a form control’s id. |
| form | Specifies the form the label belongs to (useful if outside the form). |
| id | Assigns a unique ID to the label element. |
Example
<!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
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 |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
All major browser supports <lable> tag.
Notes
- Always use
<label>for better accessibility. - The
forattribute 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.
