Module 7 — Les formulaires : l’art de l’aveu | Faites entrer HTML

Arrive toujours le moment où quelqu’un doit parler.
Le formulaire, c’est la salle d’interrogatoire.
Mal conçu, il ment. Bien conçu, il fait avouer.

🎯 Objectifs d’apprentissage

À la fin de ce module, vous serez capable de :

Créer des formulaires HTML accessibles et sémantiques
Comprendre les différents types de champs
Structurer une collecte d’informations propre et fiable
Éviter les pièges classiques qui font fuir les témoins

🧾 Structure d’un formulaire — La salle d’interrogatoire

Tout commence ici :

<form action="/traitement" method="POST">
    <!-- Champs du formulaire -->
</form>

🧠 À retenir

<form> encadre toute la saisie
action : destination des données
method : comment les données sont envoyées

🔄 GET vs POST — Discret ou officiel

📬 GET — Visible

Données dans l’URL
Utilisé pour la recherche
À éviter pour données sensibles

/recherche?mot=html

🔒 POST — Confidentiel

Données dans le corps de la requête
Non visibles dans l’URL
Recommandé pour :
- Connexions
- Inscriptions
- Formulaires sensibles

Un aveu ne se crie pas dans la rue.

🏷️ `action` — Où va l’information ?

<form action="/interrogatoire" method="POST">

URL côté serveur
Peut être relative ou absolue
Sans action, le formulaire ne mène nulle part

✍️ Champs de saisie — Les questions posées

Chaque champ a trois éléments clés :

<label> : la question
<input> : la réponse
name : le nom officiel du champ

🧑 Nom — Champ texte

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

for ↔ id : lien obligatoire
required : champ obligatoire
Lisible pour tous

🧩 Types d’`input` — Adapter la question

<input type="email" name="email">
<input type="password" name="motdepasse">
<input type="number" name="age">
<input type="date" name="date_faits">
<input type="range" name="niveau_confiance">
<input type="file" name="preuve">

Chaque type :

Améliore l’expérience utilisateur
Active une validation automatique
Optimise le clavier sur mobile

📝 `<textarea>` — Déclaration détaillée

<label for="declaration">Déclaration :</label>
<textarea id="declaration" name="declaration" rows="5"></textarea>

Pour les témoignages longs. Quand les détails comptent.

🔽 `<select>` et `<option>` — Choix contrôlés

<label for="statut">Statut du dossier :</label>
<select id="statut" name="statut">
    <option value="">-- Choisir --</option>
    <option value="ouvert">Ouvert</option>
    <option value="clos">Clos</option>
</select>

Limite les erreurs
Guide la réponse
Structure les données

🧠 `<fieldset>` et `<legend>` — Regrouper les faits

<fieldset>
    <legend>Informations personnelles</legend>

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

Regroupement logique
Meilleure accessibilité
Lecture claire pour les lecteurs d’écran

☑️ Cases à cocher — Plusieurs vérités possibles

<fieldset>
    <legend>Infractions constatées</legend>

    <label>
        <input type="checkbox" name="infractions" value="phishing">
        Phishing
    </label>

    <label>
        <input type="checkbox" name="infractions" value="fuite-donnees">
        Fuite de données
    </label>
</fieldset>

🔘 Boutons radio — Une seule version

<fieldset>
    <legend>Niveau de coopération</legend>

    <label>
        <input type="radio" name="cooperation" value="totale">
        Totale
    </label>

    <label>
        <input type="radio" name="cooperation" value="partielle">
        Partielle
    </label>
</fieldset>

Un seul choix. Pas d’ambiguïté.

✅ Validation et accessibilité — La vérité avant tout

🔐 `required` — Champ obligatoire

<input type="email" required>

Empêche l’envoi incomplet.

⚠️ `placeholder` vs `label`

❌ Mauvais :

<input type="text" placeholder="Nom">

✅ Bon :

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

Le placeholder disparaît
Le label reste
Accessibilité respectée

🗂️ Regroupement logique — Clarté du dossier

Informations personnelles ensemble
Détails techniques ensemble
Actions finales à part

Un formulaire bien structuré, c’est un aveu propre.

Fin du module 7. Les réponses sont collectées. Au prochain module, on sécurise la scène.

Module 7 — Les formulaires : l’art de l’aveu