path: root/files/fr/web/html/element/form/index.html

---
title: <form>
slug: Web/HTML/Element/Form
tags:
  - Element
  - Formulaires
  - Formulaires HTML
  - HTML
  - Reference
  - Web
translation_of: Web/HTML/Element/form
---
<div>{{HTMLRef}}</div>

<p>L'élément HTML <strong><code>&lt;form&gt;</code> </strong>représente une section d'un document qui contient des contrôles interactifs permettant à un utilisateur d'envoyer des données à un serveur web.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/form.html", "tabbed-standard")}}</div>

<p class="hidden">Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> et à envoyer une <em>pull request</em> !</p>

<p>Il est possible d'utiliser les pseudo-classes CSS {{cssxref(':valid')}} et {{cssxref(':invalid')}} pour mettre en forme un élément <code>&lt;form&gt;</code>.</p>

<h2 id="Attributs">Attributs</h2>

<p>Cet élément prend en charge <a href="/fr/docs/Web/HTML/Attributs_universels">les attributs universels</a>.</p>

<dl>
 <dt>{{htmlattrdef("accept")}} {{HTMLVersionInline(4)}} {{obsolete_inline}}</dt>
 <dd>Cet attribut indique quels types de contenus sont acceptés par le serveur. Il peut y en avoir plusieurs, séparés par des virgules.
 <div class="note"><strong>Note d'utilisation : </strong>Cet attribut a été retiré dans HTML5 et ne doit plus être utilisé. À la place, il faut utiliser l'attribut {{htmlattrxref("accept", "input")}} de l'élément {{HTMLElement("input")}}.</div>
 </dd>
 <dt>{{htmlattrdef("accept-charset")}}</dt>
 <dd>Une liste des ensembles de caractères que le serveur accepte. Cette liste est délimitée par des espaces ou des virgules. Le navigateur les utilise dans l'ordre dans lequel ils ont été définis. La valeur par défaut est la chaîne de caractères réservée "UNKNOWN" ; dans ce cas, l'ensemble de caractères utilisé correspond à celui du document contenant l'élément {{HTMLElement("form")}}.<br>
 Dans les versions précédentes de HTML, les différents ensembles de caractères pouvaient être délimités par des espaces ou des virgules. Ce n'est plus le cas en HTML5 où seuls les espaces sont autorisés.</dd>
 <dt>{{htmlattrdef("action")}}</dt>
 <dd>L'URI du programme qui traitera les informations soumises par le formulaire. Cette valeur peut être surchargée par un attribut {{htmlattrxref("formaction", "button")}} sur un élément {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</dd>
 <dt>{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}</dt>
 <dd>Cet attribut est un attribut non-standard utilisé sur iOS par Safari Mobile qui contrôle la façon dont la valeur du texte est automatiquement transcrite en majuscules lors de la saisie par l'utilisateur. Si l'attribut <code>autocapitalize</code> est défini sur un des descendants du formulaire, il surchargera la valeur de <code>autocapitalize</code> utilisée pour le formulaire. Les valeurs non-dépréciées sont disponibles pour iOS 5 et supérieurs. La valeur par défaut est <code>sentences</code>. Les valeurs possibles sont:
 <ul>
  <li><code>none</code> : La mise en majuscules est totalement désactivée</li>
  <li><code>sentences</code> : Les premières lettres des phrases sont automatiquement passées en majuscules.</li>
  <li><code>words</code> : La première lettre de chaque mot est automatiquement passée en majuscule.</li>
  <li><code>characters</code> : Tous les caractères sont automatiquement passés en majuscules.</li>
  <li><code>on</code> : {{deprecated_inline}} Déprécié depuis iOS 5.</li>
  <li><code>off</code> : {{deprecated_inline}} Déprécié depuis iOS 5.</li>
 </ul>
 </dd>
 <dt>{{htmlattrdef("autocomplete")}} {{HTMLVersionInline(5)}}</dt>
 <dd>Cet attribut énuméré est utilisé pour définir le comportement du navigateur quant à l'autocomplétion des champs. Cet attribut peut être surchargé par chacun des éléments du formulaire. Il peut prendre deux valeurs :
 <ul>
  <li><code>on</code> : Le navigateur peut remplir automatiquement les valeurs d'après les précédentes informations qu'a entrées l'utilisateur lors d'usages antérieurs du formulaire.</li>
  <li><code>off</code> : L'utilisateur doit remplir lui-même la valeur de chaque champ, à chaque utilisation du formulaire, ou le formulaire utilise son propre système d'auto-complétion ; le navigateur ne doit pas remplir automatiquement les valeurs.</li>
 </ul>

 <p>En son absence, sa valeur par défaut est <code>on</code>. Les éléments du formulaire peuvent bien sûr outrepasser cette valeur via leur propre attribut <code><strong>autocomplete</strong></code>.</p>

 <div class="note"><strong>Note :</strong> Si autocomplete vaut <code>off</code> dans un formulaire parce que le document fournit son propre système d'auto-complétion, il faut aussi définir <code>autocomplete</code> à <code>off</code> pour chaque élément {{HTMLElement("input")}} du formulaire. Pour plus d'informations, voir <a href="#compatChartle">le tableau de compatibilité</a>.</div>
 </dd>
 <dt>{{htmlattrdef("enctype")}}</dt>
 <dd>Lorsque la valeur de l'attribut <code>method</code> est <code>post</code>, cet attribut définit le <a href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> qui sera utilisé pour encoder les données envoyées au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :
 <ul>
  <li><code>application/x-www-form-urlencoded</code> : la valeur par défaut si l'attribut n'est pas défini</li>
  <li><code>multipart/form-data</code> : la valeur utilisée par un élément {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut "file".</li>
  <li><code>text/plain</code> {{HTMLVersionInline(5)}}, correspondant au <a class="external" href="https://fr.wikipedia.org/wiki/Type_MIME">type MIME</a> éponyme.</li>
 </ul>
 Cette valeur peut être surchargée par l'attribut {{htmlattrxref("formenctype", "button")}} des éléments {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</dd>
 <dt>{{htmlattrdef("method")}}</dt>
 <dd>Cet attribut définit la méthode <a href="/fr/docs/Web/HTTP">HTTP</a> qui sera utilisée pour envoyer les données au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :
 <ul>
  <li><code>get</code> : correspondant à la <a href="/fr/docs/Web/HTTP/Methods/GET">méthode GET</a> du protocole HTTP. Les données du formulaires sont ajoutées à l'URI de l'attribut <code>action</code> avec '?' comme séparateur. L'URI ainsi composée est ensuite enovyée vers le serveur. On utilisera cette méthode lorsque le formulaire n'a pas d'effet de bord et qu'il ne contient que des caractères ASCII.</li>
  <li><code>post</code> : correspondant à la <a href="/fr/docs/Web/HTTP/Methods/POST">méthode POST</a> du protocole HTTP, les données du formulaires sont incluses dans le corps du formulaire et envoyées vers le server.</li>
  <li><code>dialog</code> : à utiliser lorsque le formulaire est placé dans un élément {{HTMLElement("dialog")}} afin de fermer la boîte de dialogue à l'envoi du formulaire.</li>
 </ul>

 <p>Si cet attribut n'est pas défini, la valeur par défaut utilisée est <code>get</code>. Cette valeur peut-être surchargée par l'attribut {{htmlattrxref("formmethod", "button")}} des éléments {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</p>
 </dd>
 <dt>{{htmlattrdef("name")}}</dt>
 <dd>Le nom du formulaire. Dans HTML 4, cet attribut est déprécié. (<code>id</code> doit être utilisé à la place). Il doit être unique parmi tous les formulaires d'un document, et ne doit pas être une chaîne de caractères vide en HTML5.</dd>
 <dt>{{htmlattrdef("novalidate")}} {{HTMLVersionInline(5)}}</dt>
 <dd>Cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission. S'il n'est pas défini, le formulaire sera validé lors de sa soumission. Il peut être surchargé par l'attribut {{htmlattrxref("formnovalidate", "button")}} des éléments  {{HTMLElement("button")}} ou {{HTMLElement("input")}} appartenant au formulaire.</dd>
 <dt>{{htmlattrdef("target")}}</dt>
 <dd>Un nom ou un mot-clé indiquant où afficher la réponse après avoir envoyé le formulaire. Dans HTML 4, c'est le nom, ou le mot-clé, d'une frame. Dans HTML5, c'est le nom, ou le mot-clé, d'un <em>contexte de navigation</em> (onglet, fenêtre, frame). Les mots-clés suivants ont un sens particulier :
 <ul>
  <li><code>_self</code> : charge la réponse dans la même frame HTML 4 (ou le même contexte de navigation HTML5) que l'actuelle. Il s'agit de la valeur par défaut quand cet attribut n'est pas défini ;</li>
  <li><code>_parent</code> : charge la réponse dans le frameset parent HTML 4 de la frame actuelle, ou dans le contexte de navigation parent HTML5 de l'actuelle ;</li>
  <li><code>_top</code> : HTML 4 : charge la réponse dans la fenêtre complête originale, annulant toutes les autres frames. HTML5 : charge la réponse dans le contexte de navigation le plus haut (c'est-à-dire le contexte de navigation qui est l'ancêtre de l'actuel, et qui n'a aucun parent). S'il n'y a pas de parent, l'option se comporte comme <code>_self</code> ;</li>
  <li><code>_blank</code> : charge la réponse dans une fenêtre HTML 4 non nommée ou dans un contexte de navigation HTML5.</li>
 </ul>

 <p>HTML5 : Cette valeur peut être surchargée par l'attribut {{htmlattrxref("formtarget", "button")}} des éléments {{HTMLElement("button")}} ou {{HTMLElement("input")}}.</p>
 </dd>
</dl>

<h2 id="Exemples">Exemples</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;!-- Formulaire simple qui enverra une requête GET --&gt;
&lt;form action="" method="get"&gt;
  &lt;label for="GET-name"&gt;Nom :&lt;/label&gt;
  &lt;input id="GET-name" type="text" name="name"&gt;
  &lt;input type="submit" value="Enregistrer"&gt;
&lt;/form&gt;

&lt;!-- Formulaire simple qui enverra une requête POST --&gt;
&lt;form action="" method="post"&gt;
  &lt;label for="POST-name"&gt;Nom :&lt;/label&gt;
  &lt;input id="POST-name" type="text" name="name"&gt;
  &lt;input type="submit" value="Enregistrer"&gt;
&lt;/form&gt;

&lt;!-- Formulaire avec un fieldset, un legend, et un label --&gt;
&lt;form action="" method="post"&gt;
  &lt;fieldset&gt;
    &lt;legend&gt;Titre&lt;/legend&gt;
    &lt;input type="radio" name="radio" id="radio"&gt; &lt;label for="radio"&gt;Cliquez moi&lt;/label&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;
</pre>

<h3 id="Résultat">Résultat</h3>

<p>{{EmbedLiveSample("Exemples","100%",110)}}</p>

<h2 id="Résumé_technique">Résumé technique</h2>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/fr/docs/Web/HTML/Catégorie_de_contenu">Catégories de contenu</a></th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a>, contenu tangible.</td>
  </tr>
  <tr>
   <th scope="row">Contenu autorisé</th>
   <td><a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">Contenu de flux</a> qui ne contient pas d'élément <code>&lt;form&gt;</code>.</td>
  </tr>
  <tr>
   <th scope="row">Omission de balises</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Parents autorisés</th>
   <td>Tout élément qui accepte du <a href="/fr/docs/Web/HTML/Catégorie_de_contenu#Contenu_de_flux">contenu de flux</a>.</td>
  </tr>
  <tr>
   <th scope="row">Rôles ARIA autorisés</th>
   <td>{{ARIARole("group")}}, {{ARIARole("presentation")}}</td>
  </tr>
  <tr>
   <th scope="row">Interface DOM</th>
   <td>{{domxref("HTMLFormElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Spécifications">Spécifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'forms.html#the-form-element', '&lt;form&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#the-form-element', '&lt;form&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'interact/forms.html#h-17.3', '&lt;form&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilité_des_navigateurs"><a id="compatChart">Compatibilité des navigateurs</a></h2>

<div class="hidden">Ce tableau de compatibilité a été généré à partir de données structurées. Si vous souhaitez contribuer à ces données, n'hésitez pas à envoyer une <em>pull request</em> sur <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</div>

<p>{{Compat("html.elements.form")}}</p>

<h2 id="Voir_aussi">Voir aussi</h2>

<ul>
 <li><a href="/fr/docs/Web/Guide/HTML/Formulaires">Le guide sur les formulaires HTML</a></li>
 <li>Les autres éléments utilisés pour les formulaires
  <ul>
   <li>{{HTMLElement("button")}}</li>
   <li>{{HTMLElement("datalist")}}</li>
   <li>{{HTMLElement("fieldset")}}</li>
   <li>{{HTMLElement("input")}}</li>
   <li>{{HTMLElement("keygen")}}</li>
   <li>{{HTMLElement("label")}}</li>
   <li>{{HTMLElement("legend")}}</li>
   <li>{{HTMLElement("meter")}}</li>
   <li>{{HTMLElement("optgroup")}}</li>
   <li>{{HTMLElement("option")}}</li>
   <li>{{HTMLElement("output")}}</li>
   <li>{{HTMLElement("progress")}}</li>
   <li>{{HTMLElement("select")}}</li>
   <li>{{HTMLElement("textarea")}}</li>
  </ul>
 </li>
 <li>La méthode du DOM {{domxref("HTMLFormElement.elements")}} qui permet de récupérer une liste des éléments du formulaire.</li>
 <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Form_Role">ARIA : le rôle <code>form</code></a></li>
 <li><a href="/fr/docs/Web/Accessibility/ARIA/Roles/Search_Role">ARIA : le rôle <code>search</code></a></li>
</ul>