HTML — Formulaires et sémantique avancée

Section 11.1.9 : HTML — Formulaires et sémantique avancée

🎯 Objectif pédagogique

Maîtriser les formulaires HTML pour collecter des données utilisateur, et approfondir la sémantique HTML. Vous serez capable de créer des formulaires fonctionnels avec validation, et d'utiliser les bonnes balises pour une accessibilité optimale.

Le formulaire — point de contact avec l'utilisateur

Marc a besoin de créer un formulaire de contact pour son portfolio. C'est le premier besoin de tout site web : capturer des informations de l'utilisateur. Inscription, connexion, recherche, filtres, commentaires — tout passe par des formulaires.

Anatomie d'un formulaire

<form action="/api/contact" method="POST">
  <!-- Champ texte -->
  <label for="name">Nom complet</label>
  <input type="text" id="name" name="name" required placeholder="Marc Dupont">

  <!-- Email -->
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>

  <!-- Téléphone -->
  <label for="phone">Téléphone</label>
  <input type="tel" id="phone" name="phone" pattern="[0-9]\{10\}">

  <!-- Mot de passe -->
  <label for="password">Mot de passe</label>
  <input type="password" id="password" name="password" minlength="8" required>

  <!-- Zone de texte -->
  <label for="message">Message</label>
  <textarea id="message" name="message" rows="5" required></textarea>

  <!-- Bouton d'envoi -->
  <button type="submit">Envoyer</button>
</form>

Types d'input HTML5

HTML5 offre des types spécialisés avec validation intégrée :

Attributs de validation

<input type="text" required>                    <!-- Obligatoire -->
<input type="text" minlength="3" maxlength="50"> <!-- Longueur -->
<input type="number" min="0" max="100">          <!-- Intervalle -->
<input type="text" pattern="[A-Za-z]\{3,\}">       <!-- Regex -->
<input type="email" placeholder="ex: marc@email.com"> <!-- Indice -->

Listes déroulantes et groupes

<!-- Select (liste déroulante) -->
<label for="level">Niveau</label>
<select id="level" name="level">
  <option value="">-- Sélectionnez --</option>
  <option value="debutant">Débutant</option>
  <option value="intermediaire">Intermédiaire</option>
  <option value="avance">Avancé</option>
</select>

<!-- Fieldset + Legend (grouper des champs) -->
<fieldset>
  <legend>Préférences de contact</legend>
  <label><input type="radio" name="contact" value="email"> Email</label>
  <label><input type="radio" name="contact" value="phone"> Téléphone</label>
  <label><input type="radio" name="contact" value="sms"> SMS</label>
</fieldset>

Accessibilité des formulaires

Règles d'or :

1. →<label> lié à <input> : for="id" ou en wrappant l'input
2. →aria-label pour les champs sans label visible
3. →Messages d'erreur explicites et associés au champ
4. →Navigation au clavier : tester avec Tab

<!-- ✅ Accessible -->
<label for="search">Recherche</label>
<input type="search" id="search" name="q">

<!-- ❌ Non-accessible -->
<input type="text" placeholder="Tapez ici...">

HTML sémantique avancé

<!-- Figure + Figcaption -->
<figure>
  <img src="dashboard.png" alt="Dashboard du projet">
  <figcaption>Dashboard de suivi — version 2.0</figcaption>
</figure>

<!-- Details/Summary (accordéon natif) -->
<details>
  <summary>Comment ça marche ?</summary>
  <p>Ce texte est caché par défaut et s'affiche au clic.</p>
</details>

<!-- Time -->
<time datetime="2026-03-17">17 mars 2026</time>

<!-- Mark (surbrillance) -->
<p>La commande <mark>git commit</mark> est essentielle.</p>

<!-- Abbr (abréviation) -->
<abbr title="HyperText Markup Language">HTML</abbr>

🏋️ Exercice pratique (20 minutes)

Ajoutez un formulaire de contact à votre portfolio :

<section id="contact">
  <h2>Me contacter</h2>
  <form action="#" method="POST">
    <div>
      <label for="contact-name">Votre nom</label>
      <input type="text" id="contact-name" name="name" required minlength="2">
    </div>
    <div>
      <label for="contact-email">Votre email</label>
      <input type="email" id="contact-email" name="email" required>
    </div>
    <div>
      <label for="contact-subject">Sujet</label>
      <select id="contact-subject" name="subject" required>
        <option value="">-- Choisissez --</option>
        <option value="project">Projet</option>
        <option value="question">Question</option>
        <option value="other">Autre</option>
      </select>
    </div>
    <div>
      <label for="contact-message">Message</label>
      <textarea id="contact-message" name="message" rows="5" required minlength="10"></textarea>
    </div>
    <button type="submit">Envoyer le message</button>
  </form>
</section>

Testez la validation : essayez de soumettre sans remplir les champs requis.