Atelier de programmation sur les bonnes pratiques concernant les formulaires d'adresse

Sam Dutton

Comment concevoir un formulaire qui fonctionne bien pour différents noms et formats d'adresse ? Les petits problèmes de formulaire irritent les utilisateurs et peuvent les inciter à quitter votre site ou à renoncer à effectuer un achat ou à s'inscrire.

Cet atelier de programmation vous explique comment créer un formulaire accessible et facile à utiliser qui fonctionne bien pour la plupart des utilisateurs.

Étape 1 : Exploitez au maximum les éléments et les attributs HTML

Vous commencerez cette partie de l'atelier de programmation avec un formulaire vide, juste un titre et un bouton.

Vous commencerez ensuite à ajouter des entrées. (CSS et un peu de JavaScript sont déjà inclus.)

• Cliquez sur EDIT ON CODEPEN (MODIFIER SUR CODEPEN) pour modifier le projet.

• Ajoutez un champ de nom à votre élément <form> à l'aide du code suivant :

<section>
  <label for="name">Name</label>
  <input id="name" name="name">
</section>

Cela peut sembler compliqué et répétitif pour un seul champ de nom, mais cela fait déjà beaucoup.

Vous avez associé le label au input en faisant correspondre l'attribut for du label avec le name ou le id du input. Lorsque vous appuyez ou cliquez sur un libellé, le focus est déplacé vers son champ de saisie, ce qui constitue une cible beaucoup plus grande que le champ de saisie seul. C'est idéal pour les doigts, les pouces et les clics de souris ! Les lecteurs d'écran énoncent le texte du libellé lorsque le libellé ou l'entrée du libellé sont sélectionnés.

Qu'en est-il de name="name" ? Il s'agit du nom (qui est "name" !) associé aux données de cette entrée, qui sont envoyées au serveur lorsque le formulaire est envoyé. L'inclusion d'un attribut name signifie également que les données de cet élément sont accessibles par l'API FormData.

Étape 2 : Ajoutez des attributs pour aider les utilisateurs à saisir des données

Que se passe-t-il lorsque vous appuyez ou cliquez sur le champ de saisie Nom dans Chrome ? Vous devriez voir des suggestions de saisie automatique que le navigateur a stockées et qui, selon lui, conviennent à cette entrée, compte tenu de ses valeurs name et id.

Ajoutez maintenant autocomplete="name" à votre code d'entrée pour qu'il ressemble à ceci :

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name">
</section>

Actualisez la page dans Chrome, puis appuyez ou cliquez sur le champ de saisie Nom. Quelles différences constatez-vous ?

Vous devriez remarquer un léger changement : avec autocomplete="name", les suggestions sont désormais des valeurs spécifiques qui ont été utilisées précédemment dans les entrées de formulaire qui comportaient également autocomplete="name". Le navigateur ne devine pas ce qui peut être approprié : vous avez le contrôle. L'option Gérer… s'affiche également pour vous permettre d'afficher et de modifier les noms et adresses stockés par votre navigateur.

Ajoutez maintenant les attributs de validation des contraintes maxlength, pattern et required pour que votre code d'entrée se présente comme suit :

<section>
  <label for="name">Name</label>
  <input id="name" name="name" autocomplete="name"
    maxlength="100" pattern="[\p{L} \-\.]+" required>
</section>

• maxlength="100" signifie que le navigateur n'autorise aucune saisie de plus de 100 caractères.

• pattern="[\p{L} \-\.]+" utilise une expression régulière qui autorise les caractères Unicode de type lettre, les traits d'union et les points. Cela signifie que les noms tels que Françoise ou Jörg ne sont pas considérés comme "non valides". Ce n'est pas le cas si vous utilisez la valeur \w, qui n'autorise que les caractères de l'alphabet latin.

• required signifie… obligatoire ! Le navigateur ne permettra pas l'envoi du formulaire sans données pour ce champ. Il affichera un avertissement et mettra en surbrillance le champ si vous tentez de l'envoyer. Aucun code supplémentaire n'est requis.

Pour tester le fonctionnement du formulaire avec et sans ces attributs, essayez de saisir des données :

• Essayez de saisir des valeurs qui ne correspondent pas à l'attribut pattern.
• Essayez d'envoyer le formulaire avec une entrée vide. Vous verrez la fonctionnalité intégrée du navigateur vous avertir du champ obligatoire vide et le mettre en évidence.

Étape 3 : Ajoutez un champ d'adresse flexible à votre formulaire

Pour ajouter un champ d'adresse, ajoutez le code suivant à votre formulaire :

<section>
  <label for="address">Address</label>
  <textarea id="address" name="address" autocomplete="address"
    maxlength="300" required></textarea>
</section>

Un textarea est le moyen le plus flexible pour vos utilisateurs de saisir leur adresse. Il est idéal pour couper et coller.

Vous devez éviter de diviser votre formulaire d'adresse en composants tels que le nom et le numéro de la rue, sauf si vous en avez vraiment besoin. Ne forcez pas les utilisateurs à essayer de faire tenir leur adresse dans des champs qui n'ont pas de sens.

Ajoutez maintenant les champs Code postal et Pays ou région. Par souci de simplicité, seuls les cinq premiers pays sont inclus ici. Une liste complète est incluse dans le formulaire d'adresse rempli.

<section>
  <label for="postal-code">ZIP or postal code (optional)</label>
  <input id="postal-code" name="postal-code"
    autocomplete="postal-code" maxlength="20">
</section>

<section id="country-region">
  <label for="">Country or region</label>
  <select id="country" name="country" autocomplete="country"
    required>
      <option selected value="SPACER"> </option>
      <option value="AF">Afghanistan</option>
      <option value="AX">Åland Islands</option>
      <option value="AL">Albania</option>
      <option value="DZ">Algeria</option>
      <option value="AS">American Samoa</option>
  </select>
</section>

Vous verrez que le code postal est facultatif, car de nombreux pays n'utilisent pas de code postal. (Le Global Sourcebook fournit des informations sur les formats d'adresse pour 194 pays différents, y compris des exemples d'adresses.) Le libellé Pays ou région est utilisé à la place de Pays, car certaines options de la liste complète (comme le Royaume-Uni) ne sont pas des pays uniques (malgré la valeur autocomplete).

Étape 4 : Permettez aux clients de saisir facilement les adresses de livraison et de facturation

Vous avez créé un formulaire d'adresse très fonctionnel, mais que faire si votre site nécessite plusieurs adresses, par exemple pour la livraison et la facturation ? Essayez de modifier votre formulaire pour permettre aux clients de saisir les adresses de livraison et de facturation. Comment saisir les adresses le plus rapidement et le plus facilement possible, surtout si elles sont identiques ? L'article qui accompagne cet atelier de programmation explique les techniques de gestion de plusieurs adresses. Dans tous les cas, veillez à utiliser les valeurs autocomplete correctes.

Étape 5 : Ajoutez un champ de numéro de téléphone

Pour ajouter une entrée de numéro de téléphone, ajoutez le code suivant au formulaire :

<section>
  <label for="tel">Telephone</label>
  <input id="tel" name="tel" autocomplete="tel" type="tel"
    maxlength="30" pattern="[\d \-\+]+" enterkeyhint="done"
    required>
</section>

Pour les numéros de téléphone, utilisez une seule entrée : ne divisez pas le numéro en plusieurs parties. Cela permet aux utilisateurs de saisir des données ou de les copier et coller plus facilement, simplifie la validation et permet aux navigateurs d'utiliser la saisie automatique.

Deux attributs peuvent améliorer l'expérience utilisateur lors de la saisie d'un numéro de téléphone :

• type="tel" permet aux utilisateurs mobiles d'obtenir le bon clavier.
• enterkeyhint="done" définit le libellé de la touche Entrée du clavier mobile pour indiquer qu'il s'agit du dernier champ et que le formulaire peut maintenant être envoyé (la valeur par défaut est next).

Votre formulaire d'adresse complet devrait maintenant se présenter comme suit :

• Testez votre formulaire sur différents appareils. Quels appareils et navigateurs ciblez-vous ? Comment pourrions-nous améliorer le formulaire ?

Il existe plusieurs façons de tester votre formulaire sur différents appareils :

• Utilisez le mode Appareil des outils pour les développeurs Chrome pour simuler des appareils mobiles.
• Envoyez l'URL de votre ordinateur vers votre téléphone.
• Utilisez un service tel que BrowserStack pour effectuer des tests sur différents appareils et navigateurs.

En savoir plus

• Analytics et surveillance des utilisateurs réels : vous pouvez tester et surveiller les performances et l'usabilité de la conception de votre formulaire pour les utilisateurs réels, et vérifier si les modifications sont efficaces. Vous devez surveiller les performances de chargement et d'autres Web Vitals, ainsi que les données analytiques sur les pages (quelle est la proportion d'utilisateurs qui quittent votre formulaire d'adresse sans le remplir ? Combien de temps les utilisateurs passent-ils sur les pages de votre formulaire d'adresse ?) et les données analytiques sur les interactions (avec quels composants de page les utilisateurs interagissent-ils, ou non ?).

• Où se trouvent vos utilisateurs ? Comment doivent-ils mettre en forme leur adresse ? Quels noms utilisent-ils pour les composants d'adresse, tels que le code postal ? Le Guide compulsif de Frank sur les adresses postales fournit des liens utiles et des conseils détaillés sur les formats d'adresse dans plus de 200 pays.

• Les sélecteurs de pays sont connus pour leur mauvaise convivialité. Il est préférable d'éviter les éléments de sélection pour une longue liste d'éléments. La norme ISO 3166 pour les codes pays liste actuellement 249 pays. Au lieu d'un <select>, vous pouvez envisager une autre option, comme le sélecteur de pays de l'institut Baymard.

  Peux-tu concevoir un meilleur sélecteur pour les listes comportant de nombreux éléments ? Comment vous assureriez-vous que votre conception est accessible sur différents appareils et plates-formes ? (L'élément <select> ne fonctionne pas bien pour un grand nombre d'éléments, mais au moins il est utilisable sur pratiquement tous les navigateurs et appareils d'assistance.)

  L'article de blog <input type="country" /> aborde la complexité de la standardisation d'un sélecteur de pays. La localisation des noms de pays peut également poser problème. Countries Lists propose un outil permettant de télécharger les codes et les noms de pays dans plusieurs langues et formats.