A form can look clean when empty and become confusing as soon as someone starts using it. If the only description of a field sits inside that field, typing may remove the information needed to check the answer.
Visible labels and placeholders have different jobs. A label identifies the requested information. A placeholder can offer a short example or hint. Designing them as interchangeable elements makes a form harder to understand.
Connect the label to its control
W3C guidance recommends associating labels with form controls. For an explicit HTML association, the label’s for value must match the control’s id.
This association helps assistive technology identify the control and gives users a larger clickable label area.
For example:
<label for="contact-email">Email address</label>
<input
id="contact-email"
name="email"
type="email"
placeholder="name@example.com">The label explains what is requested. The placeholder illustrates the format.
Neither needs to carry the entire explanation of how the business will use the information. Longer guidance belongs in readable supporting text.
Keep essential information outside the placeholder
MDN explains that placeholder text disappears once a user enters a value. It also warns that placeholders should not replace labels and notes potential contrast difficulties.
This is especially relevant during review. Someone returning to a completed form should be able to understand each field without deleting its content to reveal the hint.
Imagine a registration form with two date fields and no visible labels. Once both contain dates, the user may struggle to remember which means the start date and which means the end date.
Persistent labels solve that problem directly.
Write labels around the decision people must make
A short label should still be specific. “Name” may be sufficient in a simple contact form, but a business process might need “Company name” or “Contact person’s name.”
Avoid making people infer the requested information from the page’s overall topic.
For a hypothetical workshop form, “Number of attendees” is more informative than “Quantity.” A placeholder such as “2” can provide an example, but it should not carry the field’s identity.
Use examples carefully. They should illustrate acceptable input without looking like a value the user has already supplied.
Review the populated form
Design reviews often focus on the empty state because it looks orderly. Test the form with realistic content instead.
Enter a long name, an email address, and any optional information. Move between fields with the keyboard. Confirm that each control still has a clear identity and that instructions remain available.
Check narrow screens as well. W3C notes that labels placed above controls can help reduce horizontal scrolling, although the complete layout still needs assessment.
Finally, review error messages alongside labels. A message should identify the affected field clearly and explain what needs attention.
A good form remains understandable before entry, during typing, and after completion. Visible, correctly associated labels provide that continuity, while placeholders remain brief supporting hints.
