Adloun

HTML : structurer le Web (école d'ingénieur) · Chapitre 6 · Exercice de TD

Réparer des étiquettes

Formulaires · niveau 1 (application)

Énoncé

Ce formulaire d'abonnement passe le validateur en configuration standard, mais aucun de ses champs n'a d'étiquette correctement associée.


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Labels à corriger</title>
</head>
<body>
  <form action="/newsletter" method="post">
    <p>
      <label>Prénom</label>
      <input type="text" name="prenom">
    </p>
    <p>
      <label for="mail">Courriel</label>
      <input type="email" id="courriel" name="courriel">
    </p>
    <p>
      <input type="checkbox" name="frequence" value="hebdo"> Lettre hebdomadaire
    </p>
    <p><button type="submit">S'abonner</button></p>
  </form>
</body>
</html>

Avec la règle des étiquettes activée, le validateur répond :


$ html-validate --preset standard --rule input-missing-label:error ex3-labels.html
ex3-labels.html
  11:8  error  <input> element does not have a <label>  input-missing-label
  15:8  error  <input> element does not have a <label>  input-missing-label
  18:8  error  <input> element does not have a <label>  input-missing-label

✖ 3 problems (3 errors, 0 warnings)

Expliquer chacune des trois erreurs et corriger la page.

Corrigé

  • Ligne 11 : l'étiquette « Prénom » n'a pas d'attribut for, et le champ n'a pas d'id : rien ne les relie.
  • Ligne 15 : for="mail" désigne un élément id="mail" qui n'existe pas ; le champ s'appelle courriel.
  • Ligne 18 : le texte « Lettre hebdomadaire » est à côté de la case, mais dans aucun <label>.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Labels corrigés</title>
</head>
<body>
  <form action="/newsletter" method="post">
    <p>
      <label for="prenom">Prénom</label>
      <input type="text" id="prenom" name="prenom">
    </p>
    <p>
      <label for="courriel">Courriel</label>
      <input type="email" id="courriel" name="courriel">
    </p>
    <p>
      <label><input type="checkbox" name="frequence" value="hebdo"> Lettre hebdomadaire</label>
    </p>
    <p><button type="submit">S'abonner</button></p>
  </form>
</body>
</html>

Les trois méthodes d'association sont illustrées : for/id deux fois, inclusion pour la case à cocher (on peut alors cliquer sur le texte pour la cocher).

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →