Dozens of attributes tune inputs: defaults, lengths, formatting, masking, linkage to errors, hints for automation. Below is the high-signal set you use daily—each with a miniature example.
Attribute matrix (what affects what)
- Value & size
value,defaultValue(DOM),size,maxlength/minlength- Validity
required,pattern,min/max/step- Availability
disabled(skipped in submit),readonly(submitted)- Hints
placeholder,autocomplete,inputmode,list(datalist hook)- Multimedia-ish
multiple(email/file),accept/capture(files)
Example — lengths, placeholders, autocomplete
<input type="text" name="coupon" maxlength="8" placeholder="SHIP2026" autocomplete="off">Rendered
Example — pattern + visible label hint
<label for="zip">US ZIP (+4 optional)</label>
<input id="zip" inputmode="numeric" pattern="\d{5}(-\d{4})?" title="Five digits optionally dash four" placeholder="97205-1234">Rendered (try mismatched chars)
Example — readonly vs disabled
<input readonly value="submitted">
<input disabled value="omitted">Value & defaults
value: initial or submitted content.defaultValue(DOM property) differs from live value after edits.
Constraints
required,minlength/maxlength,pattern.min/max/stepfor numeric/temporal types.multipleon email/file/select (when applicable).
State
disabled: excluded from submission, unfocusable.readonly: still submits values but blocks edits.
Hints
placeholder is not a substitute for labels—it disappears when users type.
ARIA for errors
Toggle aria-invalid and reference descriptive elements when validation fails.
Easily overlooked input states
- Indeterminate checkboxes: tri-state UX via JS properties—expose meaning to SR with
aria-checked="mixed"patterns. - Controlled vs uncontrolled? in SPAs resetting forms after submit must restore defaults intentionally—otherwise stale values linger in memory DOM.
Assistive announcements
Use live regions sparingly when async validation completes—duplicate announcements annoy; silent failures exclude.
Important interview questions and answers
- Q: Why are native form controls preferred over custom div-based widgets?
A: They provide built-in semantics, keyboard support, validation hooks, and accessibility behavior. - Q: What does `name` do on form fields?
A: It determines the key sent in form submission payloads; without `name`, values are typically not submitted. - Q: When should you use `type="button"` instead of default buttons in forms?
A: Use `type="button"` for non-submit actions to avoid accidental form submission.
Pitfall: Placeholder is not a label—always associate a visible label.