Why is the placeholder attribute on an HTML input not an acceptable replacement for a <label> element?

## What placeholder is for `placeholder` takes a short hint about the *expected value* of a field — an example format, a sample entry. It is shown in the control while the control is empty, and it is removed the moment the control has a value. That is the whole feature. It was never a naming mechanism, and the HTML specification is explicit that the attribute should not be used as an alternative to a `<label>`. The pattern persists because it looks clean in a mock-up: one line of markup, no label row, a tidy grid of boxes. The failures show up later, on real users, with real data. ## Failure one: it disappears exactly when it is needed ```html <!-- Looks fine until someone types --> <input type="text" placeholder="Date of birth (MM/YYYY)"> ``` The hint is visible while the field is empty and gone once it is not. So the field is self-describing during the two seconds you do not need help, and anonymous for the rest of the form's life: when the user tabs back to check an entry, when they are interrupted and return, when they review everything before submitting, when a validation error sends them back to "fix the third box". This imposes a memory cost on everyone and a hard barrier on users with cognitive or memory impairments, and it makes correction — the most error-prone moment in any form — the moment with the least context. ## Failure two: it is an unreliable accessible name A label creates a defined association: this element names that control. A placeholder is a hint attribute, and whether assistive technology treats it as a name, as a description, or ignores it entirely varies across browser and screen-reader combinations. Even where something is announced, you have made a required piece of information depend on a fallback path rather than on the mechanism designed to carry it. Voice-control users are hit similarly: they speak the visible label to target a field, and once the user has typed there is no visible text to speak. ## Failure three: it reads as content Grey text inside a box looks like a filled-in value to a great many users. The observable consequence is skipped fields and "the form said it was already filled" support tickets. The low-contrast rendering that makes hint text look like a hint is also the rendering that makes it hard to read for anyone with reduced vision, and authors who fix the contrast make it look even more like a real value. There are two smaller effects worth knowing. Browser translation features handle visible element text more consistently than they handle placeholder strings, so a placeholder-only form can end up partly untranslated. And a placeholder cannot be clicked to focus the field the way label text can, so you lose the enlarged hit target as well. ## What to do instead Keep a persistent, visible `<label>` associated with every control, and use `placeholder` only for something a label should not say — a concrete example of the format: ```html <label for="dob">Date of birth</label> <input type="text" id="dob" name="dob" placeholder="MM/YYYY"> ``` Even here, be honest about the cost: that format example also disappears on the first keystroke. If the format is genuinely necessary to fill the field correctly, put it in persistent text near the control (or in the label itself) rather than in the placeholder. A float-label pattern — placeholder-looking text that animates up into a label position on focus — keeps a visible name after typing and is a real improvement over placeholder-only, but only when it is built from an actual `<label>` element rather than from a placeholder plus styling. The question to ask of any such design is simply: after the user has typed, is there still text on screen naming this field, and is that text a label element associated with the control? ## How to say this in an interview Lead with the mechanism, not the rule. "A placeholder is a hint about the value and it is removed when there is a value, so it cannot carry the field's identity — identity has to persist through typing, review, and error correction. It is also only a fallback for the accessible name, which makes announcement browser-dependent." That answer shows you know *why* the guidance exists, which is what separates it from having memorised a lint rule.