HTML placeholder versus label: keep field identity visible

Why this choice matters

A depot search form asks for a case reference. The visible label remains present after a reference is entered, and the placeholder shows one valid shape without becoming the only instruction. A person reviewing an autofilled form should still know what each value means. If the rule needs more than a short example, place persistent help text outside the control and associate it with aria-describedby.

<form action="/cases/search" method="get">
  <label for="case-reference">Case reference</label>
  <p id="reference-format">Use the two-letter, four-digit code on your receipt.</p>
  <input id="case-reference" name="reference" placeholder="AB0047" aria-describedby="reference-format" pattern="[A-Z]{2}[0-9]{4}" required>
  <button type="submit">Find case</button>
</form>

What it does not do

The browser may display placeholder text differently across devices; it is not a submitted default value. The pattern is a syntax check, and the server still owns lookup and access control.

Cost and operational limits

A separate label and help paragraph add little markup. They reduce error and rework when a form is revisited with saved or autofilled values; relying on placeholder alone makes that state harder to read.

Common Mistakes

• Do not put the only field name in placeholder.
• Do not assume placeholder text will be submitted.
• Do not confuse a matching code shape with permission to view a case.

Connected lessons

• HTML labels: bind each control to a durable accessible name
• HTML form help: connect visible instructions and errors to a control
• HTML pattern: validate a field's syntax without claiming identity
• HTML search element: mark a search interface by purpose

Related CSS decisions

• CSS ::placeholder: keep example text readable and disposable