A placeholder is not an input label
Build a form field with a visible label and a useful example hint. Learn what for, id, and placeholder each contribute.
A field that says “Email address” inside its empty box looks understandable—until someone starts typing. The placeholder disappears, taking the instruction with it. A visible label keeps the purpose of the field available.
Give the field a persistent name
A label describes what belongs in a field. Connect it to the input by matching the label’s for value to the input’s id. That association also helps assistive technology identify the control.
<label for="email">Email address</label>
<input
id="email"
name="email"
type="email"
autocomplete="email"
placeholder="you@example.com"
>Let the placeholder do a smaller job
Here, the label names the field and the placeholder offers an example format. The example can disappear without making the field’s purpose disappear. Avoid putting essential requirements only in a placeholder.
Keep longer instructions outside the input
If the field needs an explanation, put it in visible text nearby. Use aria-describedby to connect that explanation to the control. This adds a description while preserving the label as its name.
<label for="handle">Public name</label>
<p id="handle-hint">Use 3–20 letters or numbers.</p>
<input id="handle" name="handle"
aria-describedby="handle-hint"
pattern="[A-Za-z0-9]{3,20}" required>The pattern is a browser-side check for this example. A real service still needs to validate the value on the server.
In the forms lesson, click the label and check that the field receives focus. Type a value and make sure the purpose of the field remains visible. Then try submitting an invalid email.
Further reference: MDN Web Docs ↗
Try the editable example ↗