Reference · Beginner
The input element
Collect a bounded value with an input whose type, label, name, autocomplete, constraints, and error behavior match the task.
- Published
- Last checked
Definition
input is a form-associated element whose behavior depends on its type.
Text-like inputs collect one-line values; other types represent checkboxes,
radios, files, dates, ranges, colors, hidden values, and submission controls.
Minimal syntax
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required />The label supplies a persistent accessible name. The name determines the key
used in submission. An id connects the label but does not submit the value.
Key attributes
Choose the most accurate supported type, then consider autocomplete,
inputmode, required, minlength, maxlength, min, max, step, and
pattern. Placeholder text is an example or hint, not a replacement label.
readonly preserves submission while preventing edits; disabled normally
removes the control from interaction and submission.
Browser behavior
Type influences the mobile keyboard, parsing, native picker, validation, and accessible role. Browser support and user-interface details vary. Constraint validation can block submission, but client checks are not security and do not replace server validation.
Accessibility
Associate visible instructions and errors with stable identifiers through
aria-describedby. Set aria-invalid only after the value is known to be
invalid. Keep labels and requirements visible, allow paste, preserve safe values
after rejection, and make the target large enough to operate.
Common misuse
- Omitting
name, so the server receives no value. - Using placeholder text as the only label.
- Disabling paste or password-manager input.
- Trusting a browser-valid value as authorized or safe.
- Selecting a type that changes the expected keyboard or semantics.
Verification checklist
Inspect the control's name, role, value, description, and required state in the accessibility tree. Submit empty, malformed, boundary, and valid values with JavaScript enabled and disabled. Inspect the request payload, then verify server-side rejection, retained safe values, autofill, paste, keyboard use, 200% zoom, and 320-pixel reflow.
Maintenance note
When the data model changes, review the label, input type, autocomplete token, constraints, server schema, retention, and analytics together. Updating only the visible field can leave an incompatible submission contract.