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

Le panier

Formulaires · niveau 3 (difficile)

Énoncé

Le panier affiche un tableau des livres choisis (titre, prix) et, pour chacun, un champ « quantité » (de 0 à 5). Un champ caché transmet le numéro du client, E1-3-042. Écrire la page. Comment nommer les champs de quantité pour que le serveur sache à quel livre chacun se rapporte ? Comment donner une étiquette à un champ placé dans une cellule de tableau ? Que reçoit le serveur si le client garde 1 exemplaire de « Programmation Java » et passe « Le Petit Prince » à 3 ?

Corrigé

On donne à chaque champ de quantité un nom qui identifie le livre (qte-java, qte-prince). Un champ placé dans une cellule n'a pas la place d'un <label> visible : on lui donne un nom accessible avec l'attribut aria-label (chapitre 8).


<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Panier</title>
</head>
<body>
  <h1>Votre panier</h1>
  <form action="/panier" method="post">
    <input type="hidden" name="client" value="E1-3-042">
    <table>
      <caption>Livres dans le panier</caption>
      <thead>
        <tr>
          <th scope="col">Titre</th>
          <th scope="col">Prix</th>
          <th scope="col">Quantité</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Programmation Java</th>
          <td>32,00 €</td>
          <td><input type="number" name="qte-java" min="0" max="5" value="1" aria-label="Quantité de Programmation Java"></td>
        </tr>
        <tr>
          <th scope="row">Le Petit Prince</th>
          <td>8,50 €</td>
          <td><input type="number" name="qte-prince" min="0" max="5" value="2" aria-label="Quantité du Petit Prince"></td>
        </tr>
      </tbody>
    </table>
    <p><button type="submit">Mettre à jour</button></p>
  </form>
</body>
</html>

Le serveur reçoit, dans le corps de la requête :


client=E1-3-042&qte-java=1&qte-prince=3

Et comme le champ caché peut être modifié par l'utilisateur, le serveur doit vérifier que ce client existe et que c'est bien lui qui est connecté.