Utiliser les fonctionnalités de navigateur multiplates-formes pour créer un formulaire de connexion

Sam Dutton

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

1. Utiliser un code HTML pertinent

Utilisez les éléments créés pour la tâche:

  • <form>
  • <section>
  • <label>
  • <button>

Comme vous le verrez, ces éléments activent les fonctionnalités intégrées du navigateur, améliorent l'accessibilité et ajoutent du sens à votre balisage.

  1. Cliquez sur "Remixer pour modifier" pour rendre le projet modifiable.

  2. Ajoutez le code suivant à l'élément <body>:

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>
    <label>Email</label>
    <input>
  </section>
  <section>
    <label>Password</label>
    <input>
  </section>
  <button>Sign in</button>
</form>

    Voici à quoi doit ressembler votre fichier index.html à ce stade:

  3. Cliquez sur Afficher l'application pour prévisualiser votre formulaire de connexion. Le code HTML que vous avez ajouté est valide et correct, mais le style du navigateur par défaut le rend laid et difficile à utiliser, en particulier sur les appareils mobiles.

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

2. Concevoir pour les doigts et les pouces

Ajustez la marge intérieure, les marges et les tailles de police pour vous assurer que vos entrées fonctionnent correctement sur mobile.

  1. Copiez le code CSS suivant et collez-le dans votre fichier style.css:

  2. Cliquez sur Afficher l'application pour voir votre formulaire de connexion au nouveau style.

  3. Cliquez sur Afficher la source pour revenir à votre fichier style.css.

Cela fait beaucoup de code ! Les principales modifications à prendre en compte concernent les tailles:

  • padding et margin sont ajoutés aux entrées.
  • font-size est différent pour mobile et ordinateur.

Le sélecteur :invalid permet d'indiquer quand une valeur d'entrée n'est pas valide. Cela ne fonctionne pas encore.

La mise en page CSS est mobile first:

  • Le CSS par défaut est destiné aux fenêtres d'affichage de moins de 450 pixels de large.
  • La section de requêtes multimédias définit des forçages pour les fenêtres d'affichage d'au moins 450 pixels de large.

Lorsque vous créez votre propre formulaire de cette manière, il est très important à ce stade du processus de tester votre code sur des appareils réels sur ordinateur et mobile:

  • Le libellé et le texte de saisie sont-ils lisibles, en particulier pour les personnes malvoyantes ?
  • Les entrées et le bouton Se connecter sont-ils suffisamment grands pour être utilisés comme cibles tactiles pour les pouces ?

3. Ajouter des attributs d'entrée pour activer les fonctionnalités du navigateur intégrées

Autorisez le navigateur à stocker et à saisir automatiquement les valeurs de saisie, et à accéder aux fonctionnalités de gestion des mots de passe intégrées.

  1. Ajoutez des attributs au code HTML de votre formulaire pour qu'il se présente comme suit:

    <form action="#" method="post">
  <h1>Sign in</h1>
  <section>        
    <label for="email">Email</label>
    <input id="email" name="email" type="email" autocomplete="username" required autofocus>
  </section>
  <section>        
    <label for="password">Password</label>
    <input id="password" name="password" type="password" autocomplete="current-password" required>
  </section>
  <button id="sign-in">Sign in</button>
</form>

  2. Affichez à nouveau votre application, puis cliquez sur Envoyer par e-mail.

    Notez que le focus passe à la zone de saisie de l'adresse e-mail. En effet, l'étiquette est associée à l'entrée via l'attribut for="email". Les lecteurs d'écran énoncent également le texte du libellé lorsque le libellé ou la saisie associée au libellé est sélectionnée.

  3. Mise au point du champ de saisie de l'adresse e-mail sur un appareil mobile.

    Notez que le clavier est optimisé pour saisir une adresse e-mail. Par exemple, les caractères @ et . peuvent s'afficher sur le clavier principal, et le système d'exploitation peut afficher les e-mails stockés au-dessus du clavier. Tout cela se produit parce que l'attribut type="email" est appliqué à un élément <input>.

    Clavier de messagerie par défaut sur iOS.

  4. Saisissez du texte dans le champ de saisie du mot de passe.

    Le texte est masqué par défaut, car l'attribut type="password" a été appliqué à l'élément.

  • Les attributs autocomplete, name, id et type aident les navigateurs à comprendre le rôle des entrées afin de stocker des données pouvant être utilisées ultérieurement pour le remplissage automatique.
  1. Mettre en surbrillance le champ de saisie d'un e-mail sur un ordinateur et saisir du texte Vous pouvez voir l'URL de votre application lorsque vous cliquez sur Plein écran Icône Plein écran. Si vous avez stocké des adresses e-mail dans votre navigateur, une boîte de dialogue s'affiche probablement pour vous permettre de les sélectionner. En effet, l'attribut autocomplete="username" s'applique à la saisie d'adresse e-mail.
  • autocomplete="username" et autocomplete="current-password" aident les navigateurs à utiliser les valeurs stockées pour renseigner automatiquement les entrées.

Les différents navigateurs utilisent différentes techniques pour déterminer le rôle des entrées de formulaire et fournir la saisie semi-automatique pour différents sites Web.

Ajoutez et supprimez des attributs pour essayer par vous-même.

Il est extrêmement important de tester le comportement sur les différentes plates-formes. Vous devez saisir des valeurs et envoyer le formulaire dans différents navigateurs sur différents appareils. BrowserStack, qui est sans frais pour les projets Open Source, vous permet de tester facilement sur un large éventail de plates-formes. Essayer

Voici à quoi doit ressembler votre fichier index.html à ce stade:

4. Ajouter une interface utilisateur pour activer/désactiver l'affichage du mot de passe

Les experts en usabilité recommandent vivement d'ajouter une icône ou un bouton permettant aux utilisateurs de voir le texte qu'ils saisissent dans le champ Mot de passe. Il n'existe aucun moyen intégré de le faire. Vous devez donc l'implémenter vous-même avec JavaScript.

Le code permettant d'ajouter cette fonctionnalité est simple. Cet exemple utilise du texte, et non une icône.

Mettez à jour les fichiers index.html, style.css et script.js comme suit.

  1. Ajoutez un bouton d'activation/de désactivation à la section du mot de passe dans le fichier index.html:

    <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="current-password" required>
</section>

  2. Ajoutez le code CSS suivant en bas du fichier style.css:

    button#toggle-password {
  background: none;
  border: none;
  cursor: pointer;
  font-weight: 300;
  padding: 0;
  position: absolute;
  top: -4px;
  right: -2px;
}

    Le bouton Afficher le mot de passe s'affiche alors en texte brut en haut à droite de la section du mot de passe.

  3. Ajoutez le code JavaScript suivant au fichier script.js pour activer/désactiver l'affichage du mot de passe et définir le aria-label approprié:

    const passwordInput = document.getElementById('password');
const togglePasswordButton = document.getElementById('toggle-password');

togglePasswordButton.addEventListener('click', togglePassword);

function togglePassword() {
  if (passwordInput.type === 'password') {
    passwordInput.type = 'text';
    togglePasswordButton.textContent = 'Hide password';
    togglePasswordButton.setAttribute('aria-label',
      'Hide password.');
  } else {
    passwordInput.type = 'password';
    togglePasswordButton.textContent = 'Show password';
    togglePasswordButton.setAttribute('aria-label',
      'Show password as plain text. ' +
      'Warning: this will display your password on the screen.');
  }
}

  4. Essayez la logique d'affichage du mot de passe maintenant.

    1. Affichez votre application.

    2. Saisissez du texte dans le champ du mot de passe.

    3. Cliquez sur Afficher le mot de passe.

  5. Répétez la quatrième étape sur plusieurs navigateurs et sur différents systèmes d'exploitation.

Réfléchissez à la conception UX: les utilisateurs remarqueront-ils Afficher le mot de passe et le comprendront-ils ? Existe-t-il une meilleure façon de proposer cette fonctionnalité ? C'est le moment idéal pour essayer les tests d'utilisabilité à moindre coût avec un petit groupe d'amis ou de collègues.

Pour comprendre comment cette fonctionnalité fonctionne pour les lecteurs d'écran, installez l'extension ChromeVox classique et parcourez le formulaire. Les valeurs aria-label fonctionnent-elles comme prévu ?

Certains sites Web, comme Gmail, utilisent des icônes, et non du texte, pour activer ou désactiver l'affichage du mot de passe. Une fois cet atelier de programmation terminé, implémentez-le avec des images SVG. Material Design propose des icônes de haute qualité que vous pouvez télécharger sans frais.

Voici à quoi doit ressembler votre code à ce stade:

5. Ajouter une validation de formulaire

Vous pouvez aider les utilisateurs à saisir correctement leurs données en leur permettant de les valider avant d'envoyer le formulaire et en leur montrant ce qu'ils doivent modifier.

Les éléments et attributs de formulaire HTML disposent de fonctionnalités intégrées pour la validation de base, mais vous devez également utiliser JavaScript pour effectuer une validation plus robuste lorsque les utilisateurs saisissent des données et tentent d'envoyer le formulaire.

Cette étape utilise l'API Constraint Validation (qui est largement compatible) pour ajouter une validation personnalisée avec une UI de navigateur intégrée qui définit le focus et affiche des invites.

Indiquez aux utilisateurs les contraintes concernant les mots de passe et toute autre entrée. Ne les obligez pas à deviner !

  1. Mettez à jour la section du mot de passe du fichier index.html:

    <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="current-password" aria-describedby="password-constraints" required>
  <div id="password-constraints">At least eight characters, with at least one lowercase and one uppercase letter.</div>
</section>

Deux nouvelles fonctionnalités sont donc disponibles:

  • Informations sur les contraintes de mot de passe
  • Un attribut aria-describedby pour la saisie du mot de passe (les lecteurs d'écran lisent le texte de l'étiquette, le type de saisie (mot de passe), puis la description.)

  1. Ajoutez le code CSS suivant en bas du fichier style.css:

    div#password-constraints {
  margin: 5px 0 0 0;
  font-size: 16px;
}

  2. Ajoutez le code JavaScript suivant au fichier script.js:

    passwordInput.addEventListener('input', resetCustomValidity); 
function resetCustomValidity() {
  passwordInput.setCustomValidity('');
}

// A production site would use more stringent password testing. 
function validatePassword() {
  let message= '';
  if (!/.{8,}/.test(passwordInput.value)) {
    message = 'At least eight characters. ';
  }
  if (!/.*[A-Z].*/.test(passwordInput.value)) {
    message += 'At least one uppercase letter. ';
  }
  if (!/.*[a-z].*/.test(passwordInput.value)) {
    message += 'At least one lowercase letter.';
  }
  passwordInput.setCustomValidity(message);
}

const form = document.querySelector('form');
const signinButton = document.querySelector('button#sign-in');

form.addEventListener('submit', handleFormSubmission);                       

function handleFormSubmission(event) {
  event.preventDefault();
  validatePassword();
  form.reportValidity();
  if (form.checkValidity() === false) {
  } else {
    // On a production site do form submission.
    alert('Logging in!')
    signinButton.disabled = 'true';
  }
}

  3. Essayer

    Tous les navigateurs récents disposent de fonctionnalités intégrées pour la validation des formulaires et sont compatibles avec la validation JavaScript.

    1. Saisissez une adresse e-mail non valide, puis cliquez sur Connexion. Le navigateur affiche un avertissement : aucun code JavaScript n'est requis.

    2. Saisissez une adresse e-mail valide, mais cliquez sur Se connecter sans saisir de mot de passe. Le navigateur vous avertit que vous avez manqué une valeur obligatoire et met le focus sur le champ de saisie du mot de passe.

    3. Saisissez un mot de passe non valide, puis cliquez sur Se connecter. Vous voyez maintenant différents messages en fonction du problème.

  4. Essayez différentes méthodes pour aider les utilisateurs à saisir des adresses e-mail et des mots de passe. Meilleurs champs de formulaire de mot de passe propose des suggestions judicieuses.

    Voici à quoi doit ressembler votre code à ce stade:

Aller plus loin

Elles ne sont pas présentées dans cet atelier de programmation, mais vous avez tout de même besoin de ces quatre fonctionnalités essentielles du formulaire de connexion:

  • Ajoutez un bouton Mot de passe oublié ? qui permet aux utilisateurs de réinitialiser facilement leur mot de passe.

  • Ajoutez un lien vers vos conditions d'utilisation et vos règles de confidentialité afin que vos utilisateurs sachent comment vous protégez leurs données.

  • Tenez compte du style et du branding, et assurez-vous que ces fonctionnalités supplémentaires sont cohérentes avec le reste de votre site Web.

  • Ajoutez Analytics et RUM pour tester et surveiller les performances et l'usabilité de votre conception de formulaire.