Saisir une adresse peut s'avérer chronophage et frustrant. Qu'est-ce qu'une ligne d'adresse 2 ? Comme 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.
Assurez-vous que votre formulaire d'adresse est facile à utiliser
De nombreux formulaires utilisent un champ pour le prénom et un pour le nom de famille.
Cependant, certaines personnes n'ont pas de nom de famille ou n'ont pas deux parties. Alors, comment doivent-elles remplir le champ "Nom de famille" ? Utilisez un seul <input> pour le champ de nom.
En savoir plus sur la gestion des différents formats de nom
De même, n'utilisez qu'un seul <input> pour l'adresse postale (toutes les adresses ne sont pas associées à un numéro de rue).
Soyez prudent avec les descriptions de commandes de formulaire.
Par exemple, les utilisateurs situés aux États-Unis indiquent ZIP. Pour le Royaume-Uni, ils indiquent 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 (toutes les adresses ne sont pas associées à un code postal).
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.
Supposons que vous disposiez d'un formulaire avec une adresse de livraison et d'un autre formulaire pour l'adresse de facturation.
Pour indiquer au navigateur le code postal correspondant à l'adresse de facturation, vous pouvez utiliser autocomplete="billing postal-code".
Définissez shipping comme première valeur pour l'adresse de livraison.
Modifiez le libellé de la touche Enter sur les claviers à l'écran avec l'attribut enterkeyhint.
Utilisez enterkeyhint="done" pour la dernière commande de formulaire et enterkeyhint="next" pour les autres.