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 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 ! Voici les principaux points à noter:

  • 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 quand une valeur d'entrée n'est pas 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 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 :

  • Les étiquettes et le texte d'entrée 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 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 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 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. Il est facile d'effectuer des tests sur diverses plates-formes avec BrowserStack, sans frais pour les projets Open Source. 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 "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.

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 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, tels que Gmail, utilisent des icônes, et non du texte, pour afficher les mots 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 la validation du formulaire

Vous pouvez aider les utilisateurs à saisir correctement leurs données en leur permettant de les valider avant l'envoi du formulaire et en leur montrant 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 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 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, 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. Les messages qui s'affichent varient en fonction de la nature 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 pour le 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.