Se connecter — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 6)

Se connecter

Formulaires · niveau 2

Énoncé

Écrire le formulaire de connexion de l'espace client : un courriel et un mot de passe d'au moins 8 caractères, tous deux obligatoires. Quelles valeurs d'autocomplete permettent au gestionnaire de mots de passe du navigateur de remplir le formulaire ? Quelle méthode d'envoi ?

Corrigé


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Connexion</title>
</head>
<body>
  <h1>Mon compte</h1>
  <form action="/connexion" method="post">
    <p>
      <label for="identifiant">Courriel</label>
      <input type="email" id="identifiant" name="identifiant" autocomplete="username" required>
    </p>
    <p>
      <label for="mdp">Mot de passe</label>
      <input type="password" id="mdp" name="mdp" autocomplete="current-password" required minlength="8">
    </p>
    <p><button type="submit">Se connecter</button></p>
  </form>
</body>
</html>

username désigne l'identifiant du compte (ici, le courriel) et current-password le mot de passe actuel (pour un formulaire de création de compte, on écrirait new-password, ce qui permet au gestionnaire d'en proposer un). Méthode POST : un mot de passe ne va jamais dans une adresse.