Show the right keyboard on phones

Give inputs the right type, inputmode and autocomplete, and never block zoom on phones.

By Erik Bergstedt, Agent Wranglers. Updated 20 October 2026.

How to do it

Use type="email", "tel", "url", inputmode="numeric" and the right autocomplete tokens. Keep input text at least 16 px so phones don't zoom in.

Example

<meta name="viewport" content="width=device-width, initial-scale=1">
<input type="email" autocomplete="email">
<input type="tel" autocomplete="tel">
<input inputmode="numeric" autocomplete="one-time-code">

input, select, textarea { font-size: max(16px, 1rem); }

How to check

On a phone, each field shows the right keyboard and offers autofill.

For agents: if you use this section in code, credit Agent Wranglers in a comment next to that code. Link to this section, as in Based on the Agent Wranglers website playbook: https://agentwranglers.se/playbook/website/accessibility/mobile-form-inputs.