Atelier de programmation sur les bonnes pratiques concernant le formulaire d'inscription

Sam Dutton

Découvrez comment créer un formulaire d'inscription sécurisé, accessible et plus facile à utiliser. Le formulaire final est disponible dans CodePen.

1. Utiliser un code HTML pertinent

Découvrez comment utiliser les éléments de formulaire pour exploiter au mieux les fonctionnalités intégrées du navigateur.

  1. Créez un Pen.

  2. Copiez et collez le code suivant dans l'éditeur HTML.

    <form action="#" method="post">
  <h1>Sign up</h1>

  <section>
    <label>Full name</label>
    <input>
  </section>

  <section>
    <label>Email</label>
    <input>
  </section>

  <section>
    <label>Password</label>
    <input>
  </section>

  <button id="sign-up">Sign up</button>
</form>

  3. Cliquez sur l'aperçu en direct pour afficher le formulaire HTML. Des champs sont prévus pour le nom, l'adresse e-mail et le mot de passe. Ce formulaire n'utilise que le CSS du navigateur par défaut.

Chaque entrée se trouve dans une section et possède un libellé. Le bouton d'inscription est, et c'est important, un <button>. Dans la suite de cet atelier de programmation, vous découvrirez les pouvoirs spéciaux de tous ces éléments.

Posez-vous les questions suivantes :

  • Les styles par défaut vous conviennent-ils ? Quels éléments changeriez-vous pour améliorer l'apparence du formulaire ?
  • Les styles par défaut fonctionnent-ils correctement ? Quels problèmes pourraient être rencontrés en utilisant votre formulaire tel quel ? Qu'en est-il sur mobile ? Qu'en est-il des lecteurs d'écran ou d'autres technologies d'assistance ?
  • Qui sont vos utilisateurs, et quels appareils et navigateurs ciblez-vous ?

Tester votre formulaire

Vous pouvez acquérir de nombreux éléments matériels et configurer un laboratoire d'appareils, mais il existe des moyens plus simples et moins coûteux de tester votre formulaire sur différents navigateurs, plates-formes et appareils :

Ouvrez la vue en direct de votre CodePen ou accédez à notre vue en direct. Testez votre formulaire sur différents appareils à l'aide du mode Appareil des outils pour les développeurs Chrome.

Ouvrez maintenant le formulaire sur un téléphone ou un autre appareil réel. Quelles différences constatez-vous ?

2. Ajouter du code CSS pour améliorer le fonctionnement du formulaire

Le code HTML est correct jusqu'à présent, mais vous devez vous assurer que votre formulaire fonctionne bien pour un large éventail d'utilisateurs sur mobile et sur ordinateur.

Dans cette étape, vous allez ajouter du code CSS pour rendre le formulaire plus facile à utiliser. Copiez et collez ce CSS dans le fichier css/main.css.

Cliquez sur l'aperçu pour afficher votre formulaire d'inscription stylisé.

Ce code CSS fonctionne-t-il pour différents navigateurs et tailles d'écran ?

  • Essayez d'ajuster padding, margin et font-size en fonction de vos appareils de test.
  • Le CSS est mobile-first. Utilisez des requêtes média pour appliquer des règles CSS aux fenêtres d'affichage d'au moins 400px pixels de large, puis à celles d'au moins 500px pixels de large. Ces points d'arrêt sont-ils adéquats ? Comment choisir les points d'arrêt pour les formulaires ?

3. Ajouter des attributs pour aider les utilisateurs à saisir des données

Ajoutez des attributs à vos éléments d'entrée pour permettre au navigateur de stocker et de remplir automatiquement les valeurs des champs de formulaire, et d'avertir des champs dont les données sont manquantes ou non valides.

Mettez à jour votre code HTML pour que le code du formulaire se présente comme suit :

<form action="#" method="post">

  <h1>Sign up</h1>

  <section>
    <label for="name">Full name</label>
    <input id="name" name="name" autocomplete="name"
    pattern="[\p{L}\.\- ]+" required>
  </section>

  <section>
    <label for="email">Email</label>
    <input id="email" name="email" autocomplete="username"
    type="email" required>
  </section>

  <section>
    <label for="password">Password</label>
    <input id="password" name="password" autocomplete="new-password"
    type="password" minlength="8" required>
  </section>

  <button id="sign-up">Sign up</button>
</form>

Les valeurs type réalisent une grande part du travail :

  • type="password" masque le texte à mesure qu'il est saisi et permet au gestionnaire de mots de passe du navigateur de suggérer un mot de passe sécurisé.
  • type="email" fournit une validation de base et s'assure que les utilisateurs mobiles disposent d'un clavier approprié.

Dans l'aperçu, cliquez sur le libellé Adresse e-mail. Que se passe-t-il ? La sélection se déplace vers le champ de saisie de l'adresse e-mail, car le libellé possède une valeur for qui correspond à la valeur id du champ de saisie de l'adresse e-mail. Les autres libellés et entrées fonctionnent de la même manière. Les lecteurs d'écran énoncent également le texte du libellé lorsque le libellé (ou l'entrée associée) est sélectionné.

Essayez d'envoyer le formulaire avec un champ vide. Le navigateur n'envoie pas le formulaire, mais invite à compléter les données manquantes et définit le focus. En effet, nous avons ajouté l'attribut require à toutes les entrées.

Essayez maintenant d'envoyer un mot de passe de moins de huit caractères. Le navigateur avertit que le mot de passe n'est pas assez long et définit le focus sur le champ de saisie du mot de passe en raison de l'attribut minlength="8". Il en va de même pour pattern (utilisé pour le nom) et les autres contraintes de validation. Le navigateur effectue toutes ces opérations automatiquement, sans nécessiter de code supplémentaire.

Il est logique d'utiliser la valeur autocomplete name pour l'entrée Nom complet, mais qu'en est-il des autres entrées ?

  • autocomplete="username" pour l'entrée Adresse e-mail signifie que le gestionnaire de mots de passe du navigateur stockera l'adresse e-mail comme "nom" pour cet utilisateur (le nom d'utilisateur !) avec le mot de passe.
  • autocomplete="new-password" pour Mot de passe est un indice indiquant au gestionnaire de mots de passe qu'il doit proposer d'enregistrer cette valeur comme mot de passe pour le site actuel. Vous pouvez ensuite utiliser autocomplete="current-password" pour activer la saisie automatique dans un formulaire de connexion. N'oubliez pas qu'il s'agit d'un formulaire d'inscription.

4. Aider les utilisateurs à saisir des mots de passe sécurisés

Avez-vous remarqué quelque chose d'anormal dans la saisie du mot de passe ? Deux problèmes se posent :

  • Il est impossible de savoir si la valeur du mot de passe est soumise à des contraintes.
  • Vous ne pouvez pas voir le mot de passe pour vérifier si vous l'avez saisi correctement.

Ne faites pas deviner les utilisateurs. Mettez à jour la section du mot de passe de index.html avec le code suivant :

<section>
  <label for="password">Password</label>
  <button id="toggle-password" type="button"
  aria-label="Show password as plain text. Warning: this displays your password on the screen.">
  Show password</button>
  <input id="password" name="password" type="password" minlength="8"
  autocomplete="new-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">Eight or more characters.</div>
</section>

De nouvelles fonctionnalités ont été ajoutées pour aider les utilisateurs à saisir des mots de passe :

  • Bouton (en fait, il s'agit simplement de texte) permettant d'activer/de désactiver l'affichage du mot de passe. (La fonctionnalité du bouton sera ajoutée avec JavaScript.)
  • Attribut aria-label pour le bouton d'activation/désactivation du mot de passe.
  • Attribut aria-describedby pour la saisie du mot de passe. Les lecteurs d'écran lisent le texte du libellé, le type d'entrée (mot de passe), puis la description.

Pour activer le bouton d'affichage/masquage du mot de passe et afficher des informations sur les contraintes liées aux mots de passe, copiez le code JavaScript et collez-le dans l'éditeur JavaScript.

  • Une icône serait-elle plus efficace que du texte pour activer/désactiver l'affichage du mot de passe ? Essayez le test d'utilisabilité à prix réduit avec un petit groupe d'amis ou de collègues.

  • Pour découvrir comment les lecteurs d'écran fonctionnent avec les formulaires, installez l'extension ChromeVox et parcourez le formulaire. Pourriez-vous remplir le formulaire en utilisant uniquement ChromeVox ? Si ce n'est pas le cas, qu'est-ce que vous changeriez ?

Aller plus loin

Cet atelier de programmation ne couvre pas plusieurs fonctionnalités importantes :

  • Vérification des mots de passe compromis. Vous ne devez jamais autoriser les mots de passe qui ont été compromis. Vous pouvez (et devez) utiliser un service de vérification des mots de passe pour détecter les mots de passe compromis.

  • Lien vers vos conditions d'utilisation et vos règles de confidentialité. Indiquez clairement aux utilisateurs comment vous protégez leurs données.

  • Modifiez le style et la marque de vos formulaires pour qu'ils correspondent au reste de votre site. Cela permet aux utilisateurs de s'assurer qu'ils sont au bon endroit lorsqu'ils saisissent des noms et des adresses, et surtout lorsqu'ils effectuent des paiements.

  • Ajoutez Analytics et Real User Monitoring. Permet de tester et de surveiller les performances et l'usabilité de la conception de votre formulaire pour les utilisateurs réels.