TP2 : Formulaires et tableaux en HTML

Cours HTML/CSS 2026 – Durée : 3h30 – Enseignant : Quentin Fait

Objectifs du TP

  • Créer des formulaires HTML fonctionnels

  • Structurer des données avec les balises de tableau

  • Utiliser les attributs des formulaires (name, id, required, placeholder)

  • Associer correctement les labels aux champs de formulaire

Consignes générales

Configuration : Créez un dossier tp2-html sur votre ordinateur et ouvrez-le dans votre éditeur de code.

Organisation : Pour chaque exercice, créez un fichier HTML séparé : exercice1.html, exercice2.html, exercice3.html.

Rappel de la structure de base :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Titre de la page</title>
</head>
<body>
    
</body>
</html>

Exercice 1 : Tableau de planning hebdomadaire

Fichier : exercice1.html

Créez une page web présentant votre emploi du temps hebdomadaire sous forme de tableau.

Structure attendue :

1. En-tête de la page

  • Un titre principal (h1) : « Mon planning hebdomadaire »

  • Un paragraphe introductif (2-3 lignes)

2. Tableau de planning

Créez un tableau structuré avec <thead>, <tbody> et éventuellement <tfoot>.

En-tête du tableau (<thead>)

  • Première colonne : « Horaires »

  • Colonnes suivantes : Lundi, Mardi, Mercredi, Jeudi, Vendredi

Corps du tableau (<tbody>)

  • Au moins 4 créneaux horaires (ex. : 9h-10h, 10h-12h, 14h-16h, 16h-18h)

  • Remplissez les cellules avec vos activités (cours, sport, travail personnel, etc.)

  • Utilisez colspan pour fusionner au moins 2 cellules horizontalement (ex : un cours de 2h ou une pause déjeuner)

  • Utilisez rowspan pour fusionner au moins 2 cellules verticalement (ex : un cours sur 2 créneaux)

  • Laissez certaines cellules vides si vous n’avez pas d’activité

Pied du tableau (<tfoot>) - optionnel

  • Une ligne avec colspan pour afficher un total d’heures ou une note

3. Conseils de présentation

  • Utilisez <th> pour les en-têtes (horaires et jours)

  • Utilisez <td> pour les cellules de données (activités)

Exercice 2 : Formulaire d’inscription à un événement

Fichier : exercice2.html

Créez une page web contenant un formulaire d’inscription à un événement (conférence, atelier, concert, etc.).

Structure attendue :

1. En-tête de la page

  • Un titre principal (h1) : « Inscription à [Nom de votre événement] »

  • Un paragraphe de présentation de l’événement (3-4 lignes)

2. Formulaire d’inscription

Créez un formulaire avec method="POST" et action="inscription.php"

Le formulaire doit contenir les sections suivantes :

Section « Informations personnelles » (avec <fieldset> et <legend>)

  • Nom : champ texte, obligatoire

  • Prénom : champ texte, obligatoire

  • Email : champ email, obligatoire, avec placeholder « exemple@mail.com »

  • Téléphone : champ texte, avec placeholder « 06 12 34 56 78 »

  • Date de naissance : champ date

Section « Détails de participation » (avec <fieldset> et <legend>)

  • Nombre de participants : champ number, obligatoire, min= »1 », max= »10 »

  • Type de billet : liste déroulante (<select>) avec les options :

    • Option par défaut : « – Choisissez un type de billet – » (value vide)

    • « Gratuit » (value= »gratuit »)

    • « Étudiant - 10€ » (value= »etudiant »)

    • « Plein tarif - 25€ » (value= »plein »)

  • Régime alimentaire (si repas prévu) : liste déroulante avec :

    • « Aucune restriction »

    • « Végétarien »

    • « Végétalien »

    • « Sans gluten »

Section « Commentaires »

  • Message / Commentaires : zone de texte (<textarea>) de 5 lignes sur 50 colonnes, avec placeholder « Questions, besoins spécifiques… »

Validation finale

  • Case à cocher obligatoire : « J’accepte les conditions générales de participation »

Boutons

  • Un bouton de soumission avec le texte « Confirmer mon inscription »

3. Notes importantes

  • Tous les champs obligatoires doivent avoir l’attribut required

  • Chaque champ doit avoir un attribut name approprié

  • Chaque champ doit avoir un id unique et être associé à un <label> avec l’attribut for

Livrables attendus

Un dossier tp2-html contenant :

  • exercice1.html

  • exercice2.html

Pensez à valider votre code avec le validateur W3C : https://validator.w3.org/

Critères d’évaluation

  • Structure des tableaux (<table>, <thead>, <tbody>, <tr>, <th>, <td>)

  • Utilisation de colspan et rowspan

  • Utilisation des balises de formulaire (<form>, <input>, <label>, <select>, <textarea>, <button>)

  • Utilisation appropriée des attributs (name, required, placeholder, type)

  • Association des labels avec les champs (attributs for et id)