Rayons groupés — exercice corrigé d'HTML : structurer le Web (école d'ingénieur) (chapitre 6)

Rayons groupés

Formulaires · niveau 1 (application)

Énoncé

Écrire un formulaire de filtre du catalogue (méthode GET) contenant une liste déroulante des rayons, groupés en « Sciences » (Mathématiques, Informatique, Physique) et « Littérature » (Romans, Poésie), avec une première option « Tous les rayons » de valeur vide. Quelle adresse est demandée si l'on choisit « Informatique » ?

Corrigé


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Rayons</title>
</head>
<body>
  <form action="/catalogue" method="get">
    <label for="rayon">Rayon</label>
    <select id="rayon" name="rayon">
      <option value="">Tous les rayons</option>
      <optgroup label="Sciences">
        <option value="maths">Mathématiques</option>
        <option value="info">Informatique</option>
        <option value="physique">Physique</option>
      </optgroup>
      <optgroup label="Littérature">
        <option value="romans">Romans</option>
        <option value="poesie">Poésie</option>
      </optgroup>
    </select>
    <button type="submit">Filtrer</button>
  </form>
</body>
</html>

Avec « Informatique », le navigateur demande /catalogue?rayon=info : c'est la value de l'option qui est envoyée, pas son libellé. « Tous les rayons » envoie rayon= (valeur vide).