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

Au cours de cette étape, vous allez apprendre à utiliser les é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 pouvoir modifier le projet.

Examinez le code HTML de votre formulaire dans index.html. Des champs "Name" (Nom) et "Email" (Adresse e-mail) et un mot de passe. Chacun d'eux se trouve dans une section et possède 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. Cela vous permet de voir à quoi ressemble un formulaire sans autre CSS que 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 avec votre formulaire tel quel ? Quoi 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 pouvez acquérir beaucoup de matériel et configurer device lab. 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 tout autre appareil réel. Quelles différences constatez-vous ?

Étape 2: Ajoutez du code CSS pour que le formulaire fonctionne mieux

Cliquez sur Afficher la source pour revenir au code source.

Jusqu'à présent, il n'y a aucun problème avec le code HTML, mais vous devez vous assurer que votre formulaire fonctionne correctement pour une d'utilisateurs sur mobile et ordinateur.

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

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

Cliquez sur View App (Afficher l'application) pour consulter le style de votre formulaire d'inscription. Cliquez ensuite sur Afficher la source pour revenir à css/main.css

  • Ce CSS fonctionne-t-il avec un grand nombre de navigateurs et de tailles d'écran ?

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

  • Le CSS est conçu pour les mobiles. Requêtes média permettent d'appliquer les règles CSS aux fenêtres d'affichage d'au moins 400px de large, puis de les appliquer des fenêtres d'affichage d'une largeur d'au moins 500px. Ces points d'arrêt convenable ? Comment choisir les 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 de saisie pour permettre au navigateur d'enregistrer et de saisir automatiquement les valeurs des champs du formulaire et vous avertit 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 ont beaucoup d'impact: * type="password" masque le texte lorsqu'il est saisi et active la fonctionnalité gestionnaire de mots de passe pour suggérer un mot de passe sécurisé. * type="email" permet une validation de base et garantit que les mobinautes disposent d'un clavier approprié. Essayer CANNOT TRANSLATE

Cliquez sur Afficher l'application, puis sur le libellé E-mail. Que se passe-t-il ? Le curseur est placé dans l'e-mail car la valeur for du libellé correspond à la valeur id de l'entrée de l'adresse e-mail. Les autres étiquettes fonctionnent de la même manière. Les lecteurs d'écran énoncent également le texte du libellé lorsque le libellé (ou son entrée associée) est sélectionné. Vous pouvez essayer avec l'extension ChromeVox.

Essayez d'envoyer le formulaire en renseignant le champ correspondant. Le navigateur n'envoie pas le formulaire et invite à complète les données manquantes et met l’accent. En effet, vous avez ajouté l'attribut require à toutes les d'entrée. Essayez maintenant de l'envoyer avec un mot de passe de moins de huit caractères. Le navigateur vous avertit que le mot de passe n'est pas assez long et place le curseur sur le mot de passe saisi en raison de l'minlength="8" . Il en va de même pour pattern (utilisé pour saisir le nom) et les 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 le champ Nom complet, mais qu'en est-il d'autres entrées ? * autocomplete="username" dans le champ Adresse e-mail signifie que le gestionnaire de mots de passe du navigateur stockera l'adresse e-mail dans le "nom" pour cet utilisateur (le nom d'utilisateur !) pour qu'il soit associé au mot de passe. * La valeur autocomplete="new-password" du champ Mot de passe indique au gestionnaire de mots de passe qu'il doit proposer de stocker 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'inscription).

É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 le mot de passe saisi ?

Il existe deux problèmes: * Il n'y a aucun moyen de savoir s'il existe des contraintes au niveau de la valeur du mot de passe. * Vous ne pouvez pas voir le mot de passe pour vérifier s'il est correct.

Ne laissez pas les utilisateurs deviner !

Modifiez 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 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 ainsi ajoutées pour aider les utilisateurs à saisir leurs mots de passe:

  • Un bouton (simplement du texte) pour activer/désactiver l'affichage du mot de passe. (Le la fonctionnalité du bouton sera ajoutée avec JavaScript.)
  • Attribut aria-label pour le bouton d'activation du mot de passe.
  • Un attribut aria-describedby pour la saisie du mot de passe. Lecteurs d'écran lire le texte du libellé, le type d’entrée (mot de passe), puis la description.

Pour activer le bouton d'activation du mot de passe et afficher des informations sur les contraintes liées aux mots de passe, copiez tout le code JavaScript ci-dessous et collez-le dans votre propre fichier js/main.js.

(Le CSS est déjà en place à partir de l'étape 2. Voyons à quoi sert le bouton d'activation du mot de passe. stylisés et positionnés.)

  • Une icône fonctionnerait-elle mieux que du texte 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 ? Si ce n'est pas le cas, que changeriez-vous ?

Votre formulaire doit se présenter comme suit:

Aller plus loin

Cet atelier de programmation ne traite pas de 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 ! Ajouter un mot de passe dans votre formulaire.

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

  • Style et branding: assurez-vous qu'ils correspondent au reste de votre site. Lorsque vous saisissez des noms et des adresses et à effectuer un paiement, 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: permettre aux utilisateurs réels de tester et de surveiller les performances et la facilité d'utilisation de la conception de votre formulaire.