Les formulaires sont les ponts interactifs entre vos visiteurs et votre site web, permettant la collecte et l'échange d'informations.

La balise <form> est le conteneur principal qui définit un formulaire HTML et comment les données seront traitées.

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

GET vs POST

Les champs de texte (<input type="text">) sont les éléments de base pour saisir des informations courtes sur une seule ligne.

<input type="text" name="prenom" placeholder="Votre prénom">

<input type="text" name="nom">

<input type="email" name="email">

<input type="tel" name="telephone">

<input type="url" name="siteweb">

Les champs de mot de passe (<input type="password">) masquent les caractères saisis pour protéger les informations sensibles.

<input type="password" name="motdepasse" placeholder="Votre mot de passe">

Exemple avec affichage optionnel

<input type="password" id="password" placeholder="Mot de passe">
<input type="checkbox" id="showPassword"> 
<label for="showPassword">Afficher le mot de passe</label>

<script>
  document.getElementById('showPassword').addEventListener('change', function() {
    var password = document.getElementById('password');
    password.type = this.checked ? 'text' : 'password';
  });
</script>

Les boutons permettent aux utilisateurs d'interagir avec le formulaire, notamment pour soumettre ou réinitialiser les données.

<input type="submit" value="Envoyer">

<input type="reset" value="Effacer">

<button type="button">Action</button>

La balise <textarea> permet de saisir du texte sur plusieurs lignes, idéal pour les commentaires ou messages longs.

<textarea name="message" rows="4" cols="50" placeholder="Votre message..."></textarea>

Les balises <select> et <option> créent des listes déroulantes pour sélectionner une ou plusieurs options.

<select name="pays">
  <option value="fr">France</option>
  <option value="be">Belgique</option>
  <option value="ca" selected>Canada</option>
</select>

Exemple avec groupes

<select name="voiture">
  <optgroup label="Allemandes">
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
  </optgroup>
  <optgroup label="Françaises">
    <option value="peugeot">Peugeot</option>
    <option value="renault">Renault</option>
  </optgroup>
</select>

Les cases à cocher (checkbox) et boutons radio (radio) permettent des sélections parmi des options prédéfinies.

<input type="checkbox" name="newsletter">
<label>S'abonner à la newsletter</label>

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

Bonnes pratiques

• Toujours associer un <label> à chaque case/bouton
• Utiliser fieldset et legend pour grouper les options liées
• Prévoir une option sélectionnée par défaut quand cela a du sens
• Ordonner les options logiquement (alphabétique, fréquente...)

Les attributs des éléments de formulaire permettent de contrôler leur comportement et leur apparence.

Voici un formulaire complet intégrant les différents éléments abordés dans ce chapitre.

<form action="/inscription" method="post">
  <fieldset>
    <legend>Informations personnelles</legend>
    
    <label>
      Nom complet *:
      <input type="text" name="nom" required placeholder="Jean Dupont">
    </label>
    
    <label>
      Email *:
      <input type="email" name="email" required placeholder="email@exemple.com">
    </label>
    
    <label>
      Mot de passe *:
      <input type="password" name="motdepasse" required minlength="8">
    </label>
    
    <label>
      Date de naissance:
      <input type="date" name="naissance">
    </label>
  </fieldset>
  
  <fieldset>
    <legend>Préférences</legend>
    
    <label>
      <input type="checkbox" name="newsletter" checked>
      Recevoir la newsletter
    </label>
    
    <label>Langue préférée:</label>
    <select name="langue">
      <option value="fr" selected>Français</option>
      <option value="en">Anglais</option>
      <option value="es">Espagnol</option>
    </select>
    
    <label>Comment nous avez-vous connu?</label>
    <textarea name="comment" rows="3" placeholder="Amis, publicité..."></textarea>
  </fieldset>
  
  <button type="submit">S'inscrire</button>
  <button type="reset">Effacer</button>
</form>

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

<input type="text" name="email">

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

Autres problèmes courants

• Formulaires trop longs et complexes
• Absence de messages d'erreur clairs
• Validation uniquement côté client (toujours valider côté serveur)
• Oublier le bouton submit
• Ne pas tester avec des données réelles