Les formulaires HTML (exercice complet) 🧢

Contexte

Tu travailles pour une organisation qui gère des événements (soirées, ateliers, tournois). On te demande de réaliser un formulaire d’inscription complet, accessible et bien structuré.

Objectifs

• Utiliser tous les principaux types de champs de formulaire HTML5.
• Appliquer les attributs de validation : required, min, max, step, minlength, maxlength, placeholder.
• Structurer un formulaire avec : fieldset, legend, label, name, id.
• Utiliser des éléments adaptés : select, textarea, datalist, output.

Consignes générales

• Fichier unique : inscription.html

• La page doit contenir :

  • un titre (<h1>)
  • une courte phrase de présentation
  • le formulaire

• Méthode du formulaire : method="post"

• Action : action="#" (on ne gère pas encore le serveur)

• Tous les champs doivent avoir un label lié au champ via for="...".

• Tous les champs doivent avoir un name (important pour l’envoi).

Cahier des charges du formulaire

Bloc Identité

Inclure un fieldset avec legend “Identité”.

Champs demandés :

• Nom : type="text"

  • required, minlength="2", maxlength="40"
  • autocomplete="family-name"

• Prénom : type="text"

  • required, minlength="2", maxlength="40"
  • autocomplete="given-name"

• Pseudo (optionnel) : type="text"

  • maxlength="20"
  • placeholder="ex: QuizMaster42"

Bloc Contact

fieldset “Contact”.

• Email : type="email"

  • required
  • autocomplete="email"

• Site web (optionnel) : type="url"

  • placeholder="https://..."

Bloc Profil

fieldset “Profil”.

• Âge : type="number"

  • required, min="12", max="99"

• Niveau en informatique : type="range"

  • min="0", max="10", step="1"
  • Afficher la valeur choisie dans un output (au minimum via JS, ou sinon à défaut en texte).

• Couleur préférée : type="color"

  • valeur par défaut : #3a86ff

Bloc Disponibilités

fieldset “Disponibilités”.

• Date de participation : type="date"

  • required

• Heure d’arrivée : type="time"

  • required

• Créneau exact (date + heure) : type="datetime-local"

  • required

Bloc Choix de l’événement

fieldset “Événement”.

• Type d’événement : select (obligatoire) Options (au minimum) :

  • Soirée quiz
  • Atelier programmation
  • Tournoi gaming
  • Conférence Ajouter une option vide au début : “— Choisir —”

• Ville : input + datalist (obligatoire) Proposer au moins 6 villes belges (Bruxelles, Namur, Liège, Charleroi, Mons, Louvain-la-Neuve…).

Bloc Préférences

fieldset “Préférences”.

• Newsletters : checkbox (oui/non)

  • Valeur envoyée si cochée : yes

• Régime alimentaire : radio (1 choix obligatoire)

  • Omnivore
  • Végétarien
  • Vegan
  • Sans gluten

Bloc Message

fieldset “Message”.

• Commentaires : textarea

  • rows="5"
  • maxlength="300"
  • placeholder="Infos utiles (besoins, matériel, contraintes, etc.)"

Bloc Sécurité / confirmation

fieldset “Validation”.

• Mot de passe : type="password"

  • required
  • minlength="8"

• Pièce jointe (optionnel) : type="file"

  • accepter uniquement : .pdf, .png, .jpg via accept

• J’accepte les conditions : type="checkbox"

  • required

Boutons

En bas du formulaire :

• Bouton Envoyer : type="submit"
• Bouton Réinitialiser : type="reset"

Consignes supplémentaires

Le champ Commentaires doit avoir un id = commentaires.

Le label de la case à choser 'J’accepte les conditions' doit avoir un id = conditions.

Ajouter des styles

Change la police de caractères du body.

Le formulaire doit avoir une largeur max de 1050px et des marges automatiques (auto).

Change la couleur de fond de tous les input --> lightyellow.

Les légendes des fieldsets doivent s'afficher en gras.

La légende de la case à cacher "J’accepte les conditions" doit s'afficher en rouge.

Le cchamps "Commentaires" doit prendre toute la largeur disponible.

Exemple de résultat