Partie 8 — Formulaires HTML : inputs, labels et validations de base

Les formulaires sont partout sur le Web : inscription, connexion, contact, recherche, paiement, réservation.

Un formulaire mal conçu frustre l’utilisateur. Un formulaire bien conçu inspire confiance et facilite l’action.

Dans cette partie, nous allons nous concentrer uniquement sur HTML : pas de JavaScript, pas de back-end. Vous allez apprendre à créer des formulaires propres, accessibles et déjà très efficaces grâce aux validations natives du navigateur.

👉 Un bon formulaire guide l’utilisateur au lieu de le bloquer.

1) La balise <form> : point de départ de tout formulaire

Tous les formulaires HTML commencent par la balise <form>.

Structure minimale :

<form>
  <!-- champs du formulaire -->
</form>
  

Attributs importants (pour plus tard) :

• action : destination des données
• method : GET ou POST

Pour l’instant, concentrons-nous sur la structure et l’expérience utilisateur.

2) Les champs input : le cœur du formulaire

La balise <input> permet de récupérer des données. Le comportement dépend de l’attribut type.

Inputs les plus courants

<input type="text">
<input type="email">
<input type="password">
<input type="number">
<input type="tel">
  

Exemple réel : formulaire de contact

<input type="text" placeholder="Votre nom">
<input type="email" placeholder="Votre email">
<input type="tel" placeholder="Téléphone">
  

❌ Erreur fréquente : utiliser type="text" pour tout.

3) Les labels : clarté et accessibilité

Un <label> décrit un champ. Il est essentiel pour l’accessibilité et la compréhension.

Exemple correct :

<label for="email">Adresse email</label>
<input id="email" type="email">
  

Grâce à for et id :

• le clic sur le label active le champ
• les lecteurs d’écran comprennent le champ

Alternative valide (champ inclus dans le label) :

<label>
  Mot de passe
  <input type="password">
</label>
  

4) Placeholder vs label : ne pas confondre

Le placeholder est un texte d’aide temporaire. Il ne remplace jamais un label.

<input type="email" placeholder="ex: nom@email.com">
  

Bonnes pratiques :

• Label = description du champ
• Placeholder = exemple ou aide

5) Autres éléments de formulaire

Zone de texte (textarea)

<textarea rows="4" placeholder="Votre message"></textarea>
  

Sélection (select)

<select>
  <option value="">Choisir un sujet</option>
  <option value="support">Support</option>
  <option value="commercial">Commercial</option>
</select>
  

Cases à cocher (checkbox)

<label>
  <input type="checkbox">
  J’accepte les conditions
</label>
  

Boutons radio

<label><input type="radio" name="genre"> Homme</label>
<label><input type="radio" name="genre"> Femme</label>
  

6) Validations HTML de base (sans JavaScript)

HTML offre des validations natives très puissantes.

Champ obligatoire

<input type="text" required>
  

Email valide

<input type="email" required>
  

Longueur minimale

<input type="password" minlength="8" required>
  

Le navigateur affiche automatiquement des messages d’erreur.

7) Exemple réel : formulaire de contact complet

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

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

  <label for="message">Message</label>
  <textarea id="message" rows="4" required></textarea>

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

Ce formulaire est :

• lisible
• accessible
• validé automatiquement

8) Erreurs fréquentes à éviter

• Supprimer les labels
• Utiliser uniquement des placeholders
• Ne pas valider les champs
• Créer des formulaires trop longs

👉 Un formulaire simple convertit mieux qu’un formulaire complexe.

Vous savez maintenant créer des formulaires HTML propres et efficaces : inputs adaptés, labels clairs et validations de base.

Dans la Partie 9, nous allons entrer dans le monde du CSS : comprendre la syntaxe, les sélecteurs, la cascade et l’héritage.

✅ Maîtriser les formulaires est une compétence essentielle du web moderne.