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

Un sondage

Formulaires · niveau 1 (application)

Énoncé

Écrire un sondage de deux questions : « Combien de livres lisez-vous par mois ? » (une seule réponse parmi « Aucun », « Un ou deux », « Trois ou plus », obligatoire) et « Quels formats lisez-vous ? » (plusieurs réponses parmi « Papier », « Numérique », « Livre audio »). Pourquoi les trois boutons radio doivent-ils avoir le même name, et les cases à cocher aussi ? Que se passe-t-il si l'on donne un name différent à chaque bouton radio ?

Corrigé


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Sondage</title>
</head>
<body>
  <form action="/sondage" method="post">
    <fieldset>
      <legend>Combien de livres lisez-vous par mois ?</legend>
      <label><input type="radio" name="rythme" value="0" required> Aucun</label>
      <label><input type="radio" name="rythme" value="1-2"> Un ou deux</label>
      <label><input type="radio" name="rythme" value="3+"> Trois ou plus</label>
    </fieldset>
    <fieldset>
      <legend>Quels formats lisez-vous ?</legend>
      <label><input type="checkbox" name="format" value="papier"> Papier</label>
      <label><input type="checkbox" name="format" value="numerique"> Numérique</label>
      <label><input type="checkbox" name="format" value="audio"> Livre audio</label>
    </fieldset>
    <p><button type="submit">Répondre</button></p>
  </form>
</body>
</html>

Les boutons radio partagent leur name parce que c'est le nom qui forme le groupe : le navigateur ne laisse choisir qu'un bouton par nom. Avec trois noms différents, ce seraient trois groupes d'un bouton chacun : on pourrait tout cocher et rien décocher. Il suffit de mettre required sur un des boutons pour que le groupe entier soit obligatoire. Les cases à cocher partagent le leur pour que le serveur reçoive la liste des formats sous un seul nom : format=papier&format=audio.