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

Sam Dutton

Comment pouvez-vous créer un formulaire qui fonctionne bien pour une variété de noms et de formats d'adresse ? De petits problèmes de formulaire peuvent irriter les internautes et 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 convient à la plupart des utilisateurs.

Étape 1: Exploitez tout le potentiel des éléments et attributs HTML

Vous commencerez cette partie de l'atelier avec un formulaire vide, juste un titre et un bouton. Ensuite, vous commencerez à ajouter des entrées. (CSS et un peu de JavaScript sont déjà inclus).

  • Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.

  • Ajoutez un champ de nom à l'é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 ça fait déjà beaucoup.

Vous avez associé label à input en faisant correspondre l'attribut for de label avec le name ou le id de input. Appuyer ou cliquer sur une étiquette déplace le curseur sur son entrée, créant ainsi une cible beaucoup plus grande que l'entrée seule, ce qui est pratique pour les doigts, les pouces et les clics de souris. Les lecteurs d'écran annoncent le texte du libellé lorsque le libellé ou l'entrée 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 est envoyée au serveur lors de l'envoi du formulaire. Inclure un attribut name signifie également que les données de cet élément sont accessibles via 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 Nom dans Chrome ? Vous devriez voir des suggestions de saisie automatique stockées par le navigateur. Celles-ci sont appropriées pour cette entrée, compte tenu de ses valeurs name et id.

Ajoutez maintenant autocomplete="name" au 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 sur le champ Nom. Quelles différences constatez-vous ?

Vous devriez constater un changement subtil: avec autocomplete="name", les suggestions sont désormais des valeurs spécifiques utilisées précédemment dans les entrées de formulaire qui comportaient également autocomplete="name". Le navigateur ne se contente pas de deviner ce qui est approprié: vous gardez le contrôle. L'option Gérer vous permet également d'afficher et de modifier les noms et les adresses stockés par votre navigateur.

Deux captures d&#39;écran de Chrome sur un téléphone Android montrant un formulaire avec une seule entrée, avec et sans valeur de saisie semi-automatique. L&#39;une affiche des suggestions heuristiques de l&#39;interface utilisateur du navigateur, tandis que l&#39;autre montre l&#39;interface utilisateur lorsque des valeurs de saisie semi-automatique sont stockées.
UI pour la saisie automatique avec des valeurs devinées, et non pour la saisie semi-automatique.

Ajoutez maintenant les attributs de validation de contrainte 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 pas les saisies comportant plus de 100 caractères.

  • pattern="[\p{L} \-\.]+" utilise une expression régulière qui autorise les caractères de lettres Unicode, les traits d'union et les points (points complets). Cela signifie que les 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. Si vous tentez de l'envoyer, un avertissement s'affichera et vous le mettrez en surbrillance. Pas besoin de code supplémentaire !

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 avertissement de la fonctionnalité de navigateur intégrée s'affichera pour indiquer que le champ obligatoire est vide et que le curseur est placé dessus.

É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>

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

Évitez de diviser votre formulaire d'adresse en éléments tels que le nom de la rue et le numéro, sauf si cela est vraiment nécessaire. N'obligez pas les utilisateurs à essayer d'inclure leur adresse dans des champs qui n'ont aucun sens.

Ajoutez maintenant les champs Code postal et Pays ou région. Pour plus de simplicité, seuls les cinq premiers pays sont inclus ici. La 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>

Le champ Code postal n'est pas obligatoire, car de nombreux pays n'utilisent pas les codes postaux. (Le Global Sourcebook fournit des informations sur les formats d'adresse pour 194 pays, 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 (telles que le Royaume-Uni) ne correspondent pas à un seul pays (malgré la valeur autocomplete).

Étape 4: Permettre aux clients de saisir facilement leurs 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 mettre à jour votre formulaire pour permettre aux clients de saisir des adresses 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 décrit les techniques permettant de gérer plusieurs adresses. Quoi que vous fassiez, veillez à utiliser les bonnes valeurs autocomplete.

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

Pour ajouter un 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 divisez pas en plusieurs parties. Il est ainsi plus facile pour les utilisateurs de saisir des données ou de copier-coller des éléments, de simplifier la validation et de permettre aux navigateurs d'utiliser la saisie automatique.

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

  • type="tel" permet aux utilisateurs mobiles de disposer du clavier approprié.
  • enterkeyhint="done" définit l'étiquette de la touche Entrée du clavier mobile pour indiquer qu'il s'agit du dernier champ et que le formulaire peut désormais être envoyé (la valeur par défaut est next).
Deux captures d&#39;écran d&#39;un formulaire sur Android montrant comment l&#39;attribut d&#39;entrée enterkeyhint modifie l&#39;icône du bouton Entrée.
Utilisez l'attribut enterkeyhint pour définir le libellé du bouton "Entrée" : "next" et "done".

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

  • Testez le 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:

Pour aller plus loin

  • Analyse et surveillance des utilisateurs réels : vérifiez que les performances et la facilité d'utilisation de la conception de votre formulaire peuvent être testées et surveillées pour des utilisateurs réels, et que les modifications ont bien été appliquées. Vous devez surveiller les performances de chargement et d'autres Signaux Web, ainsi que les analyses de page (quelle proportion d'utilisateurs quittent votre formulaire d'adresse sans le remplir ? combien de temps les utilisateurs passent-ils sur vos pages de formulaire d'adresse ?) et les analyses d'interactions (avec quels composants de page les utilisateurs interagissent-ils ou non ?)

  • Où se trouvent vos utilisateurs ? Comment formatent-elles 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 faible facilité d'utilisation. Il est préférable d'éviter de sélectionner des éléments pour une longue liste d'éléments. En effet, la norme de code pays ISO 3166 présente actuellement 249 pays. Au lieu d'un <select>, vous pouvez envisager une alternative, telle que le sélecteur de pays du Baymard Institute.

    Pouvez-vous concevoir un meilleur sélecteur pour les listes contenant beaucoup d'éléments ? Comment veilleriez-vous à ce que votre conception soit accessible sur une gamme d'appareils et de plateformes ? (L'élément <select> ne fonctionne pas bien pour un grand nombre d'éléments, mais il est au moins utilisable sur presque tous les navigateurs et appareils d'assistance.)

    L'article de blog <input type="country" /> explique la complexité de la normalisation d'un sélecteur de pays. La localisation des noms de pays peut également s'avérer problématique. Les listes de pays disposent d'un outil permettant de télécharger les codes et noms des pays dans plusieurs langues et dans plusieurs formats.