Devoir pratique n°12 : formulaire d'inscription et codes postaux de ses villes

Exercice 1 : le formulaire d'inscription (10 pts)

On veut une page index.html avec un formulaire d'inscription à une sortie scolaire :

• un titre de niveau 1 « Inscription » ;
• un formulaire qui contient une zone de texte pour le nom (étiquette « Nom »), une liste déroulante nommée ville avec les villes « Tunis », « Sousse » et « Sfax » (étiquette « Ville ») et un bouton « Envoyer » ;
• un lien vers la feuille de style style.css.

• 1) Écrire le code HTML de la page index.html décrite ci-dessus (3 pts).
• 2) Écrire dans style.css les règles qui écrivent les étiquettes (label) en gras et qui donnent à la liste déroulante (select) un fond vert clair (lightgreen) (2 pts).
• 3) Créer un programme Python et l'enregistrer sous le nom Villes.py (1 pt).
• 4) Compléter ce programme en Python pour qu'il lise n (n ≥ 1, saisie contrôlée) puis n villes, et affiche le code HTML de la liste déroulante nommée ville avec une option par ville, sous la forme de l'exemple (4 pts).

Exemple : pour n = 2 et les villes Tunis et Bizerte, le programme affiche :

<select name="ville">
  <option>Tunis</option>
  <option>Bizerte</option>
</select>

Exercice 2 : le code postal de chaque ville (10 pts)

Dans le formulaire de l'exercice 1, chaque option de la liste ville doit aussi porter le code postal de la ville dans son attribut value, par exemple <option value="3027">Sfax</option>. Un code postal tunisien est formé de 4 chiffres et ne commence pas par 0 : 1000 (Tunis) et 3027 (Sfax) sont valides, 0123 et 12A4 ne le sont pas.

• 1) Créer un programme Python et l'enregistrer sous le nom CodePostal.py (1 pt).
• 2) Écrire la fonction Valide(ch) qui renvoie Vrai si la chaîne ch est un code postal valide, Faux sinon (5 pts).
• 3) Écrire le programme principal en Python qui lit le nom d'une ville puis son code, et affiche l'option HTML de la ville si le code est valide, ou « Code invalide pour » suivi du nom de la ville (4 pts).

Exemple : pour Sfax et 3027, le programme affiche :

<option value="3027">Sfax</option>