We’ll only use this to sign you in.
No punctuation allowed.
Type in Email — the gray hint that vanishes is the placeholder
Form Field
/ <label for> · ::placeholder /
also called text field, input field, form input, form control
“The gray text inside the box that disappears when you type” is the placeholder — one of five parts of a form field that each have a real name. The word above the box is the label (<label for>), the little red star is the required indicator, the small gray line underneath is helper text, and the red line that replaces it is the validation message. Wiring them up (for/id, aria-describedby, aria-invalid) is what makes the field usable by screen readers, not just sighted users.
Anatomy — every part, named
- 1Label
<label for="…">“The word above the box” is the label — a real <label> tied to the input by for/id, so clicking it focuses the field.
- 2Required indicator
required“The little red star” marks a required field — the asterisk is decoration; the input itself carries the required attribute.
- 3Placeholder
::placeholder“The gray text inside the box that disappears when you type” is the placeholder — an example or hint, never a substitute for the label.
- 4Helper text
aria-describedby“The small gray line under the field” is helper text — link it to the input with aria-describedby so screen readers announce it.
- 5Error message
aria-invalid="true"“The red text under the box” is the validation message — pair the red border (aria-invalid, :user-invalid) with a message the field references.
Prompt — paste into your agent
Build the form field with full anatomy: a real <label for> above the input (clicking it focuses the field), placeholder text as a hint only — never as the label, helper text below linked via aria-describedby, and required marked with the required attribute plus a visual asterisk. On invalid input set aria-invalid="true", style the red state with :user-invalid, and point aria-describedby at the error message.
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| HTML | <label for> | |
| CSS | ::placeholder | |
| ARIA | aria-describedby | links helper/error text to the input |
| ARIA | aria-invalid | |
| CSS | :user-invalid | invalid only after interaction |
| HTML | required |