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

Sam Dutton

Comment concevoir un formulaire qui convient à différents formats de noms et d'adresses ? Les bugs mineurs des formulaires agacent 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 tout le potentiel des éléments et des attributs HTML

Vous commencerez cette partie de l'atelier de programmation avec un formulaire vide, composé uniquement d'un titre et d'un bouton. Vous pouvez ensuite commencer à ajouter des entrées. (CSS et un peu de JavaScript sont déjà inclus.)

• Cliquez sur Remixer pour modifier pour rendre le projet modifiable.

• Ajoutez un champ de nom à votre élément <form> avec le 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 à l'attribut name ou id du input. Un appui ou un clic sur un libellé déplace le focus sur son entrée, ce qui crée une cible beaucoup plus grande que l'entrée elle-même, ce qui est bon pour les doigts, les pouces et les clics de souris. Les lecteurs d'écran énoncent le texte du libellé lorsque le libellé ou la zone de saisie du libellé est sélectionné.

Qu'en est-il de name="name" ? Il s'agit du nom (qui se trouve être "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 peuvent être consultées 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 dans le champ Nom dans Chrome ? Vous devriez voir les suggestions de saisie automatique que le navigateur a stockées et les suppositions sont appropriées pour cette entrée, compte tenu de ses valeurs name et id.

Ajoutez maintenant autocomplete="name" à votre code d'entrée pour qu'il se présente comme suit:

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

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

Vous devriez remarquer un changement subtil: avec autocomplete="name", les suggestions sont désormais des valeurs spécifiques qui étaient utilisées précédemment dans les entrées de formulaires qui comportaient également autocomplete="name". Le navigateur ne devine pas simplement ce qui peut être approprié: vous avez le contrôle. L'option Gérer vous permet également 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 de lettre Unicode, les traits d'union et les points. Cela signifie que des noms tels que Françoise ou Jörg ne sont pas classé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 n'autorise pas l'envoi du formulaire sans données pour ce champ. Il émet un avertissement et met en surbrillance l'entrée si vous essayez de l'envoyer. Aucun code supplémentaire n'est nécessaire.

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. Un message d'avertissement s'affichera dans la fonctionnalité intégrée du navigateur concernant le champ obligatoire vide et le met en surbrillance.

É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 également idéal pour le copier-coller.

Évitez 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. N'obligez pas les utilisateurs à essayer de faire entrer leur adresse dans des champs qui n'ont pas de sens.

Ajoutez maintenant des champs pour 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 constaterez que le champ Code postal est facultatif, car de nombreux pays n'utilisent pas de codes postaux. (Le Global Sourcebook fournit des informations sur les formats d'adresses de 194 pays différents, y compris des exemples d'adresses.) Le libellé Pays ou région est utilisé au lieu 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 se passe-t-il 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 une adresse de livraison et de facturation. Comment pouvez-vous rendre la saisie des données aussi rapide et facile que possible, en particulier si les deux adresses sont identiques ? L'article associé à cet atelier de programmation explique les techniques de gestion de plusieurs adresses. Quoi que vous fassiez, assurez-vous d'utiliser les valeurs autocomplete appropriées.

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

Pour ajouter un champ de saisie 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 le séparez pas en plusieurs parties. Cela permet aux utilisateurs de saisir des données ou de copier-coller plus facilement, de simplifier la validation et de permettre aux navigateurs de saisir automatiquement les données.

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

• type="tel" garantit que les utilisateurs mobiles disposent du 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:

• Essayez votre formulaire sur différents appareils. Quels appareils et navigateurs ciblez-vous ? Comment 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 depuis votre ordinateur vers votre téléphone.
• Utilisez un service tel que BrowserStack pour tester sur différents appareils et navigateurs.

Pour aller plus loin

• Analyses et surveillance des utilisateurs réels : permet de tester et de surveiller les performances et l'usabilité de la conception de votre formulaire pour des utilisateurs réels, et de 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 proportion d'utilisateurs quitte votre formulaire d'adresse sans le terminer ? 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 la page les utilisateurs interagissent-ils ou non ?)

• Où se trouvent vos utilisateurs ? Comment formate-t-il son 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 réputés pour leur faible usabilité. Il est préférable d'éviter de sélectionner des éléments pour une longue liste d'éléments. La norme ISO 3166 sur les codes pays comprend actuellement 249 pays. Au lieu d'un <select>, vous pouvez envisager une autre option, comme le sélecteur de pays de l'Institut Baymard.

  Pouvez-vous concevoir un sélecteur plus adapté aux listes comportant de nombreux éléments ? Comment vous assurer que votre conception est accessible sur une gamme d'appareils et de plates-formes ? (L'élément <select> ne fonctionne pas bien pour un grand nombre d'éléments, mais il est au moins 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 des codes et des noms de pays dans plusieurs langues et formats.