Trois attributs pour des formulaires web plus intuitifs

Les formulaires web sont une opportunité pour enrichir considérablement l’expérience utilisateur à moindre effort. Parfois, ces améliorations majeures ne tiennent qu’à quelques simples attributs HTML. Comme dopée, la nouvelle expérience permet aux utilisateurs et utilisatrices de réaliser une tâche sans entrave.

En particulier, c’est le cas pour les appareils mobiles avec lesquels les gens doivent remplir des formulaires uniquement avec un clavier virtuel. Si vous avez la possibilité d’améliorer leur expérience utilisateur, cela vaut le coup d’investiguer. Rassurez-vous cependant : vous n’aurez besoin ni d’ajouter une bibliothèque JavaScript complexe ni de rédiger du code alambiqué. Un HTML bien écrit peut vous mener très loin.

En utilisant la bonne valeur input type, vous avez déjà fait plus de la moitié du chemin. Les navigateurs présents sur les périphériques mobiles s’appuient sur cette valeur pour déterminer la version de clavier virtuel la plus adaptée. C’est pourquoi il est important d’aller au-delà de la simple valeur text, et d’utiliser search, email, url, tel, ou number lorsque c’est pertinent.

Il est possible d’apporter d’autres indices encore à ces navigateurs. Dans cet article, nous allons vous présenter trois attributs que vous pouvez ajouter aux éléments input. Les trois sont des attributs énumérés, c’est-à-dire qu’ils utilisent des valeurs prédéfinies. Il n’est pas nécessaire de mémoriser ce vocabulaire ; vous pourrez vous y référer au gré de vos besoins.

inputmode

L’attribut inputmode est l’indication la plus directe que vous puissiez fournir à propos du clavier virtuel que vous souhaitez activer. Certaines valeurs s’avéreront redondantes si vous utilisez déjà un input type de valeur search, email, tel, ou url.

Il peut arriver cependant que vous souhaitiez un clavier qui soit optimisé pour une saisie numérique tout en autorisant d’autres caractères. Dans ce cas, il est possible d’utiliser un input type de valeur text avec un inputmode de valeur numeric. Cela implique également qu’il n’y aura pas de curseurs fléchés (boutons haut et bas) sur les navigateurs de bureau, d’ordinaire présents avec un input type de valeur number. Il peut parfois être utile de supprimer les curseurs (spinbutton) si le nombre indiqué n’est pas destiné à être incrémenté.

Si vous combinez inputmode="numeric" avec pattern="[0-9]", vous obtiendrez un clavier numérique sans aucun autre caractère. Les valeurs possibles d’inputmode sont : text, numeric, decimal, search, email, tel et url.

enterkeyhint

Si l’attribut inputmode fournit une indication quant au clavier virtuel à afficher, l’attribut enterkeyhint quant à lui apporte une précision supplémentaire concernant une touche spécifique de ce clavier virtuel : la touche Entrée.

Pour les formulaires de recherche, il est possible de définir la valeur search pour enterkeyhint, et pour les formulaires de contact, de définir la valeur send.

L’attribut enterkeyhint modifie uniquement l’étiquette de la touche Entrée. Dans certains navigateurs, cette étiquette est composée de texte. Dans d’autres, elle prend la forme d’une icône. Mais l’attribut lui-même ne modifie pas la fonction. Même si des attributs enterkeyhint de valeur previous et next sont présents, la touche Entrée validera quand même le formulaire. Ainsi, ces deux valeurs sont moins utiles dans de longs formulaires où la personne passera d’un champ à l’autre : elles se prêtent mieux à des séries de formulaires courts.

Les valeurs possibles sont : enter, done, next, previous, go, search et send.

autocomplete

L’attribut autocomplete n’a rien à voir avec le clavier virtuel. Son rôle est plutôt de fournir au navigateur une indication sur les valeurs pouvant être préremplies à partir des informations préalablement renseignées par l’utilisateur ou l’utilisatrice dans son navigateur.

La plupart des navigateurs essaient de déterminer si le préremplissage est possible, mais ils se trompent parfois, ce qui peut être problématique. Cependant, si votre indication autocomplete est explicite, les navigateurs pourront préremplir les valeurs sans erreur.

Imaginez le gain de temps pour vos utilisateurs !

Vous pouvez utiliser une valeur name pour préremplir des noms entiers. Mais si vous avez prévu des champs de formulaire pour les différentes parties qui composent un nom — une pratique que je ne recommanderais pas (article en anglais) — il existe aussi :

• given-name (prénom) ;
• additional-name (prénoms additionnels) ;
• family-name (nom de famille) ;
• nickname (surnom, pseudonyme, identifiant) ;
• honorific-prefix (préfixe, civilité ou titre) ;
• honorific-suffix (suffixe).

Il peut être tentant d’utiliser le champ nickname pour les noms d’utilisateur, mais ce n’est pas nécessaire ; il existe une valeur username dédiée.

Comme pour les noms, il existe une valeur tel unique pour les numéros de téléphone, mais aussi un éventail de sous-valeurs si vous avez décidé de répartir les numéros de téléphone dans des champs séparés :

• tel-country-code (indicatif du pays du numéro de téléphone) ;
• tel-national (numéro de téléphone sans l’indicatif du pays, avec un préfixe interne au pays le cas échéant) ;
• tel-area-code (indicatif régional du numéro de téléphone, avec un préfixe interne au pays le cas échéant) ;
• tel-local (numéro de téléphone sans l’indicatif du pays ni l’indicatif régional) ;
• tel-extension (code d’extension interne du numéro de téléphone).

Il existe également une série de valeurs pour indiquer les éléments d’adresse postale :

• street-address (adresse postale ; plusieurs lignes, les retours à la ligne sont conservées) ;
• address-line1 (adresse postale ; une ligne par champ, ligne 1) ;
• address-line2, (adresse postale ; une ligne par champ, ligne 2) ; et
• address-line3 (adresse postale ; une ligne par champ, ligne 3) ; mais aussi
• address-level1 (le niveau administratif le plus général de l’adresse, c’est-à-dire la province dans laquelle se trouve la localité) ;
• address-level2 (le deuxième niveau administratif, dans les adresses comportant deux niveaux administratifs ou plus) ;
• address-level3 (le troisième niveau administratif, dans les adresses comportant trois niveaux administratifs ou plus) ;
• address-level4 (le niveau administratif le plus détaillé, dans les adresses comportant quatre niveaux administratifs).

Si votre public est international, la saisie d’adresses peut vite se corser dès lors que vous tentez de les décomposer en différentes parties.

Il y a aussi une valeur postal-code (code postal, code ZIP, code CEDEXI), mais une fois de plus, si vous vous adressez à un public international, n’en faites pas un champ requis. Certains pays n’utilisent aucun code postal.

À propos de pays, vous avez à disposition une valeur country-name (nom du pays) et également une valeur country (code du pays) pour le code ISO du pays.

Souvenez-vous, la valeur autocomplete concerne spécifiquement les informations de la personne connectée. Si elle doit saisir sa propre adresse, utilisez l’attribut autocomplete. Mais si, par exemple, elle précise que l’adresse de facturation est différente de l’adresse de livraison, il se peut que l’adresse de livraison ne corresponde pas à l’adresse associée au profil de la personne.

D’ailleurs, au sujet de la facturation, si votre formulaire inclut la saisie des données d’une carte bancaire, utilisez sans hésiter l’attribut autocomplete. Les valeurs dont vous pourrez sans doute avoir besoin sont les suivantes :

• cc-name (nom complet tel qu’il figure sur le moyen de paiement) ;
• cc-number pour le numéro de la carte ;
• cc-exp pour la date d’expiration de la carte ;
• cc-csc pour le code de sécurité.

Comme pour les cas précédents, des variantes existent pour ces valeurs. Par exemple, cc-exp-month et cc-exp-year pour le mois et l’année de la date d’expiration.

L’attribut autocomplete est vraiment pratique pour les formulaires de connexion. Utilisez sans hésiter les valeurs email ou username selon les besoins.

Si vous avez mis en place l’authentification à double facteur, veillez à ajouter au champ de formulaire un attribut autocomplete avec la valeur one-time-code. Cela permettra au navigateur de proposer de préremplir une valeur à partir d’un SMS, épargnant à l’utilisatrice des tas de copier-coller fastidieux. Phil Nash aborde le sujet plus en détail sur le blog Twilio (en anglais).

Si cette fonctionnalité n’est pas proposée par tous les navigateurs mobiles, ça n’est pas la fin du monde. C’est un cas classique d’amélioration progressive. L’ajout d’une valeur d’attribut autocomplete ne peut de toute façon pas faire de mal à un navigateur qui n’en comprend pas encore la valeur.

Utilisez un autocomplete de valeur current-password pour les champs de formulaire de connexion destinés à la saisie d’un mot de passe. Cette méthode est particulièrement utile pour les gestionnaires de mots de passe.

Toutefois, si une personne s’est connectée et procède à la modification de son mot de passe, utilisez la valeur new-password (nouveau mot de passe). Cela empêchera le navigateur de préremplir ce champ avec le mot de passe existant.

Il en va de même pour les formulaires d’inscription ; utilisez la valeur new-password. Grâce à cette indication, les gestionnaires de mots de passe pourront proposer de générer automatique un mot de passe sécurisé.

Et voilà, désormais vous en savez un peu plus sur ces trois petits attributs qui simplifieront l’utilisation de vos formulaires. Il vous suffit d’ajouter quelques caractères supplémentaires à vos éléments input pour améliorer tout de suite l’expérience utilisateur.

C’est un exemple classique où c’est le navigateur qui se charge d’une tâche difficile à votre place. Comme l’explique Andy, soyez le mentor de votre navigateur, pas son micro-manager (article en anglais) :

Définissez des règles et indications pertinentes pour le navigateur, puis laissez-le prendre les décisions adéquates pour les personnes qui s’en servent, en tenant compte de leur appareil, de la qualité de leur réseau et de leurs capacités.

Traduction : Eleanor Hac