Créez un formulaire qui permet aux utilisateurs de saisir des données d'adresse aussi facilement que possible sur ordinateur et mobile. Assurez-vous que le formulaire exploite au mieux les fonctionnalités intégrées du navigateur pour la saisie automatique, la validation et les contraintes de saisie de données.
Mise en œuvre
Vous trouverez ci-dessous les consignes les plus importantes pour créer des formulaires d'adresse efficaces.
Utiliser un code HTML pertinent et valide
Tirez le meilleur parti des éléments et des attributs conçus pour créer des formulaires :
<form>,<input>,<label>et<button>type,autocompleteetinputmode
Ils activent les fonctionnalités intégrées du navigateur, améliorent l'accessibilité et ajoutent du sens au balisage.
Utilisez l'élément <label> pour ajouter des libellés aux champs de formulaire pour la saisie de données.
Pour ajouter un libellé à un <input>, un <select> ou un <textarea>, utilisez un <label>. Associez un libellé à une entrée en attribuant à l'attribut for du libellé la même valeur que l'attribut id de l'entrée.
Exploiter tout le potentiel des attributs HTML
Facilitez la saisie des données par les utilisateurs en utilisant l'attribut d'élément <input> <type> approprié pour fournir le bon clavier sur mobile et activer la validation intégrée de base par le navigateur.
Utilisez toujours type="email" pour les adresses e-mail et type="tel" pour les numéros de téléphone.
<!-- type="email"/"tel" gives mobile users the right keyboard and enables built-in validation -->
<input type="email" id="email" name="email" autocomplete="email" required>
<input type="tel" id="phone" name="phone" autocomplete="tel">
Chaque élément <input>, <select> et <textarea> DOIT comporter un attribut autocomplete approprié pour améliorer l'accessibilité et éviter aux utilisateurs de saisir à nouveau des données.
Rendre les boutons utiles
Utilisez <button> pour les boutons. Vous pouvez également utiliser <input type="submit">, mais n'utilisez pas d'élément div ou d'autre élément aléatoire agissant comme un bouton. Les éléments de bouton offrent un comportement accessible, une fonctionnalité d'envoi de formulaire intégrée et peuvent être facilement stylisés.
Attribuez à chaque bouton d'envoi de formulaire une valeur qui indique son action. Pour chaque étape du processus de paiement, utilisez un incitation à l'action descriptive qui indique la progression et rend l'étape suivante évidente. Par exemple, nommez le bouton d'envoi de votre formulaire d'adresse de livraison Passer au paiement plutôt que Continuer ou Enregistrer.
Utilisez un seul champ de saisie pour le nom, si possible
Permettez à vos utilisateurs de saisir leur nom dans un seul champ, sauf si vous avez une bonne raison de stocker séparément les prénoms, les noms de famille, les titres honorifiques ou d'autres parties du nom. L'utilisation d'un seul champ de saisie pour le nom simplifie les formulaires, permet le copier-coller et facilite la saisie automatique.
Autoriser les noms internationaux. Pour la validation, évitez d'utiliser des expressions régulières qui ne correspondent qu'aux caractères latins. "Latin uniquement" exclut les utilisateurs dont le nom ou l'adresse incluent des caractères qui ne figurent pas dans l'alphabet latin. Autorisez plutôt la correspondance des lettres Unicode et assurez-vous que votre backend accepte Unicode de manière sécurisée, à la fois en entrée et en sortie. Unicode dans les expressions régulières est bien pris en charge par les navigateurs récents.
Autoriser différents formats d'adresse
Lorsque vous créez un formulaire d'adresse, tenez compte de la variété des formats d'adresse, même au sein d'un même pays. Ne faites pas de suppositions sur les adresses "normales".
Si possible, utilisez un seul élément <textarea> pour l'adresse postale.
<!-- textarea handles multi-line international address formats that split inputs can't accommodate -->
<textarea id="address" name="address" autocomplete="street-address" required></textarea>
Il s'agit de l'option la plus flexible pour différents formats d'adresses locales et internationales.
Si votre modèle de données nécessite des lignes d'adresse distinctes, utilisez un <input> par ligne avec les jetons autocomplete address-line1, address-line2 (et, si nécessaire, address-line3) pour que la saisie automatique fonctionne toujours. Ne divisez pas l'adresse postale entre des entrées qui ne comportent pas ces jetons, et ne rendez obligatoire que la première ligne.
<!-- Alternative: one input per line, each with its own autocomplete token -->
<input type="text" id="address-line1" name="address-line1" autocomplete="address-line1" required>
<input type="text" id="address-line2" name="address-line2" autocomplete="address-line2">
Aidez les utilisateurs à ne pas oublier de champs de données par accident
Ajoutez l'attribut required aux champs obligatoires.
<input type="text" id="city" name="city" autocomplete="address-level2" required>
Stratégies de remplacement
La saisie automatique est une amélioration progressive. Dans les navigateurs qui ne sont pas compatibles avec la saisie automatique, les utilisateurs devront simplement saisir manuellement les détails de leur adresse. Les contraintes HTML sémantiques (comme type, inputmode et required) continueront de fonctionner correctement en tant que validation de formulaire standard.