Adloun

Un site de petites annonces propose ce formulaire

Exercice d'entraînement · niveau 2 · NSI (première), chapitre 10 — Interagir sur le Web · Formulaires, GET et POST

Énoncé

Un site de petites annonces propose ce formulaire.


<form method="get" action="/recherche">
  <input type="text" name="q">
  <input type="checkbox" name="occasion" value="oui">
  <select name="tri">
    <option value="prix">Prix croissant</option>
    <option value="date" selected>Nouveautes</option>
  </select>
  <button type="submit">Chercher</button>
</form>

L'utilisateur saisit chat noir, coche la case et ne touche pas à la liste.

Corrigé

1. Trois paires, dans l'ordre où les champs apparaissent dans le formulaire :


/recherche?q=chat+noir&occasion=oui&tri=date

La liste déroulante transmet la valeur de l'option selected, soit date — et non le texte affiché « Nouveautes ». C'est l'attribut value qui voyage.

2. La case non cochée disparaît complètement :


/recherche?q=chat+noir&tri=date

Le serveur doit donc tester la présence du paramètre, jamais sa valeur.

3. Parce qu'une URL ne peut pas contenir d'espace : il servirait de séparateur et couperait l'adresse en deux. Le format application/x-www-form-urlencoded le remplace par + ; la notation %20 est équivalente et fréquente. La même règle code tout caractère réservé (&amp;, =, ?) ou hors ASCII, sous la forme d'un pourcentage suivi des octets UTF-8 en hexadécimal.


from urllib.parse import urlencode
print(urlencode({"q": "chat noir", "occasion": "oui", "tri": "date"}))
# q=chat+noir&occasion=oui&tri=date

Piège : écrire tri=Nouveautes. Le texte entre les balises &lt;option&gt; est ce que l'utilisateur lit ; l'attribut value est ce que le serveur reçoit. Les deux sont volontairement séparés, pour qu'on puisse traduire l'un sans casser l'autre.

Les autres exercices de ce chapitre Le cours du chapitre

Un blocage sur cet exercice ? Le tuteur d'Adloun guide par questions, sans donner la réponse.