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

Utilisez ces éléments conçus pour la tâche:

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

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

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

  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 de navigateur par défaut le rend horrible et difficile à utiliser, en particulier sur les appareils mobiles.

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

2. Prenez soin de vous avec les doigts et les pouces

Ajustez les marges intérieures, les marges et la taille de la police pour vous assurer que vos entrées fonctionnent correctement sur les mobiles.

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

  2. Cliquez sur Afficher l'application pour afficher le nouveau style de votre formulaire de connexion.

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

Cela fait beaucoup de code ! Les principaux points à connaître sont les modifications apportées aux tailles:

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

Le sélecteur :invalid permet d'indiquer lorsqu'une entrée comporte une valeur non valide. Cela ne fonctionne pas encore.

La mise en page CSS est optimisée pour les mobiles:

  • Le code CSS par défaut s'applique aux fenêtres d'affichage de moins de 450 pixels de large.
  • La section des requêtes média 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 comme celui-ci, il est très important à ce stade du processus de tester votre code sur de vrais appareils, sur ordinateur de bureau et mobile:

  • L'étiquette et le texte d'entrée sont-ils lisibles, en particulier pour les personnes malvoyantes ?
  • Les entrées et le bouton Connexion sont-ils suffisamment grands pour servir de zones cibles tactiles pour les pouces ?

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

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

  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 Email (E-mail).

    Notez que le curseur est placé sur l'entrée de l'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 l'entrée associée au libellé est sélectionné.

  3. Concentrez-vous sur la saisie de l'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 est dû au fait que l'attribut type="email" est appliqué à un élément <input>.

    Clavier des e-mails par défaut sur iOS.

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

    Par défaut, le texte est masqué, 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 la saisie automatique.
  1. Sélectionnez la saisie de l'e-mail sur un ordinateur de bureau et saisissez du texte. Vous pouvez voir l'URL de votre application en cliquant sur Plein écran Icône Plein écran. Si vous avez enregistré des adresses e-mail dans votre navigateur, une boîte de dialogue s'affiche probablement pour vous permettre de les sélectionner. Cela est dû au fait que l'attribut autocomplete="username" est appliqué à l'entrée de l'e-mail.
  • autocomplete="username" et autocomplete="current-password" aident les navigateurs à utiliser les valeurs stockées pour remplir automatiquement les entrées.

Les navigateurs utilisent différentes techniques pour déterminer le rôle des entrées de formulaire et fournir la saisie 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 différentes plates-formes. Vous devez saisir des valeurs et envoyer le formulaire dans différents navigateurs et appareils. Grâce à BrowserStack, qui est sans frais pour les projets Open Source, vous pouvez facilement effectuer des tests sur différentes plates-formes. Essayer

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

4. Ajout d'une UI pour activer/désactiver l'affichage du mot de passe

Les experts en convivialité 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. Cette opération n'est pas intégrée. 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 des mots 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 à la fin 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 ressemble alors à du texte brut et l'affiche dans l'angle supérieur droit 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 maintenant la logique d'affichage des mots de passe.

    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 systèmes d'exploitation différents.

Pensez à la conception de l'expérience utilisateur: les utilisateurs remarqueront-ils l'option Afficher le mot de passe et le comprendront-ils ? Existe-t-il un meilleur moyen de proposer cette fonctionnalité ? C'est le moment d'essayer les tests d'usabilité à prix réduit avec un petit groupe d'amis ou de collègues.

Pour comprendre le fonctionnement de cette fonctionnalité 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, tels que Gmail, utilisent des icônes, et non du texte, pour activer/désactiver l'affichage des mots de passe. Lorsque vous avez terminé cet atelier de programmation, 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 la validation de formulaire

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

Les éléments et les attributs du 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 l'interface utilisateur de navigateur intégrée qui définit le focus et affiche des invites.

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

  1. Mettez à jour la section dédiée aux mots 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" 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 ainsi ajoutées:

  • 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 du libellé, le type d'entrée (mot de passe), puis la description.)

  1. Ajoutez le code CSS suivant à la fin 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 intègrent des fonctionnalités de validation des formulaires et acceptent la validation avec JavaScript.

    1. Saisissez une adresse e-mail non valide, puis cliquez sur Connexion. Le navigateur affiche un avertissement indiquant que JavaScript n'est pas nécessaire.

    2. Saisissez une adresse e-mail valide, puis cliquez sur Connexion sans mot de passe. Le navigateur vous avertit que vous avez manqué une valeur requise et place le curseur sur la saisie du mot de passe.

    3. Saisissez un mot de passe non valide et cliquez sur Connexion. Les messages affichés varient 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. Des champs de formulaire de mot de passe améliorés proposent des suggestions astucieuses.

    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 le bouton Mot de passe oublié afin de permettre aux utilisateurs de réinitialiser facilement leur mot de passe.

  • Ajoutez des liens vers vos conditions d'utilisation et vos règles de confidentialité pour indiquer à vos utilisateurs comment vous protégez leurs données.

  • Pensez au style et à l'image de marque, et assurez-vous que ces caractéristiques supplémentaires correspondent au reste de votre site Web.

  • Ajoutez Analytics et RUM pour pouvoir tester et surveiller les performances et la facilité d'utilisation de la conception de votre formulaire.