Formulários no celular: teclado certo, autofill e máscaras

No celular, cada toque extra pesa. Um formulário que obriga a trocar de teclado, corrige o e-mail automaticamente ou não aceita colar um código perde gente no caminho.

O teclado certo para cada campo

• E-mail: type="email" e inputMode="email".
• Telefone: type="tel".
• CEP, CPF e números: inputMode="numeric".
• Valores: inputMode="decimal".

No React Native, keyboardType faz o mesmo papel.

Autofill e autocompletar

Use os atributos autocomplete corretos (name, email, tel, postal-code, one-time-code). O navegador e o sistema preenchem por você — e códigos de SMS entram com um toque.

Desligue o que atrapalha

Autocorreção e capitalização automática em e-mails, usuários e códigos.

Máscaras que não brigam com o usuário

Formate enquanto a pessoa digita, mas aceite colar o número com ou sem pontuação e não trave o cursor ao apagar.

Layout com teclado aberto

O botão de enviar não pode ficar escondido atrás do teclado. No app, use componentes que ajustam a tela; na web, teste em aparelhos reais (Testar em dispositivos reais: por que o emulador engana).

Validação

Na hora certa, com mensagens claras — os princípios de Formulários que convertem: validação em tempo real sem irritar o usuário e o cuidado com e-mails de Validação de e-mail além do regex: domínios inexistentes, typos e descartáveis.

Tamanho de fonte

Campos com menos de 16px fazem o iPhone dar zoom ao focar — o mesmo cuidado de Mobile-first real: estratégias de grid, tipografia e micro-interações fluidas para telas pequenas.

Veja apps e sites da We Codex ou fale com a gente.