Formulaires HTML

Introduction

Le formulaire est la principale interface de saisie d'une page Web. Champ de recherche d'un moteur, page de connexion, sondage, panier d'un site marchand : derrière chacun se cache une balise <form> qui collecte les saisies de l'utilisateur et les transmet à un serveur. Ce cours étudie sa structure et les deux méthodes de transmission, GET et POST, dont le choix n'est pas anodin.

Voir [PE01].

Anatomie d'un formulaire

Un formulaire est délimité par la balise <form>. Il contient des champs (<input>, <textarea>, <select>) et un bouton de soumission :

<form action="/inscription" method="post">
  <label for="email">Adresse e-mail :</label>
  <input type="email" id="email" name="email" required>

  <label for="age">Âge :</label>
  <input type="number" id="age" name="age" min="0" max="120">

  <button type="submit">S'inscrire</button>
</form>

Décortiquons les attributs essentiels de <form> :

Et ceux d'un champ <input> :

Le bestiaire des <input>

Le type d'un <input> détermine la nature du champ. Quelques exemples courants :

<input type="text"     name="pseudo">
<input type="password" name="motdepasse">
<input type="email"    name="email">
<input type="number"   name="age" min="0" max="120">
<input type="date"     name="naissance">
<input type="checkbox" name="newsletter" value="oui">
<input type="radio"    name="genre" value="F">
<input type="radio"    name="genre" value="M">
<input type="file"     name="photo">
<input type="hidden"   name="token" value="abc123">

Pour un champ de texte multilignes, on préfère <textarea> :

<textarea name="commentaire" rows="4" cols="50"></textarea>

Pour un menu déroulant :

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

GET — paramètres dans l'URL

Lorsque la méthode est get, le navigateur encode les paires name=valuedans l'URL, après un ?, séparées par des &. Exemple : un formulaire de recherche.

<form action="/recherche" method="get">
  <input type="text" name="q">
  <input type="text" name="page">
  <button type="submit">Rechercher</button>
</form>

Si l'utilisateur tape python et 2, le navigateur navigue vers :

/recherche?q=python&page=2

Caractéristiques de GET :

• Les paramètres sont visibles dans l'URL.
• L'URL résultante est partageable et bookmarkable (copier-coller).
• Limitation de longueur (en pratique, quelques milliers de caractères).
• À réserver aux opérations sans effet de bord : consultation, recherche, filtrage. Une requête GET peut être rejouée sans risque.

POST — paramètres dans le corps

Lorsque la méthode est post, le navigateur encode les paires name=value dans le corps de la requête HTTP, invisibles dans l'URL.

<form action="/inscription" method="post">
  <input type="email"    name="email">
  <input type="password" name="motdepasse">
  <button type="submit">Créer mon compte</button>
</form>

Côté réseau, la requête envoyée ressemble à :

POST /inscription HTTP/1.1
Host: exemple.fr
Content-Type: application/x-www-form-urlencoded

email=alice%40exemple.fr&motdepasse=secret123

Caractéristiques de POST :

• Les paramètres ne sont pas dans l'URL — donc ni dans l'historique ni dans les logs serveurs basiques.
• Pas de limite pratique sur la taille des données (utile pour les fichiers, les longs textes).
• À réserver aux opérations avec effet de bord : création, modification, suppression. Re-soumettre par mégarde un POST peut créer deux comptes, deux commandes…

GET vs POST — quand utiliser quoi ?

Règle simple : si l'action lit une information sans rien changer côté serveur, choisir GET. Si l'action modifie quelque chose ou transmet une information sensible, choisir POST.

Validation côté navigateur

HTML5 propose des contraintes intégrées vérifiées avant l'envoi :

<form action="/contact" method="post">
  <input type="email" name="email" required>
  <input type="number" name="age" min="13" max="120">
  <input type="text" name="code" pattern="[A-Z]{3}\d{4}" required>
  <button type="submit">Envoyer</button>
</form>

• required : champ obligatoire.
• min, max : bornes numériques.
• pattern="…" : expression régulière à respecter.
• type="email" : validation basique du format e-mail.

Cas particuliers et pièges

• Oublier name : un champ sans name n'est tout simplement pas envoyé.
• Bouton sans type : par défaut, un <button> dans un <form> est de type submit et soumet le formulaire. Pour un bouton « ordinaire » (par exemple gérer un événement JS), préciser type="button".
• Plusieurs <form> imbriqués : interdit. Un formulaire ne peut pas en contenir un autre.
• Boutons radio : tous les radios d'un même groupe doivent partager le même name pour fonctionner comme un choix unique.

Pour aller plus loin

Avec JavaScript, vous pourrez intercepter la soumission d'un formulaire (événement submit), valider les champs, formater les données, et même envoyer la requête sans recharger la page (fetch). C'est le sujet des deux cours suivants : événements et manipulation du DOM.