Créer un formulaire de connexion conforme aux bonnes pratiques

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

Si les utilisateurs doivent se connecter à votre site, il est essentiel de concevoir un formulaire de connexion 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 de connexion mal conçus entraînent 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é de connexion manquée.

Mise en œuvre

Vous trouverez ci-dessous les consignes les plus importantes pour créer des formulaires de connexion 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 Se connecter 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 la connexion

Pour chaque étape de la connexion, utilisez des en-têtes 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.

Aider les utilisateurs à éviter de saisir à nouveau leurs données de connexion

Veillez à ajouter les valeurs autocomplete appropriées dans les formulaires de connexion.

Cela permet aux navigateurs d'aider les utilisateurs en stockant de manière sécurisée les informations de connexion 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 de connexion 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. Ajoutez l'attribut required aux champs obligatoires pour empêcher l'envoi de formulaires vides.

Placer la connexion 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 permet aux lecteurs d'écran et autres appareils d'assistance d'accéder à votre site, d'activer un éventail de fonctionnalités de navigateur intégrées, de simplifier la création d'une connexion fonctionnelle de base pour les anciens navigateurs et de continuer à 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 d'obstruer le bouton de connexion

Si vous ne faites pas attention, les claviers mobiles peuvent couvrir votre formulaire ou, pire, masquer partiellement le bouton de connexion. 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 de connexion en haut de votre page de connexion. 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="current-password" pour un mot de passe existant

OBLIGATOIRE : Utilisez autocomplete="current-password" pour la saisie du mot de passe dans un formulaire de connexion. Cela indique au navigateur que vous souhaitez qu'il utilise le mot de passe actuel qu'il a enregistré pour le site.

Pour un formulaire de connexion :

<input type="password" autocomplete="current-password" id="current-password" …>

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

OBLIGATOIRE : 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.

<input type="email" id="email" name="email" autocomplete="username" required>
<input type="password" id="password" name="password" autocomplete="current-password" required>

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.

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 de connexion. 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.