Remplir une adresse peut être long et frustrant. À quoi sert la ligne d'adresse 2 ? Vous n'avez peut-être pas de nom de famille. Que devez-vous saisir dans le champ Nom de famille ? Évitez ces confusions et aidez les utilisateurs à remplir les formulaires d'adresse.
Créer un formulaire convivial
De nombreux formulaires utilisent un champ pour le prénom et un autre pour le nom de famille.
Cependant, certaines personnes n'ont pas de nom de famille ou leur nom ne comporte pas deux parties. Comment doivent-elles remplir le champ "Nom de famille" ? Utilisez un seul <input> pour le champ "name" (nom). En savoir plus sur la gestion des différents formats de noms
D'après une étude, le champ Adresse 2 peut être source de confusion pour les utilisateurs. Envisagez d'utiliser un <textarea> pour l'adresse complète ou de masquer le champ Ligne d'adresse 2 derrière un <button>.
Soyez prudent avec les descriptions des contrôles de formulaire.
Par exemple, les utilisateurs aux États-Unis disent code postal, au Royaume-Uni code postal.
Utilisez <label for="zip">ZIP or postal code (optional)</label> pour vous assurer que les utilisateurs savent quelles données saisir.
Rendez le champ "Code postal" facultatif, car toutes les adresses n'en ont pas.
Aider les utilisateurs à saisir leur adresse
L'attribut autocomplete peut aider les utilisateurs à saisir à nouveau leur adresse :
autocomplete="name"autocomplete="street-address"autocomplete="postal-code"autocomplete="country"
Vous pouvez définir plusieurs valeurs séparées par un espace pour autocomplete. Imaginons que vous ayez un formulaire pour l'adresse de livraison et un autre pour l'adresse de facturation.
Pour indiquer au navigateur quel code postal correspond à l'adresse de facturation, vous pouvez utiliser autocomplete="billing postal-code". Pour l'adresse de livraison, utilisez shipping comme première valeur.
Modifiez le libellé de la touche Enter sur les claviers à l'écran avec l'attribut enterkeyhint. Utilisez enterkeyhint="done" pour le dernier élément de contrôle du formulaire et enterkeyhint="next" pour les autres éléments de contrôle du formulaire.