Créer un formulaire d'inscription qui respecte les bonnes pratiques

Utilisez les fonctionnalités de navigateur multiplate-forme pour créer des formulaires d'inscription sécurisés, accessibles et faciles à utiliser.

Si les utilisateurs doivent s'inscrire sur votre site, il est essentiel de concevoir un formulaire d'inscription de qualité. C'est particulièrement vrai pour les personnes qui ont une mauvaise connexion, qui sont sur mobile, qui sont pressées ou qui sont stressées. Les formulaires d'inscription mal conçus enregistrent des taux de rebond élevés. Chaque rebond peut signifier la perte d'un client et un utilisateur mécontent, et pas seulement une opportunité d'inscription manquée.

Mise en œuvre

Vous trouverez ci-dessous les consignes les plus importantes pour créer des formulaires d'inscription efficaces.

Utiliser un code HTML pertinent et valide

Tirez le meilleur parti des éléments et des attributs conçus pour créer des formulaires :

• <form>, <input>, <label> et <button>
• type, autocomplete et inputmode

Ils activent les fonctionnalités intégrées du navigateur, améliorent l'accessibilité et ajoutent du sens au balisage.

Utilisez l'élément <label> pour ajouter des libellés aux champs de formulaire pour la saisie de données.

Pour ajouter un libellé à un <input>, un <select> ou un <textarea>, utilisez un <label>. Associez un libellé à une entrée en attribuant à l'attribut for du libellé la même valeur que l'attribut id de l'entrée.

Exploiter tout le potentiel des attributs HTML

Facilitez la saisie des données par les utilisateurs en utilisant l'attribut d'élément <input> <type> approprié pour fournir le bon clavier sur mobile et activer la validation intégrée de base par le navigateur.

Utilisez toujours type="email" pour les adresses e-mail et type="tel" pour les numéros de téléphone.

Chaque élément <input>, <select> et <textarea> DOIT comporter un attribut autocomplete approprié pour améliorer l'accessibilité et éviter aux utilisateurs de saisir à nouveau des données.

Les champs de nom d'utilisateur et d'adresse e-mail contiennent des identifiants, pas du texte. Ajoutez spellcheck="false" pour que le navigateur ne les réécrive pas en quelque chose qui ne correspond pas au compte. autocorrect et autocapitalize sont toujours désactivés pour input type="email", mais sont obligatoires pour les noms d'utilisateur qui ne sont pas des adresses e-mail.

Rendre les boutons utiles

Utilisez <button> pour les boutons. Vous pouvez également utiliser <input type="submit">, mais n'utilisez pas d'élément div ou d'autre élément aléatoire agissant comme un bouton. Les éléments de bouton offrent un comportement accessible, une fonctionnalité d'envoi de formulaire intégrée et peuvent être facilement stylisés.

Attribuez à chaque bouton d'envoi de formulaire une valeur qui indique son action. Utilisez un libellé clair et reconnaissable. Par exemple, utilisez Créer un compte ou S'inscrire plutôt que Continuer ou Envoyer.

Utilisez un seul champ de saisie pour le nom, si possible

Permettez à vos utilisateurs de saisir leur nom dans un seul champ, sauf si vous avez une bonne raison de stocker séparément les prénoms, les noms de famille, les titres honorifiques ou d'autres parties du nom. L'utilisation d'un seul champ de saisie pour le nom simplifie les formulaires, permet le copier-coller et facilite la saisie automatique.

Autoriser les noms internationaux. Pour la validation, évitez d'utiliser des expressions régulières qui ne correspondent qu'aux caractères latins. "Latin uniquement" exclut les utilisateurs dont le nom ou l'adresse incluent des caractères qui ne figurent pas dans l'alphabet latin. Autorisez plutôt la correspondance des lettres Unicode et assurez-vous que votre backend accepte Unicode de manière sécurisée, à la fois en entrée et en sortie. Unicode dans les expressions régulières est bien pris en charge par les navigateurs récents.

Afficher la progression de l'inscription

Pour chaque étape de l'inscription, utilisez des titres de page et des valeurs de bouton descriptives qui indiquent clairement ce qu'il faut faire maintenant et quelle est l'étape suivante.

Utilisez l'attribut enterkeyhint sur les entrées de formulaire pour définir le libellé de la touche Entrée du clavier mobile. Par exemple, utilisez enterkeyhint="previous" et enterkeyhint="next" dans un formulaire multipage, enterkeyhint="done" pour la saisie finale dans le formulaire et enterkeyhint="search" pour une saisie de recherche.

Aidez les utilisateurs à ne pas avoir à saisir à nouveau leurs données d'inscription

Veillez à ajouter les valeurs autocomplete appropriées dans les formulaires d'inscription.

Cela permet aux navigateurs d'aider les utilisateurs en stockant de manière sécurisée les informations d'inscription et en saisissant correctement les données des formulaires. Sans la saisie semi-automatique, les utilisateurs sont plus susceptibles de conserver une trace physique de leurs informations d'inscription ou de les stocker de manière non sécurisée sur leur appareil.

Valider soigneusement

Validez la saisie des données en temps réel et avant l'envoi du formulaire. Utilisez type="email" pour les entrées d'adresse e-mail. Le navigateur validera automatiquement le format. Pour les mots de passe, utilisez un attribut pattern pour appliquer des exigences de sécurité et fournir des messages d'erreur clairs en cas d'échec de la validation. Ajoutez l'attribut required aux champs obligatoires pour empêcher l'envoi de formulaires vides.

Placez l'inscription dans son propre élément <form>.

Utilisez toujours l'élément <form> lorsque vous demandez aux utilisateurs de saisir des données.

N'encapsulez pas les entrées dans un <div> et gérez l'envoi des données d'entrée uniquement avec JavaScript. Il est généralement préférable d'utiliser un élément <form>. Cela rend votre site accessible aux lecteurs d'écran et autres appareils d'assistance, active un éventail de fonctionnalités de navigateur intégrées, facilite la création d'une inscription fonctionnelle de base pour les anciens navigateurs et peut toujours fonctionner même si JavaScript échoue.

Ne pas doubler les entrées

Certains sites obligent les utilisateurs à saisir deux fois leur adresse e-mail ou leur mot de passe. Cela peut réduire les erreurs pour quelques utilisateurs, mais cela entraîne un travail supplémentaire pour tous les utilisateurs et augmente les taux d'abandon. Demander deux fois l'adresse e-mail ou le mot de passe n'a pas non plus de sens lorsque les navigateurs remplissent automatiquement les adresses e-mail ou suggèrent des mots de passe sécurisés. Il est préférable de permettre aux utilisateurs de confirmer leur adresse e-mail (vous devrez de toute façon le faire) et de leur permettre de réinitialiser facilement leur mot de passe si nécessaire.

Préserver la confidentialité des mots de passe, tout en permettant aux utilisateurs de les afficher s'ils le souhaitent

Les entrées de mot de passe doivent comporter type="password" pour masquer le texte du mot de passe et aider le navigateur à comprendre que l'entrée est destinée aux mots de passe. (Notez que les navigateurs utilisent différentes techniques pour comprendre les rôles des entrées et décider de proposer ou non d'enregistrer les mots de passe.)

Vous devez ajouter un bouton d'activation/de désactivation Afficher le mot de passe pour permettre aux utilisateurs de vérifier le texte qu'ils ont saisi. N'oubliez pas d'ajouter un lien Mot de passe oublié.

Fournir le bon clavier aux utilisateurs mobiles

Utilisez <input type="email"> pour fournir aux utilisateurs mobiles un clavier approprié et activer la validation de base intégrée des adresses e-mail par le navigateur… sans JavaScript !

Si vous devez utiliser un numéro de téléphone au lieu d'une adresse e-mail, <input type="tel"> active un clavier téléphonique sur mobile. Vous pouvez également utiliser l'attribut inputmode si nécessaire : inputmode="numeric" est idéal pour les codes secrets.

Empêcher le clavier mobile de masquer le bouton d'inscription

Si vous ne faites pas attention, les claviers mobiles peuvent recouvrir votre formulaire ou, pire, masquer partiellement le bouton d'inscription. Les utilisateurs peuvent abandonner avant de comprendre ce qui s'est passé.

Dans la mesure du possible, évitez cela en n'affichant que les champs de saisie de l'adresse e-mail (ou du numéro de téléphone) et du mot de passe, ainsi que le bouton d'inscription en haut de votre page d'inscription. Placez d'autres contenus en dessous.

Aider les utilisateurs à éviter de saisir à nouveau des données

Vous pouvez aider les navigateurs à stocker correctement les données et à remplir automatiquement les champs de saisie, afin que les utilisateurs n'aient pas à se souvenir de saisir leur adresse e-mail et leur mot de passe. C'est particulièrement important sur mobile, et crucial pour les champs de saisie d'adresse e-mail, qui présentent des taux d'abandon élevés. Il y a deux parties :

1. Les attributs autocomplete, name, id et type aident les navigateurs à comprendre le rôle des entrées afin de stocker les données qui pourront être utilisées ultérieurement pour la saisie automatique. Pour permettre le stockage des données pour la saisie automatique, les navigateurs récents exigent également que les entrées aient une valeur name ou id stable (non générée de manière aléatoire à chaque chargement de page ou déploiement de site) et qu'elles se trouvent dans un élément <form> avec un bouton submit.
2. L'attribut autocomplete aide les navigateurs à remplir automatiquement les champs de saisie à l'aide des données stockées.

Pour les entrées d'adresse e-mail, utilisez autocomplete="username", car username est reconnu par les gestionnaires de mots de passe dans les navigateurs récents, même si vous devez utiliser type="email" et que vous pouvez utiliser id="email" et name="email". Pour les champs de mot de passe, utilisez la valeur autocomplete appropriée pour aider les navigateurs à différencier les nouveaux mots de passe des mots de passe actuels.

Utilisez autocomplete="new-password" pour un nouveau mot de passe

OBLIGATOIRE : Pour un formulaire d'inscription, utilisez autocomplete="new-password".

<!-- new-password prevents password managers from auto-filling an existing password into this field -->
<input type="password" id="new-password" name="new-password" autocomplete="new-password" required>

Autoriser le navigateur à suggérer un mot de passe sécurisé

Les navigateurs récents utilisent des heuristiques pour décider quand afficher l'interface utilisateur du gestionnaire de mots de passe et suggérer un mot de passe sécurisé.

Les générateurs de mots de passe intégrés aux navigateurs permettent aux utilisateurs et aux développeurs de ne pas avoir à déterminer ce qu'est un "mot de passe sécurisé". Étant donné que les navigateurs peuvent stocker les mots de passe de manière sécurisée et les saisir automatiquement si nécessaire, les utilisateurs n'ont pas besoin de les mémoriser ni de les saisir. Encourager les utilisateurs à utiliser les générateurs de mots de passe intégrés au navigateur signifie également qu'ils sont plus susceptibles d'utiliser un mot de passe unique et sécurisé sur votre site, et moins susceptibles de réutiliser un mot de passe qui pourrait être compromis ailleurs.

Aider les utilisateurs à ne pas oublier de saisir des données

Ajoutez l'attribut required aux champs d'adresse e-mail et de mot de passe. Les navigateurs récents affichent automatiquement une invite et mettent en évidence les données manquantes.

Autoriser le collage de mots de passe

Certains sites n'autorisent pas le collage de texte dans les champs de mot de passe.

Le fait d'interdire le collage de mots de passe agace les utilisateurs, les encourage à utiliser des mots de passe faciles à mémoriser (et donc plus faciles à pirater) et, selon des organisations telles que le National Cyber Security Centre du Royaume-Uni, peut en réalité réduire la sécurité. Les utilisateurs ne se rendent compte que le collage est interdit qu'après avoir essayé de coller leur mot de passe. Par conséquent, interdire le collage de mot de passe n'évite pas les failles du presse-papiers.

Proposer une connexion tierce

De nombreux utilisateurs préfèrent se connecter à des sites Web à l'aide d'un formulaire d'inscription par adresse e-mail et mot de passe. Toutefois, vous devez également permettre aux utilisateurs de se connecter à l'aide d'un fournisseur d'identité tiers, également appelé "connexion fédérée".

Cette approche présente plusieurs avantages. Pour les utilisateurs qui créent un compte à l'aide de la connexion fédérée, vous n'avez pas besoin de demander, de communiquer ni de stocker des mots de passe.

Vous pouvez également accéder à des informations de profil validées supplémentaires à partir de la connexion fédérée, comme une adresse e-mail. Cela signifie que l'utilisateur n'a pas besoin de saisir ces données et que vous n'avez pas besoin d'effectuer la validation vous-même. La connexion fédérée peut également faciliter la tâche des utilisateurs lorsqu'ils acquièrent un nouvel appareil.

Faites attention aux noms d'utilisateur

N'insistez pas pour obtenir un nom d'utilisateur, sauf si (ou jusqu'à ce que) vous en ayez besoin. Permettez aux utilisateurs de s'inscrire et de se connecter avec une simple adresse e-mail (ou un numéro de téléphone) et un mot de passe, ou avec une connexion fédérée s'ils le préfèrent. Ne les forcez pas à choisir et à mémoriser un nom d'utilisateur.

Si votre site nécessite des noms d'utilisateur, n'imposez pas de règles déraisonnables et n'empêchez pas les utilisateurs de modifier leur nom d'utilisateur. Sur votre backend, vous devez générer un identifiant unique pour chaque compte utilisateur, et non un identifiant basé sur des données à caractère personnel telles que le nom d'utilisateur.

Assurez-vous également d'utiliser autocomplete="username" pour les noms d'utilisateur.

Stratégies de remplacement

La saisie automatique est une amélioration progressive. Dans les navigateurs qui ne sont pas compatibles avec la saisie automatique, les utilisateurs devront simplement saisir manuellement leurs identifiants d'inscription. Les contraintes sémantiques HTML (telles que type, inputmode et required) continueront de fonctionner correctement pour valider les entrées utilisateur et fournir les claviers virtuels appropriés.