HTML autocomplete and inputmode: describe purpose and keyboard hints

Last updated: 5 Oct 20266 min read

tutorial

autocomplete names the value a field expects; inputmode suggests an input interface without changing the field's data type.

Use it for a real task

A review form asks for the reviewer's email and a numeric reference code. Email is a meaningful field purpose, so the browser can offer a stored address where appropriate. The reference remains text because leading zeros matter; inputmode hints at a numeric keyboard on touch devices, but a physical keyboard and pasted text still work. Both values are checked by the receiving service.

<form action="/receipts/lookup" method="post">
  <label for="reviewer-email">Reviewer email</label>
  <input id="reviewer-email" name="email" type="email" autocomplete="email">
  <label for="reference-code">Reference code</label>
  <input id="reference-code" name="reference" type="text" inputmode="numeric" pattern="[0-9]{6}">
  <button type="submit">Find receipt</button>
</form>

What the markup guarantees

The numeric keyboard is a hint, not a lock. The six-character pattern describes the client constraint, while the endpoint must handle malformed, missing, and unauthorized references. The POST body still needs transport security and careful handling of personal data in logs.

Cost and limits

No script is needed for these hints. The network and privacy costs belong to the form submission and its backend, so keep collected fields limited to what the lookup needs.

Common Mistakes

Do not confuse inputmode with input validation.
Do not set autocomplete values that misdescribe the field.
Do not log private form values without an operational need.

Connected lessons

Form and type styling

CSS autofill state: retain contrast when the browser fills a control

html

forms