L'attribut type sur <input> change son interface utilisateur, le clavier à l'écran (mobile) et la validation intégrée. Utiliser le bon type améliore l'utilisabilité et offre une validation gratuite.
html
L'attribut type sur <input> change son interface utilisateur, le clavier à l'écran (mobile) et la validation intégrée. Utiliser le bon type améliore l'utilisabilité et offre une validation gratuite.
Les claviers mobiles s'adaptent — type="email" affiche la touche @, type="tel" affiche un pavé numérique, type="number" affiche les chiffres. Cela seul est une grande victoire pour l'utilisabilité sur les téléphones.
Validation gratuite — type="email" rejette not-an-email à la soumission, min/max limitent les nombres, type="url" vérifie une URL valide — aucun JavaScript requis.
<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 -->
Choisir le type d'input correct vous donne de meilleurs claviers mobiles, des sélecteurs natifs et une validation intégrée gratuitement — améliorant l'accessibilité et réduisant le JavaScript que vous auriez autrement à écrire.
C'est un petit choix avec un avantage UX disproportionné.