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

Sam Dutton

Cet atelier de programmation vous explique comment créer un formulaire d'inscription sécurisé, accessible et facile à utiliser.

Étape 1 : Utilisez du code HTML pertinent

Dans cette étape, vous allez apprendre à utiliser des éléments de formulaire pour exploiter pleinement les fonctionnalités intégrées du navigateur.

  • Cliquez sur Remixer pour modifier pour rendre le projet modifiable.

Examinez le code HTML de votre formulaire dans index.html. Le nom, l'adresse e-mail et le mot de passe sont indiqués. Chacune se trouve dans une section et est associée à un libellé. Le bouton S'inscrire est… un <button> ! Vous découvrirez plus tard dans cet atelier de programmation les pouvoirs spéciaux de tous ces éléments.

<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>

Cliquez sur Afficher l'application pour prévisualiser votre formulaire d'inscription. Vous pouvez ainsi voir à quoi ressemble un formulaire sans CSS, à l'exception des styles par défaut du navigateur.

  • Les styles par défaut semblent-ils corrects ? Que changeriez-vous pour améliorer l'apparence du formulaire ?
  • Les styles par défaut fonctionnent-ils correctement ? Quels problèmes pourriez-vous rencontrer si vous utilisiez votre formulaire tel quel ? Qu'en est-il sur mobile ? Qu'en est-il des lecteurs d'écran ou des autres technologies d'assistance ?
  • Qui sont vos utilisateurs, et quels appareils et navigateurs ciblez-vous ?

Tester votre formulaire

Vous pourriez acquérir beaucoup de matériel et mettre en place un atelier consacré aux appareils, mais il existe des moyens moins chers et plus simples d'essayer votre formulaire sur différents navigateurs, plates-formes et appareils:

Cliquez sur Afficher l'application pour prévisualiser votre formulaire d'inscription.

  • 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 physique. Quelles différences constatez-vous ?

Étape 2 : Ajoutez du CSS pour améliorer le fonctionnement du formulaire

Cliquez sur Afficher le code source pour revenir à votre code source.

Le code HTML n'a rien d'anormal jusqu'à présent, mais vous devez vous assurer que votre formulaire fonctionne correctement pour un large éventail d'utilisateurs sur mobile et sur ordinateur.

À cette étape, vous allez ajouter du CSS pour faciliter l'utilisation du formulaire.

Copiez et collez tout le code CSS suivant dans le fichier css/main.css:

Cliquez sur Afficher l'application pour afficher votre formulaire d'inscription stylisé. Cliquez ensuite sur Afficher la source pour revenir à css/main.css.

  • Ce 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. Les requêtes média permettent d'appliquer des règles CSS aux fenêtres d'affichage d'une largeur minimale de 400px, puis d'une largeur minimale de 500px. Ces points d'arrêt sont-ils adaptés ? Comment choisir les points d'arrêt pour les formulaires ?

Étape 3 : Ajoutez des attributs pour aider les utilisateurs à saisir des données

À cette étape, vous ajoutez des attributs à vos éléments de saisie pour permettre au navigateur de stocker et de renseigner automatiquement les valeurs des champs de formulaire, et d'avertir en cas de données manquantes ou non valides.

Modifiez votre fichier index.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 ont de très nombreux effets : * type="password" masque le texte lors de la saisie 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 garantit aux utilisateurs mobiles de disposer d'un clavier approprié. Essayez-le !

Cliquez sur Afficher l'application, puis sur le libellé E-mail. Que se passe-t-il ? Le focus passe à la zone de saisie de l'adresse e-mail, car le libellé a une valeur for qui correspond à la id de la zone de saisie de l'adresse e-mail. Les autres étiquettes et entrées fonctionnent de la même manière. Les lecteurs d'écran énoncent également le texte du libellé lorsque le libellé (ou la saisie associée au libellé) est sélectionné. Vous pouvez essayer de le faire à l'aide de l'extension ChromeVox.

Essayez d'envoyer le formulaire avec un champ vide. Le navigateur n'envoie pas le formulaire, et il invite à renseigner les données manquantes et à définir la sélection. En effet, vous avez ajouté l'attribut require à toutes les entrées. Essayez maintenant d'envoyer la demande avec un mot de passe de moins de huit caractères. Le navigateur avertit que le mot de passe n'est pas assez long et met le focus sur la saisie du mot de passe en raison de l'attribut minlength="8". Il en va de même pour pattern (utilisé pour la saisie du nom) et d'autres contraintes de validation. Le navigateur effectue toutes ces opérations automatiquement, sans code supplémentaire.

L'utilisation de la valeur autocomplete name pour l'entrée Nom complet est logique, mais qu'en est-il des autres entrées ? * autocomplete="username" pour la saisie Adresse e-mail signifie que le gestionnaire de mots de passe du navigateur stockera l'adresse e-mail en tant que "nom" de cet utilisateur (le nom d'utilisateur) associé au mot de passe. * autocomplete="new-password" pour Mot de passe est un indice pour le gestionnaire de mots de passe, qui doit proposer de stocker cette valeur en tant que mot de passe pour le site actuel. Vous pouvez ensuite utiliser autocomplete="current-password" pour activer la saisie automatique dans un formulaire de connexion (rappelez-vous qu'il s'agit d'un formulaire de souscription).

Étape 4 : Aidez les utilisateurs à saisir des mots de passe sécurisés

Avec le formulaire tel qu'il est, avez-vous remarqué un problème avec la saisie du mot de passe ?

Il y a deux problèmes : * Il n'y a aucun moyen de savoir s'il existe des contraintes sur la valeur du mot de passe. * Vous ne pouvez pas voir le mot de passe pour vérifier que vous l'avez saisi correctement.

Ne demandez pas aux utilisateurs de deviner !

Remplacez la section du mot de passe de index.html par le code suivant :

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

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

  • Bouton (en fait, simple texte) permettant d'activer ou de désactiver l'affichage du mot de passe. (La fonctionnalité du bouton sera ajoutée avec JavaScript.)
  • Un attribut aria-label pour le bouton d'activation/de désactivation du mot de passe.
  • Un 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'activation/de désactivation du mot de passe et afficher des informations sur les contraintes de mot de passe aux utilisateurs, copiez tout le code JavaScript ci-dessous et collez-le dans votre propre fichier js/main.js.

(Le CSS est déjà en place depuis l'étape 2. Regardez comment ce bouton est stylisé et positionné.

  • Une icône serait-elle plus efficace qu'un texte pour activer/désactiver l'affichage du mot de passe ? Essayez les tests 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. Pouvez-vous remplir le formulaire en utilisant uniquement ChromeVox ? Dans la négative, que changeriez-vous ?

Voici à quoi doit ressembler votre formulaire à ce stade :

Pour aller plus loin

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

  • Recherche de mots de passe compromis. Vous ne devez jamais autoriser les mots de passe compromis. Vous pouvez (et devriez) utiliser un service de vérification des mots de passe pour identifier les mots de passe compromis. Vous pouvez utiliser un service existant ou en exécuter un vous-même sur vos propres serveurs. Essayez ! Ajoutez une fonctionnalité de vérification des mots de passe à votre formulaire.

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

  • Style et branding : assurez-vous qu'ils correspondent au reste de votre site. Lorsqu'ils saisissent des noms et des adresses, et effectuent des paiements, les utilisateurs doivent se sentir à l'aise et avoir l'assurance qu'ils sont toujours au bon endroit.

  • Analyse et surveillance des utilisateurs réels : permet de tester et de surveiller les performances et l'usabilité de la conception de votre formulaire pour des utilisateurs réels.