Problem Statement
What does the placeholder attribute do?
Explanation
The placeholder attribute shows hint text inside an input field that disappears when the user starts typing. Placeholders provide examples or instructions about what to enter. For example, placeholder equals Enter your email shows light gray text saying Enter your email until the user clicks and starts typing. Placeholders improve user experience by providing guidance without taking up extra space. However, placeholders should not replace labels. Labels should always be present because placeholders disappear when users start typing, and some screen readers may not announce them. Placeholders are best used for additional hints or examples, like showing a phone number format. Use clear, concise placeholder text that helps users understand what input is expected. Never use placeholder as the only label, as this creates accessibility issues.
Code Solution
SolutionRead Only
<!-- Placeholders with labels -->
<form>
<label for="email">Email:</label>
<input type="email"
id="email"
name="email"
placeholder="you@example.com">
<label for="phone">Phone:</label>
<input type="tel"
id="phone"
name="phone"
placeholder="(555) 123-4567">
</form>
<!-- Placeholder as format example -->
<form>
<label for="date">Birth Date:</label>
<input type="text"
id="date"
name="birthdate"
placeholder="MM/DD/YYYY">
</form>
<!-- BAD: Placeholder as only label (accessibility issue) -->
<form>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
</form>
<!-- GOOD: Label plus placeholder -->
<form>
<label for="username">Username:</label>
<input type="text"
id="username"
name="username"
placeholder="Choose a unique username">
</form>