Qu'est-ce que la balise <form> en HTML ?

Définition de la balise <form>

La balise <form> est l'un des éléments les plus fondamentaux du langage HTML. Elle permet de créer un formulaire interactif qui collecte des données saisies par l'utilisateur et les envoie vers un serveur pour traitement. Sans elle, aucune inscription, aucune connexion, aucun paiement en ligne ne serait possible. C'est véritablement le pont entre l'utilisateur et le serveur.

Si vous souhaitez maîtriser parfaitement les formulaires HTML et toutes les subtilités du langage, nous vous recommandons de suivre notre formation complète sur HTML qui couvre ce sujet en profondeur.

Un formulaire HTML agit comme un conteneur pour différents éléments interactifs : champs de texte (<input>), menus déroulants (<select>), zones de texte (<textarea>), boutons (<button>), cases à cocher, boutons radio, et bien d'autres. Lorsque l'utilisateur soumet le formulaire, les données contenues dans ces éléments sont envoyées au serveur selon la méthode HTTP spécifiée.

Syntaxe de base

La syntaxe de la balise <form> est relativement simple. Elle s'ouvre avec <form> et se ferme avec </form>. Tous les éléments de formulaire doivent être placés entre ces deux balises.

<form action="/traitement" method="post">
  <label for="nom">Votre nom :</label>
  <input type="text" id="nom" name="nom">

  <label for="email">Votre email :</label>
  <input type="email" id="email" name="email">

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

Dans cet exemple, nous avons un formulaire simple avec deux champs et un bouton d'envoi. L'attribut action indique l'URL vers laquelle les données seront envoyées, et l'attribut method précise la méthode HTTP utilisée.

Les attributs essentiels de  <form>

La balise <form> dispose de nombreux attributs qui contrôlent son comportement. Comprendre ces attributs est indispensable pour créer des formulaires fonctionnels et sécurisés.

L'attribut  action

L'attribut action définit l'URL vers laquelle les données du formulaire seront envoyées lors de la soumission. Si cet attribut est omis, les données sont envoyées vers l'URL de la page actuelle.

<!-- Envoi vers une URL spécifique -->
<form action="https://example.com/api/inscription">
  ...
</form>

<!-- Envoi vers la page actuelle (action omise) -->
<form>
  ...
</form>

<!-- Envoi vers un chemin relatif -->
<form action="/utilisateurs/creer">
  ...
</form>

L'attribut  method

L'attribut method spécifie la méthode HTTP utilisée pour envoyer les données. Les deux valeurs principales sont GET et POST.

<!-- Formulaire de recherche avec GET -->
<form action="/recherche" method="get">
  <input type="text" name="q" placeholder="Rechercher...">
  <button type="submit">Chercher</button>
</form>
<!-- L'URL résultante sera : /recherche?q=mot-clé -->

<!-- Formulaire de connexion avec POST -->
<form action="/connexion" method="post">
  <input type="text" name="identifiant">
  <input type="password" name="mot_de_passe">
  <button type="submit">Se connecter</button>
</form>

L'attribut  enctype

L'attribut enctype définit le type d'encodage utilisé lors de l'envoi des données. Il est particulièrement important lorsque vous avez besoin d'envoyer des fichiers.

<!-- Formulaire d'envoi de fichiers -->
<form action="/upload" method="post" enctype="multipart/form-data">
  <label for="avatar">Choisissez une photo de profil :</label>
  <input type="file" id="avatar" name="avatar" accept="image/*">
  <button type="submit">Envoyer</button>
</form>

Autres attributs importants

Voici d'autres attributs que vous pouvez utiliser sur la balise <form> :

<!-- Formulaire sans validation native, avec autocomplétion désactivée -->
<form action="/inscription" method="post" novalidate autocomplete="off">
  <input type="email" name="email" required>
  <input type="password" name="password" minlength="8" required>
  <button type="submit">S'inscrire</button>
</form>

Exemples pratiques de formulaires

Voyons maintenant des exemples concrets de formulaires que vous rencontrerez fréquemment dans vos projets web.

Formulaire d'inscription complet

Voici un formulaire d'inscription typique utilisant différents types de champs, des <label> pour l'accessibilité, et un <fieldset> pour regrouper les champs logiquement :

<form action="/api/inscription" method="post">
  <fieldset>
    <legend>Informations personnelles</legend>

    <label for="prenom">Prénom :</label>
    <input type="text" id="prenom" name="prenom" required>

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

    <label for="date-naissance">Date de naissance :</label>
    <input type="date" id="date-naissance" name="date_naissance">
  </fieldset>

  <fieldset>
    <legend>Identifiants de connexion</legend>

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

    <label for="password">Mot de passe :</label>
    <input type="password" id="password" name="password" minlength="8" required>

    <label for="password-confirm">Confirmer le mot de passe :</label>
    <input type="password" id="password-confirm" name="password_confirm" minlength="8" required>
  </fieldset>

  <label>
    <input type="checkbox" name="conditions" required>
    J'accepte les conditions d'utilisation
  </label>

  <button type="submit">Créer mon compte</button>
</form>

Formulaire de contact

Un formulaire de contact est un autre cas d'utilisation très courant. Il combine des champs de texte classiques avec une zone de texte plus grande pour le message :

<form action="/contact" method="post">
  <label for="contact-nom">Votre nom :</label>
  <input type="text" id="contact-nom" name="nom" required>

  <label for="contact-email">Votre email :</label>
  <input type="email" id="contact-email" name="email" required>

  <label for="contact-sujet">Sujet :</label>
  <select id="contact-sujet" name="sujet">
    <option value="">-- Choisissez un sujet --</option>
    <option value="support">Support technique</option>
    <option value="commercial">Question commerciale</option>
    <option value="autre">Autre</option>
  </select>

  <label for="contact-message">Votre message :</label>
  <textarea id="contact-message" name="message" rows="6" required></textarea>

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

Formulaire de recherche

Les formulaires de recherche sont généralement courts et utilisent la méthode GET, car les termes de recherche ne sont pas sensibles et il est utile de pouvoir partager l'URL des résultats :

<form action="/recherche" method="get" role="search">
  <label for="search">Rechercher :</label>
  <input type="search" id="search" name="q" placeholder="Tapez votre recherche..." required>
  <button type="submit">Rechercher</button>
</form>

Validation des formulaires

HTML5 a introduit un système de validation native très puissant qui permet de vérifier les données saisies par l'utilisateur avant même qu'elles soient envoyées au serveur. Cette validation côté client améliore l'expérience utilisateur, mais ne doit jamais remplacer la validation côté serveur.

Attributs de validation

Voici les principaux attributs de validation disponibles sur les éléments de formulaire :

<form action="/valider" method="post">
  <!-- Champ obligatoire avec longueur minimum -->
  <label for="username">Nom d'utilisateur (3-20 caractères) :</label>
  <input type="text" id="username" name="username"
         required minlength="3" maxlength="20"
         pattern="[a-zA-Z0-9_]+"
         title="Uniquement des lettres, chiffres et underscores">

  <!-- Champ email avec validation automatique -->
  <label for="email">Email :</label>
  <input type="email" id="email" name="email" required>

  <!-- Champ numérique avec limites -->
  <label for="age">Âge (18-120) :</label>
  <input type="number" id="age" name="age" min="18" max="120">

  <!-- Champ téléphone avec pattern -->
  <label for="tel">Téléphone :</label>
  <input type="tel" id="tel" name="telephone"
         pattern="[0-9]{10}"
         title="Entrez un numéro à 10 chiffres">

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

Accessibilité des formulaires

L'accessibilité est un aspect crucial de la conception de formulaires. Un formulaire mal structuré peut être totalement inutilisable pour les personnes utilisant des technologies d'assistance comme les lecteurs d'écran.

Règles essentielles d'accessibilité

Voici les bonnes pratiques à suivre systématiquement :

• Associez toujours un <label> à chaque champ : utilisez l'attribut for sur le <label> qui correspond à l'id du champ.
• Utilisez <fieldset> et <legend> : regroupez les champs liés logiquement (par exemple, les boutons radio d'un même choix).
• Fournissez des messages d'erreur clairs : indiquez précisément ce qui doit être corrigé.
• Utilisez les attributs ARIA quand nécessaire : aria-describedby, aria-required, aria-invalid.
• Assurez la navigation au clavier : l'utilisateur doit pouvoir remplir tout le formulaire avec la touche Tab.

<form action="/inscription" method="post">
  <!-- Label correctement associé -->
  <label for="user-email">Adresse email :</label>
  <input type="email" id="user-email" name="email"
         required aria-describedby="email-aide">
  <span id="email-aide">Exemple : utilisateur@domaine.com</span>

  <!-- Groupe de boutons radio avec fieldset -->
  <fieldset>
    <legend>Votre niveau en HTML :</legend>
    <label>
      <input type="radio" name="niveau" value="debutant">
      Débutant
    </label>
    <label>
      <input type="radio" name="niveau" value="intermediaire">
      Intermédiaire
    </label>
    <label>
      <input type="radio" name="niveau" value="avance">
      Avancé
    </label>
  </fieldset>

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

Styliser un formulaire avec CSS

Les formulaires HTML sont notoirement difficiles à styliser de manière cohérente entre les navigateurs. Voici un exemple de CSS de base pour donner un aspect professionnel à vos formulaires :

form {
  max-width: 500px;
  margin: 0 auto;
  padding: 2rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #4a90d9;
  box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.25);
}

input:invalid:not(:placeholder-shown) {
  border-color: #e74c3c;
}

input:valid:not(:placeholder-shown) {
  border-color: #2ecc71;
}

button[type="submit"] {
  background-color: #4a90d9;
  color: white;
  padding: 0.75rem 2rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #357abd;
}

Ce CSS utilise les pseudo-classes :focus, :valid et :invalid pour fournir un retour visuel à l'utilisateur. La pseudo-classe :placeholder-shown évite de marquer les champs comme invalides avant même que l'utilisateur n'ait commencé à les remplir.

Bonnes pratiques

Pour créer des formulaires efficaces, accessibles et sécurisés, voici les bonnes pratiques que vous devriez systématiquement appliquer :

• Utilisez toujours la méthode POST pour les données sensibles (mots de passe, informations personnelles).
• Ajoutez un attribut name à chaque champ de formulaire, car c'est ce nom qui sera utilisé comme clé lors de l'envoi des données au serveur.
• Utilisez les bons types d'input : email, tel, url, number, date, etc. Cela active la validation native et affiche le bon clavier sur mobile.
• N'oubliez pas l'attribut enctype="multipart/form-data" lorsque votre formulaire contient des champs de type fichier.
• Privilégiez la sémantique HTML : utilisez <fieldset>, <legend>, <label>, <datalist> et les types d'input appropriés plutôt que de tout reconstruire avec des <div>.
• Implémentez une protection CSRF (Cross-Site Request Forgery) côté serveur pour vos formulaires sensibles.
• Ajoutez des attributs autocomplete appropriés sur chaque champ pour améliorer l'expérience utilisateur.
• Testez vos formulaires au clavier : assurez-vous que l'ordre de tabulation est logique et que le formulaire est entièrement navigable sans souris.

Interaction avec JavaScript

La balise <form> interagit étroitement avec JavaScript pour offrir des expériences utilisateur avancées. Voici comment intercepter la soumission d'un formulaire :

const formulaire = document.querySelector('form');

formulaire.addEventListener('submit', function(event) {
  // Empêcher l'envoi classique du formulaire
  event.preventDefault();

  // Récupérer les données du formulaire
  const donnees = new FormData(formulaire);

  // Envoi asynchrone avec fetch
  fetch('/api/inscription', {
    method: 'POST',
    body: donnees
  })
  .then(response => response.json())
  .then(data => {
    console.log('Succès :', data);
  })
  .catch(error => {
    console.error('Erreur :', error);
  });
});

L'objet FormData est extrêmement pratique : il collecte automatiquement toutes les données du formulaire (y compris les fichiers) et les formate correctement pour l'envoi. Cette approche avec fetch() est aujourd'hui la méthode recommandée pour envoyer des formulaires de manière asynchrone, sans rechargement de page.

Questions fréquentes

La méthode GET ajoute les données du formulaire directement dans l'URL sous forme de paramètres (par exemple /recherche?q=html). Elle est visible, limitée en taille et adaptée aux recherches ou filtres. La méthode POST envoie les données dans le corps de la requête HTTP, elles sont donc invisibles dans l'URL. Utilisez POST pour les données sensibles, les fichiers ou les gros volumes de données.

Non, il est interdit d'imbriquer des balises <form> les unes dans les autres selon la spécification HTML. Si vous avez besoin de plusieurs actions dans une même page, vous pouvez utiliser l'attribut form sur les éléments <input> ou <button> pour les associer à un formulaire spécifique sans qu'ils soient physiquement à l'intérieur de celui-ci.

Pour envoyer un formulaire sans rechargement, vous devez utiliser JavaScript. Interceptez l'événement submit avec addEventListener, appelez event.preventDefault() pour empêcher le comportement par défaut, puis utilisez l'API fetch() ou XMLHttpRequest pour envoyer les données de manière asynchrone (AJAX). L'objet FormData simplifie grandement la collecte des données du formulaire.

La maîtrise des formulaires HTML demande de la pratique et une bonne compréhension des différents éléments disponibles (<input>, <select>, <textarea>, <fieldset>, <button>, <datalist>, etc.). Pour progresser efficacement, nous vous recommandons de suivre notre formation HTML sur Believemy, qui vous guidera pas à pas dans la création de formulaires accessibles, sécurisés et professionnels, avec des exercices pratiques concrets.