O atributo type em <input> muda a interface, o teclado na tela (mobile) e a validação incorporada. Usar o tipo correto melhora a usabilidade e fornece validação gratuita.
html
O atributo type em <input> muda a interface, o teclado na tela (mobile) e a validação incorporada. Usar o tipo correto melhora a usabilidade e fornece validação gratuita.
Teclados móveis se adaptam — type="email" mostra a tecla @, type="tel" mostra um teclado numérico, type="number" mostra dígitos. Isso sozinho é um grande ganho de usabilidade em telefones.
Validação gratuita — type="email" rejeita not-an-email no envio, min/max limitam números, type="url" verifica um URL válido — nenhum JavaScript necessário.
<input type="radio" name="plan" value="free" /> Free
<input type="radio" name="plan" value="pro" /> Pro
<!-- same name = mutually exclusive; only one can be selected -->
Escolher o tipo de entrada correto oferece teclados móveis melhores, seletores nativos e validação incorporada gratuitamente — melhorando a acessibilidade e reduzindo o JavaScript que você teria de escrever.
É uma pequena escolha com um grande retorno em UX.