Labels and placeholders are essential for creating accessible, user-friendly forms. While they may seem similar, they serve different purposes. Labels are crucial for accessibility, while placeholders provide helpful hints. Understanding the difference is key to building great forms.
The Label Element
The <label> element provides a text description for form inputs. It's not just about appearance—it's a critical element for accessibility and usability.
Why Labels Matter
- Accessibility: Screen readers announce labels to visually impaired users
- Clickable area: Clicking a label focuses its associated input
- Context: Labels remain visible even when the input has a value
- Mobile-friendly: Increases the tap target area for better mobile experience
Connecting Labels to Inputs
There are two ways to associate a label with an input:
Method 1: Explicit Association (Recommended)
Use the for attribute on the label that matches the id of the input:
explicit-label.html
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">This method is preferred because the label and input can be anywhere in the DOM, and it's more flexible for styling.
Method 2: Implicit Association
Wrap the input inside the label element:
implicit-label.html
<label>
Username:
<input type="text" name="username">
</label>
<label>
Email Address:
<input type="email" name="email">
</label>While this works, the explicit method (using for and id) is generally preferred for better flexibility.
Practical Label Examples
Basic Form with Labels
form-with-labels.html
<form>
<div>
<label for="firstname">First Name:</label>
<input type="text" id="firstname" name="firstname" required>
</div>
<div>
<label for="lastname">Last Name:</label>
<input type="text" id="lastname" name="lastname" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<button type="submit">Submit</button>
</form>Labels for Checkboxes and Radio Buttons
Labels are especially important for checkboxes and radio buttons:
checkbox-labels.html
<div>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Subscribe to newsletter</label>
</div>
<div>
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree to the terms and conditions</label>
</div>
<!-- Radio buttons -->
<fieldset>
<legend>Select your preferred contact method:</legend>
<input type="radio" id="contact-email" name="contact" value="email">
<label for="contact-email">Email</label>
<input type="radio" id="contact-phone" name="contact" value="phone">
<label for="contact-phone">Phone</label>
<input type="radio" id="contact-mail" name="contact" value="mail">
<label for="contact-mail">Mail</label>
</fieldset>Placeholders
The placeholder attribute displays hint text inside an input field that disappears when the user starts typing.
placeholder-examples.html
<input type="text" placeholder="Enter your username">
<input type="email" placeholder="you@example.com">
<input type="tel" placeholder="+1 (555) 123-4567">
<input type="search" placeholder="Search for products...">When to Use Placeholders
Placeholders are great for:
- Showing format examples (phone numbers, dates, etc.)
- Providing additional hints or suggestions
- Indicating optional information
- Giving context for what to enter
Labels vs. Placeholders
It's crucial to understand that labels and placeholders are NOT interchangeable. They serve different purposes.
❌ Common Mistake: Using only placeholders without labels is a major accessibility problem. Screen readers often don't announce placeholders, and placeholders disappear when users start typing.
labels-vs-placeholders.html
<!-- BAD: Only placeholder, no label -->
<input type="email" name="email" placeholder="Email Address">
<!-- GOOD: Label + helpful placeholder -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="you@example.com">
<!-- BAD: Placeholder replacing label -->
<input type="text" name="phone" placeholder="Phone Number">
<!-- GOOD: Label with format example in placeholder -->
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" placeholder="+1 (555) 123-4567">Styling Labels and Inputs
Here's how to style labels and inputs for a professional look:
styled-form.html
<style>
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 600;
color: #333;
font-size: 14px;
}
input {
width: 100%;
padding: 10px;
border: 2px solid #ddd;
border-radius: 4px;
font-size: 16px;
transition: border-color 0.3s;
}
input:focus {
outline: none;
border-color: #4CAF50;
}
input::placeholder {
color: #999;
font-style: italic;
}
/* Required field indicator */
label.required::after {
content: " *";
color: red;
}
</style>
<form>
<div class="form-group">
<label for="name" class="required">Full Name</label>
<input
type="text"
id="name"
name="name"
placeholder="John Doe"
required
>
</div>
<div class="form-group">
<label for="email" class="required">Email Address</label>
<input
type="email"
id="email"
name="email"
placeholder="john@example.com"
required
>
</div>
<div class="form-group">
<label for="website">Website (optional)</label>
<input
type="url"
id="website"
name="website"
placeholder="https://yourwebsite.com"
>
</div>
</form>Accessibility Best Practices
Always Use Labels
Every input must have an associated label:
accessible-forms.html
<!-- Correct: Every input has a label -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<!-- Incorrect: Missing labels -->
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">Use Descriptive Labels
Labels should be clear and specific:
descriptive-labels.html
<!-- Good: Clear and descriptive -->
<label for="billing-address">Billing Address:</label>
<input type="text" id="billing-address" name="billing-address">
<!-- Bad: Too vague -->
<label for="address">Address:</label>
<input type="text" id="address" name="address">
<!-- Good: Specifies purpose -->
<label for="work-email">Work Email Address:</label>
<input type="email" id="work-email" name="work-email">
<!-- Bad: Ambiguous -->
<label for="email">Email:</label>
<input type="email" id="email" name="email">Placeholder Best Practices
Keep placeholders helpful but not essential:
placeholder-best-practices.html
<!-- Good: Label + example format -->
<label for="date">Birth Date:</label>
<input type="text" id="date" name="date" placeholder="MM/DD/YYYY">
<!-- Good: Label + helpful hint -->
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="3-20 characters">
<!-- Bad: Critical info only in placeholder -->
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Must be 8+ characters">
<!-- Better: Put requirements outside input -->
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<small>Must be at least 8 characters</small>Complete Accessible Form Example
accessible-form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Contact Form</title>
<style>
* {
box-sizing: border-box;
}
form {
max-width: 600px;
margin: 40px auto;
padding: 30px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h2 {
margin-top: 0;
color: #333;
}
.form-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
}
.required::after {
content: " *";
color: #e74c3c;
}
input, textarea {
width: 100%;
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 4px;
font-size: 16px;
font-family: inherit;
transition: border-color 0.3s;
}
input:focus, textarea:focus {
outline: none;
border-color: #3498db;
}
input::placeholder, textarea::placeholder {
color: #999;
}
.help-text {
display: block;
margin-top: 5px;
font-size: 14px;
color: #666;
}
button {
width: 100%;
padding: 14px;
background-color: #3498db;
color: white;
border: none;
border-radius: 4px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #2980b9;
}
</style>
</head>
<body>
<form action="/contact" method="post">
<h2>Contact Us</h2>
<div class="form-group">
<label for="name" class="required">Full Name</label>
<input
type="text"
id="name"
name="name"
placeholder="Jane Smith"
required
>
</div>
<div class="form-group">
<label for="email" class="required">Email Address</label>
<input
type="email"
id="email"
name="email"
placeholder="jane@example.com"
required
>
<span class="help-text">We'll never share your email with anyone else.</span>
</div>
<div class="form-group">
<label for="phone">Phone Number</label>
<input
type="tel"
id="phone"
name="phone"
placeholder="+1 (555) 123-4567"
>
</div>
<div class="form-group">
<label for="subject" class="required">Subject</label>
<input
type="text"
id="subject"
name="subject"
placeholder="How can we help you?"
required
>
</div>
<div class="form-group">
<label for="message" class="required">Message</label>
<textarea
id="message"
name="message"
rows="6"
placeholder="Tell us more about your inquiry..."
required
></textarea>
<span class="help-text">Minimum 10 characters</span>
</div>
<button type="submit">Send Message</button>
</form>
</body>
</html>Key Takeaways
- Labels are essential for accessibility—always use them
- Connect labels using the
forattribute and inputid - Clicking a label focuses its associated input
- Placeholders provide hints but should never replace labels
- Placeholders disappear when users type—labels don't
- Use descriptive, clear label text
- Screen readers rely on labels, not placeholders
- Indicate required fields visually (usually with an asterisk)
What's Next?
Now that you understand how to properly use labels and placeholders, the next lesson will cover the textarea element, which allows users to enter multiple lines of text—perfect for comments, messages, and longer form content.