TP 4 — Les formulaires

Objectif : créer un formulaire de prise de rendez-vous complet (date et heure), le mettre en forme avec CSS et comprendre GET vs POST.

4.1 Contexte

On veut réaliser le formulaire de prise de rendez-vous d'un cabinet médical. Les patients choisissent une date et une heure, indiquent le médecin/specialité souhaité·e et peuvent préciser un motif ; la prise de rendez-vous nécessite de s'identifier (nom, prénom, e-mail, téléphone).

• Créez le dossier code/tp4 et dedans un dossier css.

4.2 La structure du formulaire

• Écrivez la page formulaire.html avec :
  • Un titre « Prise de rendez-vous — Cabinet médical ».
  • Un texte d'introduction présentant le cabinet, les horaires de consultation et les modalités de prise de rendez-vous.
  • Un formulaire de rendez-vous avec la méthode post. L'attribut action peut pointer vers n'importe quel fichier (reserver.php, ou simplement #) : il n'y a pas de serveur, on n'observera que la requête envoyée (voir 4.7).

Vos trois parties (informations personnelles, rendez-vous, soumission) seront placées à l'intérieur de ce <form>.

4.3 Partie 1 : informations personnelles

Le formulaire utilise <fieldset> et <legend> pour regrouper et titrer les parties.

• Ajoutez la première partie. Créez un <fieldset> avec pour légende « Informations personnelles », contenant les champs suivants (chaque champ dans un <div>, chaque <label> associé à son champ via for/id) :
  • un titre (<select>) : « Mr » (pré-coché par défaut), « Mme », « Mlle » ;
  • Nom, Prénom : champs texte ;
  • E-mail : champ de type email ;
  • Téléphone : champ de type tel ;
  • Date de naissance : champ de type date.

* : champs obligatoires. L'attribut required force la saisie ; l'option de titre « Mr » est pré-cochée (selected).

4.4 Partie 2 : informations sur le rendez-vous

• Ajoutez la seconde partie. Créez un second <fieldset> avec pour légende « Informations sur le rendez-vous », contenant :
  • la date du rendez-vous : champ de type date (obligatoire) ;
  • l'heure du rendez-vous : champ de type time (obligatoire) ;
  • le médecin / spécialité (<select>) : généraliste, pédiatre, dentiste, cardiologue ;
  • le motif de consultation en cases à cocher (checkbox, même name motif) : consultation, renouvellement d'ordonnance, vaccin, autre.

4.5 Partie 3 : soumission

• Ajoutez la partie soumission, placée dans un <div> de classe boutons, avec deux boutons : « Confirmer le rendez-vous » (type submit) et « Annuler » (type reset).

4.6 La mise en forme CSS

• Écrivez la feuille de style css/formulaire.css et reliez-la à formulaire.html pour :
  • mettre en forme le titre, le texte d'introduction et le formulaire (choisissez couleurs, polices, largeurs, bordures et border-radius) ;
  • aligner les champs : libellés à droite (largeur fixe), saisies à droite de même largeur (input[type="text"], email, tel, date, time, select) ;
  • mettre en valeur la légende (legend) : couleur, gras, taille légèrement augmentée ;
  • afficher les parties 1 et 2 côte à côte (flex) ;
  • placer la partie 3 en dessous, centrée.
• Adaptez le HTML pour utiliser form > .colonnes autour des deux premiers fieldset.
• Vérifiez : libellés alignés à droite, saisies alignées, légendes en couleur, parties côte à côte, boutons centrés.

À retenir : <fieldset> + <legend> regroupent et titrent les parties d'un formulaire. Un même name pour des radio les rend exclusifs ; checked/selected pré-cochent ; required rend un champ obligatoire. label[for] est lié au champ [id].

4.7 GET vs POST : observer la requête avec l'inspecteur

Aucun serveur PHP n'est nécessaire : les Dev Tools du navigateur permettent de voir la requête envoyée et ses données, même si le formulaire n'est pas réellement traité. Avec action="#", la requête est simplement renvoyée vers la page courante (qui se recharge) sans traitement : le # sert uniquement à cela — c'est idéal pour observer la requête sans qu'aucune donnée soit enregistrée.

⚠️ Condition préalable : servir la page via HTTP

Pour voir une requête POST, la page ne doit pas être ouverte en double-clic (protocole file://) : dans ce cas le navigateur ignore l'envoi POST (rien n'apparaît dans l'onglet Réseau). Pour GET, il se contente de réécrire l'URL (visible dans la barre d'adresse). Il faut donc servir la page avec un petit serveur HTTP local.

Le plus simple, sans ligne de commande, avec Visual Studio Code :

• Installez l'extension Live Server (marché VS Code).
• Ouvrez votre dossier code/tp4 dans VS Code, puis cliquez sur Go Live (en bas à droite).
• Le navigateur s'ouvre via http://localhost:5500/... : votre page est alors servie en HTTP.

(Alternative en ligne de commande en utilisant python : python3 -m http.server 8000 dans le dossier, puis http://localhost:8000/formulaire.html.)

Observer la requête

• Ouvrez les Dev Tools (F12) puis l'onglet Réseau (Network). S'il le faut, gardez l'historique des requêtes coché (Preserve log) et décochez Disable cache.
• Avec method="POST", validez le formulaire. Dans l'onglet Réseau, repérez la requête envoyée : sa méthode est POST. Ouvrez-la (onglet Payload ou En-têtes) : les données du formulaire (Form Data) sont dans le corps de la requête, pas dans l'URL.
• Changez la méthode en method="GET" puis revalidez. La nouvelle requête est en GET : les données figurent cette fois dans l'URL, après ? (par exemple ...?nom=Dupont&date=2026-09-15&heure=09:30&medecin=generaliste), visibles dans la barre d'adresse comme dans les en-têtes.
• Notez la différence : GET envoie les données dans l'URL (visible, mémorisable, limité en taille), POST les envoie dans le corps de la requête (masqué, illimité).

À retenir : la méthode post envoie les données dans le corps de la requête ; la méthode get les place dans l'URL. Pour une prise de rendez-vous, on utilise POST. Une requête POST n'est envoyée que si la page est servie via HTTP (pas en file://). L'onglet Réseau des Dev Tools permet d'inspecter la requête envoyée et ses données.

Vérification finale

1. Validateur W3C : validez toutes vos pages (index.html, perso.html, interet.html, exo2.html, page.html, formulaire.html) avec le validateur du W3C. Corrigez toutes les erreurs et avertissements.
2. Inspecteur (F12) :
   • Examinez le HTML et les règles CSS appliquées à un élément.
   • Modifiez en direct une propriété CSS sans toucher au fichier.
   • Repérez les règles héritées et leur origine.
3. Navigation : vérifiez que tous les liens fonctionnent (relatifs, absolus, internes #id, zones réactives).
4. Accessibilité : toutes les images ont un alt, les label sont associés aux champs (for/id), un seul h1 par page, navigation possible au clavier.
5. Organisation : l'arborescence de Web/code est propre et chaque répertoire contient un index.html comme point d'entrée.

Exercice final (pour tout rassembler)

Construisez une page galerie.html qui rassemble tout ce que vous avez appris :

• un <header> avec <nav> (menu horizontal, survol stylé) et des liens vers l'accueil ;
• une galerie de 4 à 6 images (<figure> + <figcaption>) redimensionnées automatiquement sur mobile (via @media) ;
• chaque image est un lien interne vers un paragraphe de description (ancres id) ;
• un tableau « Fiche technique » avec <caption>, <thead>, <tfoot>, colspan et rowspan, bordures collapse, lignes paires stylées et survol ;
• une image avec une zone réactive (au moins deux formes : rect et circle) ;
• le tout stylé par un fichier CSS externe, sans aucune balise <style> ni attribut style dans le HTML ;
• un footer avec signature (copyright, nom, prénom, mail, date de mise à jour).

Mettez le tout sur votre page Github.