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

Sam Dutton

Pour suivre cet atelier de programmation, ouvrez ce Glitch dans un deuxième onglet.

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. Vous verrez des champs de saisie pour le nom, l'adresse e-mail et le mot de passe. 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.

Remarque : Les éléments <input> ne comportent pas de balises de fermeture. En effet, il s'agit d'éléments sans contenu (vides) : ils ne contiennent aucun contenu en eux-mêmes. Le caractère "/" à la fin d'un élément vide est facultatif: <input> ou <input /> est acceptable.

<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 vous 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 d'autres technologies d'assistance ?
• Qui sont vos utilisateurs, et quels appareils et navigateurs ciblez-vous ?

Remarque : Styles par défaut du navigateur liste les styles CSS par défaut pour les éléments HTML.

Tester votre formulaire

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

• Utilisez le mode Appareil des outils pour les développeurs Chrome pour simuler des appareils mobiles.
• Envoyez l'URL depuis votre ordinateur vers votre téléphone.
• Utilisez un service tel que BrowserStack pour effectuer des tests sur différents appareils et navigateurs.
• Essayez le formulaire à l'aide d'un outil de lecteur d'écran tel que l'extension Chrome ChromeVox.

Avertissement : Tester votre site sur différents appareils et navigateurs est particulièrement important pour les formulaires, car de petits problèmes peuvent entraîner des taux de rebond élevés et amener les utilisateurs à renoncer à créer un compte ou à effectuer un achat.

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 code 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'au moins 400px pixels de large, puis aux fenêtres d'affichage d'au moins 500px pixels de large. Ces points de rupture sont-ils adaptés ? Comment choisir les points d'arrêt pour les formulaires ?

Remarque : Dans ce contexte, le volet d'affichage désigne la zone d'affichage disponible pour votre page. Les téléphones mobiles ont une fenêtre d'affichage plus petite que les ordinateurs portables, et une petite fenêtre de navigateur sur un écran d'ordinateur de bureau a une fenêtre d'affichage plus petite qu'une fenêtre de navigateur maximisée.

É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 afin 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 nombreuses fonctions : * type="password" masque le texte au fur et à mesure de sa 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é Adresse 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 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 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 tout cela 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).

Remarque : Pour obtenir d'autres conseils sur la conception, la mise en page et l'accessibilité des formulaires, consultez les bonnes pratiques concernant les formulaires de connexion.

É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 existe deux problèmes : * Il est impossible de savoir si des contraintes sont appliquées à 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 de saisie (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. Jetez un œil pour voir comment le bouton d'activation/de désactivation du mot de passe 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é à moindre coût 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 à l'aide de ChromeVox uniquement ? 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:

• Vérifier la présence de mots de passe compromis Vous ne devez jamais autoriser les mots de passe 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 du mot de passe à votre formulaire.

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

• Style et branding: assurez-vous qu'ils correspondent au reste de votre site. Lorsque les utilisateurs saisissent des noms et des adresses, et effectuent un paiement, ils doivent se sentir à l'aise, en sachant qu'ils sont toujours sur la bonne page.

• Analyses 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.