logo oujood
🔍

L'attribut form de la balise <input>

Liez un champ à un formulaire même s'il n'est pas à l'intérieur des balises <form>.

À quoi sert l'attribut form ?

LES ATTRIBUTS HTML

En HTML, un champ <input> doit normalement se trouver entre les balises <form> et </form> pour faire partie du formulaire. L'attribut form lève cette contrainte : il permet de rattacher un champ à un formulaire même si ce champ est positionné ailleurs dans la page.

Pour cela, on donne un id au formulaire, puis on renseigne cet id dans l'attribut form du champ souhaité. Le navigateur fait le lien automatiquement : lors de la soumission, le champ distant est inclus dans les données envoyées comme s'il était physiquement dans le formulaire.

C'est utile quand la mise en page impose de séparer le formulaire de certains champs — par exemple un bouton d'envoi placé dans un pied de page fixe, ou un champ caché situé dans une autre section du document.

Syntaxe

On attribue un id au formulaire, puis on pointe vers cet id depuis le champ externe :

  📋 Copier le code

<!-- Le formulaire possède un id unique -->
<form id="monFormulaire" action="traitement.php" method="post">
  ...
</form>

<!-- Ce champ est hors du formulaire, mais y est rattaché via form="monFormulaire" -->
<input type="text" name="champ" form="monFormulaire">

Exemple : un champ placé hors du formulaire

Ici, le champ Nom est écrit après la fermeture du formulaire. Grâce à form="form1", il est tout de même envoyé avec les autres données lors du clic sur le bouton de soumission.

  📋 Copier le code

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Exemple attribut form</title>
</head>
<body>

  <!-- id="form1" sert de point d'ancrage pour les champs externes -->
  <form id="form1" action="page-cible.php" method="post">
    Prénom : <input type="text" name="prenom"><br><br>
    <input type="submit" value="Envoyer">
  </form>

  <br><br>
  <!-- Ce champ est hors du <form>, mais form="form1" l'y rattache -->
  Nom : <input type="text" name="nom" form="form1">

</body>
</html>

Rattacher un champ à plusieurs formulaires

Un champ peut appartenir à plusieurs formulaires à la fois. Il suffit de lister leurs id séparés par des espaces dans l'attribut form :

  📋 Copier le code

<form id="formA" action="cible-a.php" method="post">...</form>
<form id="formB" action="cible-b.php" method="post">...</form>

<!-- Ce champ sera soumis avec formA ET avec formB -->
<input type="hidden" name="token" value="abc123" form="formA formB">

Valeur de l'attribut

Valeur Description
form_id Un ou plusieurs id de formulaires séparés par des espaces. Le champ <input> sera rattaché à chacun des formulaires listés.

Compatibilité navigateurs en 2026

L'attribut form est pris en charge par tous les navigateurs modernes : Chrome, Firefox, Safari, Edge et Opera. Introduit avec HTML5, il n'existait pas en HTML 4.01. Internet Explorer ne l'a jamais supporté, mais ce navigateur n'est plus maintenu depuis 2022.

Retour à l'accueil du site

Par carabde | Mis à jour le 10 avril 2026