HTML <label> Tag – Input Label
📌 Introduction
The <label> tag is used to define a text label for an input field.
It improves:
- User experience (UX)
- Accessibility (screen readers)
- Click behavior (clicking label focuses input)
🧱 Syntax
<label>Username</label> <input type="text" />
💡 Example
<!DOCTYPE html>
<html>
<head>
<title>Label Example</title>
</head>
<body>
<h2>Login Form</h2>
<form>
<label>Username:</label>
<input type="text" />
<br /><br />
<label>Password:</label>
<input type="password" />
<br /><br />
<button type="submit">Login</button>
</form>
</body>
</html>
🖥️ Output Explanation
- Each input has a text description
- Users understand what to type
- Makes form easier to use
🎯 Best Practice (IMPORTANT)
🔗 Connect label with input using for + id
<label for="username">Username:</label> <input type="text" id="username" />
✔ Clicking the label focuses the input
🧠 Why <label> is Important
1. ♿ Accessibility
Screen readers read labels properly.
2. 🖱️ Better UX
Clicking the label selects the input.
3. 📊 Professional Forms
All real websites use labels correctly.
🧩 Example (Proper Form)
<form>
<label for="email">Email:</label>
<input type="email" id="email" />
<br /><br />
<label for="pass">Password:</label>
<input type="password" id="pass" />
</form>
⚖️ Label Methods
1. Wrapped Label
<label>
Username
<input type="text" />
</label>
✔ No need for for and id
2. Connected Label (Best Practice)
<label for="name">Name</label> <input id="name" />
✔ Recommended in real projects
🚫 Common Mistakes
- Missing labels ❌
- Not connecting with
for❌ - Using placeholder instead of label ❌
🎨 Styling Example
<label style="font-weight:bold;">Email:</label> <input type="email" />
🧪 Mini Exercise
Create a form with:
- Name input + label
- Email input + label
- Password input + label
- Proper
forandidconnections - Submit button