Cette page a été traduite par l'API Cloud Translation.

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

Sam Dutton

Dans cet atelier de programmation, vous allez apprendre à créer un formulaire de connexion sécurisé, accessible et facile à utiliser.

1. Utiliser un code HTML pertinent

Utilisez ces éléments conçus pour le job :

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

Comme vous le verrez, ces éléments permettent d'activer des fonctionnalités de navigateur intégrées, d'améliorer l'accessibilité et d'ajouter du sens à votre balisage.

Cliquez sur "Remix to edit" (Remixer pour modifier) pour rendre le projet modifiable.

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 :

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 affreux et difficile à utiliser, en particulier sur les appareils mobiles.
Cliquez sur Afficher la source pour revenir à votre code source.

2. Conception pour les doigts et les pouces

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

Copiez le code CSS suivant et collez-le dans votre fichier style.css :
Cliquez sur Afficher l'application pour afficher votre formulaire de connexion nouvellement stylisé.
Cliquez sur Afficher la source pour revenir à votre fichier style.css.

Cela fait beaucoup de code ! Les principales modifications à connaître concernent les 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 est utilisé pour indiquer quand une entrée a une valeur non valide. Cette fonctionnalité n'est pas encore disponible.

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 des requêtes média définit des remplacements 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 (ordinateur et mobile) :

Le texte du libellé et de la saisie est-il lisible, en particulier pour les personnes malvoyantes ?
Les champs de saisie et le bouton Se connecter sont-ils suffisamment grands pour servir de zones tactiles pour les pouces ?

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

Permet au navigateur de stocker et de saisir automatiquement les valeurs d'entrée, et donne accès aux fonctionnalités intégrées de gestion des mots de passe.

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>

Affichez à nouveau votre application, puis cliquez sur E-mail.

Notez comment la sélection se déplace vers le champ de saisie de l'adresse e-mail. En effet, le libellé est associé à 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 sont sélectionnés.
Faites en sorte que le champ de saisie de l'adresse e-mail soit sélectionné 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>.
Saisissez du texte dans le champ de 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.

Sur un ordinateur, sélectionnez le champ de saisie de l'adresse e-mail et saisissez du texte. Vous pouvez voir l'URL de votre application lorsque vous cliquez sur 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. Cela se produit, car l'attribut autocomplete="username" est appliqué à l'entrée d'adresse e-mail.

autocomplete="username" et autocomplete="current-password" aident les navigateurs à utiliser les valeurs stockées pour remplir automatiquement les champs de saisie.

Remarque : Pour les entrées d'e-mail, utilisez autocomplete="username", car username est reconnu par les gestionnaires de mots de passe dans les navigateurs modernes, même si vous devez utiliser type="email". Vous pouvez également utiliser id="email" et name="email".

Différents navigateurs utilisent différentes techniques pour déterminer le rôle des entrées de formulaire et fournir le remplissage 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 sur différents appareils. Il est facile de tester sur différentes plates-formes avec BrowserStack, qui est sans frais pour les projets Open Source. Essayez !

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 facilité d'utilisation 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 aucune méthode intégrée pour ce 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.

Ajoutez un bouton à 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>

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 ressemble alors à du texte brut et s'affiche en haut à droite de la section du mot de passe.

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.');
  }
}

Essayez maintenant la logique d'affichage du mot 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.
Répétez la quatrième étape sur plusieurs navigateurs et systèmes d'exploitation.

Pensez à la conception UX : les utilisateurs remarqueront-ils l'option Afficher le mot de passe et la comprendront-ils ? Existe-t-il un meilleur moyen de fournir cette fonctionnalité ? C'est le moment idéal pour essayer le test d'utilisabilité à prix réduit avec un petit groupe d'amis ou de collègues.

Pour comprendre comment cette fonctionnalité fonctionne avec 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 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 :

5. Ajouter la 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 indiquant 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 lorsqu'ils tentent d'envoyer le formulaire.

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

Indiquez aux utilisateurs les contraintes concernant les mots de passe et les autres entrées. Ne les laissez pas deviner !

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
Attribut aria-describedby pour la saisie du mot de passe (les lecteurs d'écran lisent le texte du libellé, le type de saisie (mot de passe), puis la description).

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

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

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';
  }
}

Essayez !

Tous les navigateurs récents disposent de fonctionnalités intégrées pour la validation des formulaires et prennent en charge la validation avec JavaScript.
1. Saisissez une adresse e-mail non valide, puis cliquez sur Sign in (Connexion). Le navigateur affiche un avertissement (aucun code JavaScript n'est requis).
2. Saisissez une adresse e-mail valide, puis cliquez sur Se connecter sans saisir de mot de passe. Le navigateur vous avertit qu'une valeur obligatoire est manquante et place le curseur sur le champ de saisie du mot de passe.
3. Saisissez un mot de passe non valide, puis cliquez sur Connexion. Vous voyez maintenant différents messages en fonction du problème.
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 vous proposent des suggestions astucieuses.

Voici à quoi doit ressembler votre code :

Aller plus loin

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

Ajoutez Mot de passe oublié ?, un bouton qui permet aux utilisateurs de réinitialiser facilement leur mot de passe.
Fournissez un lien vers vos conditions d'utilisation et vos règles de confidentialité pour que vos utilisateurs sachent comment vous protégez leurs données.
Tenez compte du style et de 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 l'usabilité de la conception de votre formulaire.

Utiliser les fonctionnalités multiplates-formes du navigateur pour créer un formulaire de connexion Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

1. Utiliser un code HTML pertinent

2. Conception pour les doigts et les pouces

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

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

5. Ajouter la validation de formulaire

Aller plus loin

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