La création de formulaires

Créer un formulaire : la balise form

La balise form est un conteneur : elle ne produit rien de visible à elle seule. Ce sont les éléments placés à l’intérieur (champs, boutons, libellés) qui composent le formulaire.

<!-- Un formulaire simple -->
<form>
  <p>Mon premier formulaire ! Les champs viendront ici.</p>
</form>

Les champs de saisie : la balise input

La balise input est l’élément central des formulaires. Elle change d’apparence et de comportement selon la valeur de son attribut type. Trois attributs sont essentiels :

• type : définit la nature du champ (texte, mot de passe, date, couleur…)
• name : identifie le champ lors de l’envoi des données au serveur — sans lui, la donnée est perdue
• id : identifiant unique de l’élément, indispensable pour le lier à son libellé (label)

<form>
  <input type="text" name="pseudo" id="pseudo" placeholder="Votre pseudo">
  <input type="email" name="email" id="email" placeholder="votre@email.fr">
  <input type="password" name="mdp" id="mdp" placeholder="Votre mot de passe">
  <input type="tel" name="telephone" id="telephone" placeholder="06 12 34 56 78">
  <input type="date" name="naissance" id="naissance">
  <input type="number" name="quantite" id="quantite" placeholder="1">
  <input type="color" name="couleur" id="couleur">
  <input type="file" name="fichier" id="fichier">
</form>

Le champ textarea : pour les textes longs

textarea est une balise spécifique pour les textes longs. Contrairement à input, elle n’utilise pas l’attribut type, sa nature étant déjà définie par la balise elle-même. Elle permet de saisir un texte sur plusieurs lignes.

<!-- textarea est une balise double, contrairement à input -->
<textarea name="commentaire" id="commentaire" placeholder="Rédigez votre message ici..."></textarea>

Récapitulatif des types d’input les plus courants

Les libellés : la balise label

Un libellé est un court texte qui indique au visiteur ce que doit contenir le champ. La balise label est liée à son champ grâce à l’attribut for, qui doit correspondre exactement à l’id du champ associé.

<form>
  <label for="prenom">Quel est votre prénom ?</label>
  <input type="text" name="prenom" id="prenom" placeholder="Votre prénom">

  <label for="email">Votre adresse mail</label>
  <input type="email" name="email" id="email" placeholder="votre@email.fr">
</form>

Placeholder et label : deux rôles différents

Un visiteur utilisant un lecteur d’écran, ou ayant déjà commencé à remplir le champ, ne voit plus le placeholder. Le label, lui, reste toujours accessible. C’est pourquoi chaque champ de formulaire doit avoir un label. Le placeholder est un complément, pas un substitut.

<!-- ❌ Mauvaise pratique : pas de label, seulement un placeholder -->
<input type="text" name="ville" placeholder="Votre ville">

<!-- ✅ Bonne pratique : un label permanent + un placeholder en complément -->
<label for="ville">Votre ville</label>
<input type="text" name="ville" id="ville" placeholder="Ex : Lyon, Paris...">

Cases à cocher et boutons radio

Cases à cocher : checkbox

Les cases à cocher permettent de sélectionner zéro, une ou plusieurs options. Chaque case a un name et une value distincte.

<form>
  <fieldset>
      <legend>Cochez les animaux que vous aimez</legend>

      <input type="checkbox" name="chat" id="chat" value="chat">
      <label for="chat">Chat</label>

      <input type="checkbox" name="chien" id="chien" value="chien">
      <label for="chien">Chien</label>

      <input type="checkbox" name="hirondelle" id="hirondelle" value="hirondelle">
      <label for="hirondelle">Hirondelle</label>

      <input type="checkbox" name="castor" id="castor" value="castor">
      <label for="castor">Castor</label>
  </fieldset>
</form>

Boutons radio : radio

Les boutons radio obligent à choisir une seule option dans un groupe. Pour qu’ils fonctionnent ensemble, tous les boutons d’un même groupe doivent partager le même attribut name.

• La balise fieldset regroupe visuellement les champs liés. Le navigateur affiche un cadre par défaut.
• La balise legend sert quant à elle de titre au groupe.

<form>
  <fieldset>
      <legend>Quel est votre animal préféré ?</legend>

      <input type="radio" name="animal" id="animal-chat" value="chat">
      <label for="animal-chat">Chat</label>

      <input type="radio" name="animal" id="animal-chien" value="chien">
      <label for="animal-chien">Chien</label>

      <input type="radio" name="animal" id="animal-hirondelle" value="hirondelle">
      <label for="animal-hirondelle">Hirondelle</label>

      <input type="radio" name="animal" id="animal-castor" value="castor">
      <label for="animal-castor">Castor</label>
  </fieldset>
</form>

Les menus déroulants : select et option

La balise select crée un menu déroulant. Chaque choix est une balise option avec un attribut value.

<form>
  <label for="pays">Dans quel pays habitez-vous ?</label>
  <select name="pays" id="pays">
      <option value="">-- Choisissez un pays --</option>
      <option value="france">France</option>
      <option value="espagne">Espagne</option>
      <option value="italie">Italie</option>
      <option value="royaume-uni">Royaume-Uni</option>
      <option value="canada">Canada</option>
  </select>
</form>

Organiser les options en groupes avec optgroup

Pour un menu déroulant contenant beaucoup de choix, la balise optgroup permet de créer des catégories visuelles.

<select name="pays" id="pays">
  <option value="">-- Choisissez un pays --</option>
  <optgroup label="Europe">
      <option value="france">France</option>
      <option value="espagne">Espagne</option>
      <option value="italie">Italie</option>
  </optgroup>
  <optgroup label="Amérique">
      <option value="canada">Canada</option>
      <option value="etats-unis">États-Unis</option>
  </optgroup>
  <optgroup label="Asie">
      <option value="chine">Chine</option>
      <option value="japon">Japon</option>
  </optgroup>
</select>

Le bouton d’envoi

Un formulaire sans bouton est un formulaire inutilisable ! Deux syntaxes sont possibles pour créer un bouton d’envoi :

• une balise simple input avec type="submit"
• une balise double button avec type="submit"

<!-- Syntaxe 1 : input type submit -->
<input type="submit" value="Envoyer">

<!-- Syntaxe 2 : balise button (recommandée) -->
<button type="submit">Envoyer ma demande</button>

Vous pouvez également ajouter un bouton type="reset" qui vide tous les champs du formulaire.

<button type="reset">Effacer le formulaire</button>

Validation HTML5

Le HTML5 permet de vérifier les données avant l’envoi, directement dans le navigateur, sans JavaScript. Trois attributs couvrent l’essentiel :

• required : le champ doit être rempli pour que le formulaire puisse être envoyé
• minlength / maxlength : nombre minimum et maximum de caractères autorisés
• Le type lui-même valide le format : type="email" vérifie la présence d’un @, type="url" vérifie le format d’adresse…

<form>
  <label for="nom">Votre nom (obligatoire)</label>
  <input type="text" name="nom" id="nom" required minlength="2" maxlength="50">

  <label for="email">Votre email (obligatoire)</label>
  <input type="email" name="email" id="email" required placeholder="votre@email.fr">

  <label for="bio">Présentez-vous (max 200 caractères)</label>
  <textarea name="bio" id="bio" maxlength="200" placeholder="Quelques mots sur vous..."></textarea>

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

Transmettre les données : method et action

Quand le visiteur clique sur le bouton d’envoi, le navigateur transmet les données du formulaire. Deux attributs de la balise form contrôlent cette transmission :

• action : l’adresse (URL ou fichier) vers laquelle les données sont envoyées
• method : la méthode de transmission — post ou get

<!-- Les données seront envoyées au fichier traitement.php via la méthode POST -->
<form method="post" action="traitement.php">
  <label for="prenom">Votre prénom</label>
  <input type="text" name="prenom" id="prenom" required>

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

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

POST vs GET : quelle différence ?

• POST : les données sont transmises de manière invisible dans le corps de la requête. C’est la méthode à privilégier pour la plupart des formulaires (inscription, contact, commande…).
• GET : les données sont ajoutées dans l’URL (?nom=Dupont&prenom=Marie). Cette méthode est limitée en taille (environ 2000 caractères) et les données sont visibles dans la barre d’adresse. Elle est adaptée aux formulaires de recherche ou de filtrage.

Bonnes pratiques

• Toujours associer un label à chaque champ — c’est la base de l’accessibilité. Un formulaire sans labels est inutilisable pour les personnes utilisant un lecteur d’écran.
• Regrouper les champs liés avec fieldset et legend — particulièrement pour les checkbox et radio.
• Ne pas confondre placeholder et label — le placeholder est un complément visuel, pas un substitut au label.
• Utiliser les types HTML5 (email, tel, date, number…) — ils activent le bon clavier sur mobile et offrent une validation native gratuite.
• Rendre obligatoires les champs essentiels avec required — c’est un premier filet de sécurité.
• Penser au name sur chaque champ — sans lui, les données ne seront pas transmises au serveur.