📘 Chapitre 3 – Inputs, labels et groupes de champs

1. 🎯 Objectif pédagogique

Être capable de créer des formulaires HTML en utilisant des champs de saisie (input, textarea, select) correctement associés à des label, et regrouper ces champs pour une meilleure lisibilité et accessibilité.

2. 📚 Concepts abordés

  • Balise <form> et attributs (action, method)
  • Balises <label> et association avec for / id
  • Types d’<input> : texte, e-mail, mot de passe, bouton radio, case à cocher
  • Champs multi-lignes : <textarea>
  • Listes déroulantes : <select> et <option>
  • Groupes de champs : <fieldset> et <legend>

3. 🧠 Explication théorique

Un formulaire HTML permet de recueillir des informations auprès de l’utilisateur. La balise <form> encapsule tous les champs et contient deux attributs essentiels :

  • action : l’URL vers laquelle envoyer les données,
  • method : GET ou POST.

Pour l’accessibilité, chaque champ doit être associé à une balise <label> :

<label for="nom">Nom</label>
<input type="text" id="nom" name="nom">

Les groupes de champs peuvent être structurés avec <fieldset> et <legend> :

<fieldset>
  <legend>Informations personnelles</legend>
  <label for="email">E-mail</label>
  <input type="email" id="email" name="email">
</fieldset>

4. 🛠 Tutoriel pratique

Résumé du travail : Créer un formulaire simple (nom, e-mail, genre) avec des labels correctement associés et un bouton d’envoi.

Arborescence du projet :

mon_projet/
└── index.html

Étape 1 : Créer la structure de formulaire

Dans <body>, insérez :

<form action="#" method="post">
  <fieldset>
    <legend>Contact</legend>
  </fieldset>
</form>

Étape 2 : Ajouter des champs avec labels 

<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom" placeholder="Votre nom">

<label for="email">E-mail :</label>
<input type="email" id="email" name="email" placeholder="exemple@mail.com">

Étape 3 : Ajouter des boutons radio et un bouton d’envoi 

<p>Genre :</p>
<label>
  <input type="radio" name="genre" value="homme"> Homme
</label>
<label>
  <input type="radio" name="genre" value="femme"> Femme
</label>

<button type="submit">Envoyer</button>

5. 🧾 Résumé et points-clés

  • Chaque champ doit être relié à un label pour l’accessibilité.
  • Les input utilisent des types variés (text, email, radio, etc.).
  • <fieldset> et <legend> améliorent la structure et la lisibilité.