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

Utilisez les éléments conçus pour ce travail:

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

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

  1. Cliquez sur "Remixer" pour apporter des modifications et 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 devrait 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 par défaut du navigateur le rend terrible et difficile à utiliser, en particulier sur les appareils mobiles.

  4. Cliquez sur Afficher la source pour revenir au code source.

2. Une conception adaptée aux doigts et aux pouces

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

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

  2. Cliquez sur Afficher l'application pour accéder à votre formulaire de connexion.

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

Cela fait beaucoup de code ! Voici les principaux points à retenir concernant les modifications apportées aux tailles:

  • padding et margin sont ajoutés aux entrées.
  • font-size est différent pour les mobiles et les ordinateurs.

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 orientée mobile:

  • Le code CSS par défaut est destiné aux fenêtres d'affichage d'une largeur inférieure à 450 pixels.
  • La section "Requête média" permet de définir des forçages pour les fenêtres d'affichage d'une largeur minimale de 450 pixels.

Lorsque vous créez votre propre formulaire comme celui-ci, il est très important à ce stade du processus de tester votre code sur des appareils réels (ordinateur et mobile) :

  • Les étiquettes et le texte d'entrée sont-ils lisibles, en particulier pour les personnes malvoyantes ?
  • Les boutons d'entrée et de connexion sont-ils assez grands pour être utilisés comme des zones cibles tactiles pour les pouces ?

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

Permettez au navigateur de stocker et de saisir automatiquement les valeurs saisies, et donnez accès à des 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 E-mail.

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

  3. Sélectionnez l'adresse e-mail saisie sur un appareil mobile.

    Notez que le clavier est optimisé pour la saisie d'une adresse e-mail. Par exemple, les caractères @ et . peuvent s'afficher sur le clavier principal, tandis que 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 les données qui pourront être utilisées ultérieurement pour la saisie automatique.
  1. Sélectionnez l'adresse e-mail saisie sur un ordinateur de bureau et saisissez du texte. Pour voir l'URL de votre application, cliquez sur Plein écran Icône Plein écran. Si vous avez enregistré des adresses e-mail dans votre navigateur, une boîte de dialogue vous permettant de les sélectionner s'affiche probablement. Cela est dû au fait que l'attribut autocomplete="username" a été appliqué à l'entrée de l'adresse e-mail.
  • autocomplete="username" et autocomplete="current-password" aident les navigateurs à utiliser les valeurs stockées pour remplir automatiquement les entrées.

Les différents navigateurs utilisent différentes techniques pour déterminer le rôle des entrées de formulaire et permettre 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 toutes les plateformes. Vous devez saisir les valeurs et envoyer le formulaire dans différents navigateurs et sur différents appareils. Il est facile d'effectuer des tests sur diverses plates-formes avec BrowserStack, sans frais pour les projets Open Source. Essayer

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

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

Les experts en convivialité recommandent vivement l'ajout d'une icône ou d'un bouton permettant aux utilisateurs de voir le texte qu'ils saisissent dans le champ Mot de passe. Il n'existe aucune méthode intégrée pour 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.

Modifiez 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 aura ainsi l'apparence d'un texte brut et s'affichera dans l'angle supérieur droit de la section relative aux mots 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 du mot de passe.

    1. Affichez votre application.

    2. Saisissez du texte dans le champ "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 ? Existe-t-il un meilleur moyen d'offrir cette fonctionnalité ? C'est le moment idéal pour tester des tests d'utilisabilité à 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 Classic 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 afficher les mots de passe. Lorsque vous aurez terminé cet atelier de programmation, implémentez-le avec des images SVG. Material Design propose des icônes de haute qualité à télécharger sans frais.

Voici à quoi doit ressembler votre code à ce stade:

5. Ajouter la validation du formulaire

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

Les éléments et les attributs des formulaires HTML disposent de fonctionnalités intégrées pour la validation de base, mais vous devez également utiliser JavaScript pour effectuer une validation plus efficace lorsque les utilisateurs saisissent des données et lorsqu'ils 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 du 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 aux autres entrées. Ne les faites 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 ainsi ajoutées:

  • Informations sur les contraintes liées aux mots 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 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 la validation avec 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, puis cliquez sur Sign in (Se connecter) sans saisir de mot de passe. Le navigateur vous avertit que vous avez oublié une valeur obligatoire et place le curseur sur la saisie du mot de passe.

    3. Saisissez un mot de passe non valide, puis cliquez sur Connexion. Les messages qui s'affichent varient en fonction de la nature du problème.

  4. Essayez différentes manières d'aider les utilisateurs à saisir leur adresse e-mail et leur mot de passe. L'amélioration des champs du formulaire de mot de passe offre 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é ? pour permettre aux utilisateurs de réinitialiser facilement leur mot de passe.

  • Ajoutez un lien vers les documents contenant vos conditions d'utilisation et vos règles de confidentialité afin d'indiquer à vos utilisateurs comment vous protégez leurs données.

  • Pensez au style et à la marque, et assurez-vous que ces fonctionnalités 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 vos formulaires.