Formulaires : input, label, select, textarea, button

Construisez des formulaires complets, accessibles et prêts pour la production.

10 min · 3 questions

Un formulaire est la porte d'entrée de presque toutes les interactions du web : inscription, recherche, paiement, contact. Vous connaissez déjà la structure d'une page ; place maintenant au concret. Retenez d'emblée la règle d'or : chaque champ a un attribut name, car c'est lui qui est envoyé au serveur, pas l'id.

<form action="/subscribe" method="post">
  <label for="email">Adresse e-mail</label>
  <input type="email" id="email" name="email" required>
  <button type="submit">S'inscrire</button>
</form>

Observez le duo label / input : l'attribut for du label pointe vers l'id du champ. Ce lien est essentiel pour les lecteurs d'écran. Notez aussi le type="email" : le navigateur valide gratuitement le format et affiche le bon clavier sur mobile. Il existe d'autres types utiles au quotidien : number, date, password, checkbox, radio.

<label for="country">Pays</label>
<select id="country" name="country" required>
  <option value="">-- Choisissez un pays --</option>
  <option value="fr">France</option>
  <option value="ca">Canada</option>
</select>

<label for="message">Votre message</label>
<textarea id="message" name="message" rows="5"></textarea>

Dernier acteur : button. Il accepte trois types : submit (envoie le formulaire), reset (efface les champs) et button (ne fait rien seul, à brancher en JavaScript). Exercice mental : dans un formulaire d'article de blog, vous ajoutez un bouton « Prévisualiser » qui ne doit pas envoyer les données. Quel type lui donnez-vous ? Réponse : type="button".

<form action="/contact" method="post">
  <label for="topic">Sujet</label>
  <select id="topic" name="topic">
    <option value="support">Support technique</option>
    <option value="billing">Facturation</option>
  </select>

  <button type="submit">Envoyer</button>
  <button type="button" id="preview-btn">
    Prévisualiser
  </button>
</form>

Quiz de validation

Vérifiez que vous avez bien retenu les points clés de cette leçon.

1. Quel attribut relie un label à son champ de formulaire ?
   • L'attribut for du label, qui pointe vers l'id du champ
   • L'attribut name, identique sur le label et le champ
   • L'attribut value du label
   • L'attribut placeholder du champ
2. Dans un formulaire, quel est le type par défaut d'un button sans attribut type ?
   • submit
   • button
   • reset
3. Quel élément utilisez-vous pour saisir un texte long sur plusieurs lignes ?
   • input avec type="text"
   • textarea
   • select
   • output