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

Sam Dutton

Pour suivre cet atelier de programmation, ouvrez ce Glitch dans un deuxième onglet.

Comment concevoir un formulaire qui fonctionne bien pour une variété de noms et de formats d'adresses ? Forme mineure les problèmes agacent les internautes et peuvent les amener à quitter votre site ou à renoncer à effectuer un achat. ou une inscription.

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 de programmation avec un formulaire vide, juste un en-tête et un bouton leur propre. Vous commencerez ensuite à ajouter des entrées. (CSS et un peu de JavaScript sont déjà included.)

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

• 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 de choses.

Vous avez associé label au input en faisant correspondre l'attribut for de label avec le name ou id de input. Un appui ou un clic sur un libellé déplace le curseur dans l'entrée correspondante, ce qui agrandit que l'entrée seule, ce qui est utile pour les doigts, les pouces et les clics de souris ! Lecteurs d'écran annoncer 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 à partir de cette entrée, qui est envoyée au serveur lors de l'envoi du formulaire. Inclure un attribut name signifie également que l'API FormData peut accéder aux données de cet élément.

É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 nom saisi dans Chrome ? La saisie automatique devrait s'afficher des suggestions stockées par le navigateur et devinées qui sont appropriées pour cette entrée, compte tenu de sa 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 sur le champ Nom. Quelles différences constatez-vous ?

Remarque : Vous êtes-vous déjà demandé comment supprimer les suggestions de saisie automatique dans Chrome ? * Windows: Shift + delete * Mac: Shift + fn + delete

Vous devriez remarquer un léger changement: avec autocomplete="name", les suggestions sont désormais spécifiques. des valeurs précédemment utilisées dans les entrées de formulaire qui comportaient également autocomplete="name". Le navigateur ne se contente pas de deviner ce qui pourrait être approprié: vous avez le contrôle. Le menu Gérer... pour afficher et modifier les noms et les adresses enregistrés par votre navigateur.

<ph type="x-smartling-placeholder">

</ph>

IU pour la saisie automatique avec des valeurs devinées et pour la saisie semi-automatique

Remarque : Si une valeur de saisie semi-automatique appropriée est disponible pour input, select ou textarea, vous devez l'utiliser.

Ajoutez maintenant des attributs de validation des contraintes. maxlength, pattern et required. Votre code d'entrée se présente donc 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 de plus de 100 caractères.

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

• required signifie que... obligatoire. Le navigateur n'autorisera pas l'envoi du formulaire sans données pour ce champ. Si vous tentez de l'envoyer, l'entrée vous en avertit et la met en surbrillance. Pas de code supplémentaire obligatoire !

Attention : Cet atelier de programmation ne traite pas (non) de la localisation ni de l'internationalisation. Selon la zone géographique de vos utilisateurs, vous devez tenir compte des formats d'adresse, ainsi que des différents noms utilisés pour les composants d'adresse, même dans la même langue: code postal, code postal, Eircode ou code. Vous devrez peut-être personnaliser votre site pour plusieurs paramètres régionaux, mais le formulaire d'adresse utilisé dans cet atelier de programmation est conçu pour être flexible et devrait fonctionner "suffisamment". pour une plage d'adresses.

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 apparaître un avertissement concernant la fonctionnalité intégrée du navigateur : le champ obligatoire vide et mettre le focus 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>

Un textarea est le moyen le plus flexible pour les utilisateurs de saisir leur adresse, et il est idéal pour et copier-coller.

Évitez de diviser votre formulaire d'adresse en composants tels que le nom et le numéro de rue, sauf si dont vous avez vraiment besoin. N'obligez pas les utilisateurs à saisir leur adresse dans des champs qui n'ont aucun sens.

Remarque : Tenez compte de la manière dont les données d'adresse de votre formulaire sont utilisées. À quoi ça sert ? Assurez-vous de comprendre les exigences concernant les données et qui les définit.

Ajoutez maintenant les champs Code postal et Pays ou région. Pour plus de simplicité, seuls les cinq premiers pays sont inclus ici. Vous trouverez la liste complète 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 paramètre Code postal est facultatif, car de nombreux pays n'utilisent pas de codes postaux. (Global Sourcebook fournit des informations sur formats d'adresse pour 194 pays différents, avec des exemples d'adresses.) Le libellé Pays ou région est utilisée à la place de Pays, étant donné que certaines options de la liste complète (telles que la Royaume-Uni) ne sont pas des pays uniques (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 se passe-t-il si votre site en demande pour l'expédition et la facturation, par exemple ? Essayez de mettre à jour votre formulaire pour permettre aux clients d'y entrer les adresses de livraison et de facturation. Comment pouvez-vous rendre la saisie des données aussi rapide et facile que possible, surtout si les deux adresses sont identiques ? L'article associé à cet atelier de programmation explique techniques de gestion de plusieurs adresses. Quoi que vous fassiez, veillez à utiliser les bonnes valeurs autocomplete.

Étape 5: Ajoutez 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 les divisez pas en plusieurs parties. Il est ainsi plus facile pour permettant aux utilisateurs de saisir des données ou de faire des copier-coller, de simplifier la validation et de permettre aux navigateurs de saisir automatiquement leurs 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 mobinautes ont le bon clavier.
• enterkeyhint="done" définit le libellé de la touche Entrée du clavier mobile pour indiquer qu'il s'agit de la dernière et le formulaire peut maintenant être envoyé (la valeur par défaut est next).

<ph type="x-smartling-placeholder">

</ph>

Utilisez l'attribut enterkeyhint pour définir le libellé du bouton Entrée: "next" (suivant) et "OK".

L'utilisation de type="number" ajoute une flèche vers le haut/bas pour incrémenter les numéros, ce qui n'a aucun sens pour les données telles que les numéros de téléphone, de carte de paiement ou de compte. Utilisez plutôt type="tel" pour les numéros de téléphone. Pour les autres chiffres, utilisez type="text" (ou omettez l'attribut, car text est la valeur par défaut) et ajoutez inputmode="numeric" pour obtenir un clavier numérique sur mobile.

Remarque : Rencontrez-vous des problèmes en utilisant une seule entrée pour le numéro de téléphone ? Stockez-vous les parties du numéro de téléphone (indicatif pays et indicatif) séparément ? Si oui, pourquoi ?

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

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

• Utiliser 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 un test sur une plage d'appareils et de navigateurs.

Remarque : Avant de commencer à créer des formulaires, assurez-vous de bien comprendre quelles données sont requises et si elles sont strictement nécessaires. Ne demandez pas les données dont vous n'avez pas besoin ! Le moyen le plus simple de réduire la complexité des formulaires et d'améliorer la confidentialité consiste à supprimer les champs inutiles. Stocker moins de données réduit également les coûts liés aux données backend et la responsabilité associée.

Aller plus loin

• Analyse et surveillance des utilisateurs réels: permettre de tester et de surveiller les performances et la facilité d'utilisation de la conception de votre formulaire pour des utilisateurs réels ; et pour vérifier si les modifications ont été appliquées. Vous devez surveiller les performances de chargement et les autres métriques Web Vitals. et les analyses de pages (proportion d'internautes qui quittent votre formulaire d'adresse sans l'avoir rempli ? combien de temps les utilisateurs passent-ils sur les pages de votre formulaire d'adresse ?) et l'analyse des interactions (quelle page composants avec lesquels les utilisateurs interagissent-ils ou non ?)

• Où se trouvent vos utilisateurs ? Comment formate-t-il son adresse ? Quels noms utilisent-ils pour les adresses ? comme le code postal ? 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 facilité d'utilisation. Il est préférable d'éviter de sélectionner des éléments pour une longue liste d'éléments. et la norme de code pays ISO 3166 répertorie actuellement 249 pays. Au lieu d'un <select>, vous pouvez envisager une autre option, comme le Sélecteur de pays du Baymard Institute :

  Pouvez-vous créer un meilleur sélecteur pour les listes contenant beaucoup d'éléments ? Comment vous assurez-vous que votre conception est accessibles sur un large éventail d'appareils et de plates-formes ? (L'élément <select> ne fonctionne pas bien pour une un grand nombre d'éléments, mais au moins il peut être utilisé sur presque tous les navigateurs et appareils d'assistance !)

  L'article de blog <input type="pays" /> présente la complexité de la standardisation d'un sélecteur de pays. La localisation des noms de pays peut également être problématique. Les listes de pays disposent d'un outil le téléchargement de codes pays et de noms dans plusieurs langues, dans plusieurs formats.