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 un code HTML pertinent

Au cours de cette étape, vous allez apprendre à utiliser des éléments de formulaire pour tirer le meilleur parti des fonctionnalités intégrées au navigateur.

  • Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.

Examinez le code HTML de votre formulaire dans index.html. Vous pouvez saisir le nom, l'adresse e-mail et le mot de passe. Chacun d'entre eux se trouve dans une section et est associé à un libellé. Le bouton S'inscrire est... un <button> ! Plus tard dans cet atelier de programmation, vous découvrirez 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 utiliser de code CSS autre que les styles de navigateur par défaut.

  • 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 lors de l'utilisation de votre formulaire tel quel ? Et sur mobile ? Qu'en est-il pour les lecteurs d'écran et les autres technologies d'assistance ?
  • Qui sont vos utilisateurs, et quels appareils et navigateurs ciblez-vous ?

Tester votre formulaire

Vous pouvez vous procurer beaucoup de matériel et configurer un atelier sur les appareils, mais il existe des moyens plus simples et moins chers d'essayer votre formulaire sur toute une gamme de navigateurs, de plates-formes et d'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 d'autres appareils. Quelles différences constatez-vous ?

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

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

Il n'y a aucun problème avec le code HTML jusqu'à présent, mais vous devez vous assurer que votre formulaire fonctionne bien pour un large éventail d'utilisateurs sur mobile et sur ordinateur.

Au cours de cette étape, vous allez ajouter du code CSS pour faciliter l'utilisation du formulaire.

Copiez et collez tous les éléments CSS suivants dans le fichier css/main.css:

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

  • Ce CSS fonctionne-t-il pour des navigateurs et des tailles d'écran variés ?

  • Essayez d'ajuster padding, margin et font-size en fonction de vos appareils de test.

  • Le CSS est conçu pour les mobiles. Les requêtes média permettent d'appliquer des règles CSS pour les fenêtres d'affichage d'une largeur d'au moins 400px, puis de nouveau pour les fenêtres d'affichage d'une largeur d'au moins 500px. Ces points d'arrêt sont-ils appropriés ? Comment choisir des points d'arrêt pour les formulaires ?

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

Au cours de cette étape, vous allez ajouter des attributs à vos éléments d'entrée pour permettre au navigateur de stocker et remplir automatiquement les valeurs des champs de formulaire, et d'afficher un avertissement en cas de données manquantes ou non valides.

Mettez à jour 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 sont très nombreuses : * 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" effectue une validation de base et garantit que les utilisateurs mobiles disposent d'un clavier approprié. Essayez-la !

Cliquez sur Afficher l'application, puis sur le libellé E-mail. Que se passe-t-il ? Le curseur est placé sur l'entrée de l'adresse e-mail, car la valeur for du libellé correspond à celle du champ id. Les autres étiquettes et entrées fonctionnent de la même manière. Les lecteurs d'écran énoncent également le texte du libellé lorsque celui-ci (ou l'entrée associée au libellé) est sélectionné. Pour ce faire, utilisez l'extension ChromeVox.

Essayez d'envoyer le formulaire avec un champ vide. Le navigateur n'envoie pas le formulaire et vous invite à compléter les données manquantes et à définir la priorité. En effet, vous avez ajouté l'attribut require à toutes les entrées. Essayez 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 se concentre 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 de nom) et d'autres contraintes de validation. Le navigateur effectue toutes ces opérations automatiquement, sans 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 en tant que "nom" de l'utilisateur (le nom d'utilisateur) qui sera associé au mot de passe. * autocomplete="new-password" pour Password (Mot de passe) indique au gestionnaire de mots de passe 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 (pour rappel, il s'agit d'un sign-up).

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

Avec le formulaire tel qu’il est, avez-vous remarqué quelque chose de mal avec la saisie du mot de passe ?

Il y a deux problèmes : * Il n'y a aucun moyen de savoir si des contraintes s'appliquent à la valeur du mot de passe. * 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 des mots 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 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 désormais ajoutées pour aider les utilisateurs à saisir leurs mots de passe:

  • Un bouton (uniquement du texte) permettant d'afficher ou de masquer le mot de passe. (La fonctionnalité de 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. Ils 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 des mots de passe et afficher des informations sur les contraintes liées aux mots de passe, copiez l'intégralité du code JavaScript ci-dessous et collez-le dans votre propre fichier js/main.js.

(Le code CSS est déjà en place à l'étape 2. Voyons comment le bouton d'activation/de désactivation du mot de passe est positionné et stylisé.)

  • Une icône fonctionnerait-elle mieux qu'un texte pour activer/désactiver l'affichage du mot de passe ? Essayez les tests de facilité d'utilisation à prix réduit avec un petit groupe d'amis ou de collègues.

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

À cette étape, votre formulaire doit se présenter comme suit:

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 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. Vous pouvez utiliser un service existant ou en exécuter un vous-même sur vos propres serveurs. Essayez ! Ajoutez la vérification des mots de passe à votre formulaire.

  • Lien vers 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 leur nom et leur adresse et effectuent un paiement, ils doivent pouvoir se sentir à l'aise et avoir la certitude d'être au bon endroit.

  • Analyse et surveillance des utilisateurs réels : testez les performances et la facilité d'utilisation de la conception de votre formulaire auprès d'utilisateurs réels.