Auth forms: autocomplete tokens (username/password/OTP)

Quick take

• Autocomplete is an accessibility feature: it reduces re-typing and errors.
• For auth flows, use: username, current-password, new-password, one-time-code.
• Prefer single-field OTP; don’t block paste.

• Identifier field: autocomplete="username" (even if it’s an email address).
• Password field: autocomplete="current-password".

<input name="username" autocomplete="username" autocapitalize="none" spellcheck="false">
<input name="current-password" type="password" autocomplete="current-password">

• New password fields: autocomplete="new-password" (don’t reuse current-password).
• If you have “confirm password”, also use new-password.

• Use one field + autocomplete="one-time-code".
• Use inputmode="numeric" for a numeric keypad on mobile.
• Don’t block paste.

<input name="otp" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]*">

Micro-demo

See the BEFORE/AFTER markup side-by-side: Auth autocomplete demo.