path: root/files/fr/web/api/htmlformelement/index.html

---
title: form
slug: Web/API/HTMLFormElement
tags:
  - API
  - Contrôles
  - DOM
  - Formulaire
  - HTML
  - Interface
translation_of: Web/API/HTMLFormElement
---
<div>{{APIRef("HTML DOM")}}</div>

<p>L'interface <strong><code>HTMLFormElement</code></strong> représente un élément  {{HTMLElement("form")}} dans le DOM ; il peut être utilisé pour accéder et, dans quelques cas, modifier l'aspect du formulaire, ainsi que pour accéder à ses éléments composants.</p>

<p>{{InheritanceDiagram(600,120)}}</p>

<h2 id="Propriétés">Propriétés</h2>

<p><em>Cette interface hérite aussi des propriétés de son parent {{domxref("HTMLElement")}}.</em></p>

<dl>
 <dt>{{domxref("HTMLFormElement.elements")}}{{ReadOnlyInline}}</dt>
 <dd>Un élément {{domxref("HTMLFormControlsCollection")}} regroupant les différents contrôles associés à ce formulaire.</dd>
 <dt>{{domxref("HTMLFormElement.length")}}{{ReadOnlyInline}}</dt>
 <dd>Une valeur de type <code>long</code> indiquant le nombre de contrôles dans le formulaire.</dd>
 <dt>{{domxref("HTMLFormElement.name")}}</dt>
 <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("name", "form")}} pour ce formulaire et qui correspond au nom du formulaire.</dd>
 <dt>{{domxref("HTMLFormElement.method")}}</dt>
 <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("method", "form")}} pour ce formulaire et qui correspond à la méthode HTTP utilisée pour envoyer le formulaires. Seules certaines valeurs peuvent être utilisées avec cette propriété.</dd>
 <dt>{{domxref("HTMLFormElement.target")}}</dt>
 <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("target", "form")}} pour ce formulaire et qui indique l'emplacement où seront affichées les résultats après envoi du formulaire.</dd>
 <dt>{{domxref("HTMLFormElement.action")}}</dt>
 <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("action", "form")}} pour ce formulaire et qui contient l'URI d'un programme traitant les informations transmises via le formulaire.</dd>
 <dt>{{domxref("HTMLFormElement.encoding")}} ou {{domxref("HTMLFormElement.enctype")}}</dt>
 <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("enctype", "form")}} pour ce formulaire et qui correspond au type de contenu utilisé pour transmettre les données du formulaire vers le serveur. Seules certaines valeurs peuvent être utilisées pour cette propriété. Les deux noms indiqués pour la méthode sont synonymes.</dd>
 <dt>{{domxref("HTMLFormElement.acceptCharset")}}</dt>
 <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("accept-charset", "form")}} pour ce formulaire et qui correspond au jeu de caractères / à l'encodage pris en charge par le serveur.</dd>
 <dt>{{domxref("HTMLFormElement.autocomplete")}}</dt>
 <dd>Une chaîne {{domxref("DOMString")}} indiquant la valeur de l'attribut HTML {{htmlattrxref("autocomplete", "form")}} pour ce formulaire et qui indique si les contrôles du formulaire sont automatiquement renseignés par le navigateur.</dd>
 <dt>{{domxref("HTMLFormElement.noValidate")}}</dt>
 <dd>Un booléen indiquant la valeur de l'attribut HTML {{htmlattrxref("novalidate", "form")}} pour ce formulaire et qui indique si le formulaire ne devrait pas être validé.</dd>
</dl>

<p>Les champs de saisie nommés sont ajoutés comme propriétés sur leurs formulaires associés. Ces propriétés peuvent surcharger les propriétés natives si elles utilisent le même nom ! Par exemple, un formulaire disposant d'un {{HTMLElement("&lt;input&gt;")}} nommé <code>action</code> surchargera la propriété native <code>action</code> et tout appel renverra le champ <code>input</code> plutôt que la valeur de l'attribut HTML {{htmlattrxref("action", "form")}}.</p>

<h2 id="Méthodes">Méthodes</h2>

<p><em>Cette interface hérite aussi des méthodes de son parent {{domxref("HTMLElement")}}.</em></p>

<dl>
 <dt>{{domxref("HTMLFormElement.submit()")}}</dt>
 <dd>soumet le formulaire au serveur.</dd>
 <dt>{{domxref("HTMLFormElement.reset()")}}</dt>
 <dd>redéfinit le formulaire à son état initial.</dd>
 <dt>{{domxref("HTMLFormElement.checkValidity()")}}</dt>
 <dd>renvoie <code>true</code> si les contrôles du formulaire sont soumis à des contraintes de validation et les respectent. Elle renvoie <code>false</code> si certains contrôles ne respectent pas leurs contraintes. Elle déclenche un évènement {{event("invalid")}} pour chaque contrôle qui ne respecte pas ses contraintes. De tels contrôles sont considérés invalides si l'évènement n'est pas annulé. C'est au développeur de choisir comment réagir face à la valeur <code>false</code> produite par cette méthode.</dd>
 <dt>{{domxref("HTMLFormElement.reportValidity()")}}</dt>
 <dd>renvoie <code>true</code> si les contrôles du formulaire respectent leurs contraintes de validation. Lorsque <code>false</code> est renvoyé, des évènements annulables {{Event("invalid")}} sont déclenchés pour chaque contrôle invalide et les problèmes de validation sont rapportés à l'utilisateur.</dd>
 <dt>{{domxref("HTMLFormElement.requestAutocomplete()")}} {{obsolete_inline}}</dt>
 <dd>déclenche une interface native du navigateur afin d'aider les utilisateurs à remplir les champs pour lesquels <a href="https://html.spec.whatwg.org/#autofill-field-name">la valeur nommée du champ à remplissage automatique</a> ne vaut pas <code>off</code> ou <code>on</code>. Le formulaire reçoit un évènement lorsque l'utilisateur a fini d'intéragir avec l'interface, l'événement sera {{event("autocomplete")}} si les champs ont bien été remplis ou {{event("autocompleteerror")}} s'il y a eu un problème. <strong>Cette méthode a été retirée de Chrome et Firefox — cf. {{bug(1270740)}} pour plus d'informations et les raisons associées.</strong></dd>
</dl>

<h2 id="Notes_d'utilisation">Notes d'utilisation</h2>

<h3 id="Obtention_d'un_objet_élément_de_formulaire">Obtention d'un objet élément de formulaire</h3>

<p>Pour obtenir un objet <code>HTMLFormElement</code>, vous pouvez utiliser un <a href="https://developer.mozilla.org/fr/docs/Web/CSS/S%C3%A9lecteurs_CSS">sélecteur CSS</a> avec {{domxref("ParentNode.querySelector", "querySelector()")}}  ou vous pouvez obtenir une liste de tous les formulaires du document utilisant sa propriété {{domxref("Document.forms", "forms")}}.</p>

<p>{{domxref("Document.forms")}} renvoie un tableau des objets <code>HTMLFormElement</code> listant chacun des formulaires de la page. Vous pouvez utiliser alors l'une des syntaxes suivantes pour obtenir un formulaire individuel :</p>

<dl>
 <dt><code>document.forms[<em>index</em>]</code></dt>
 <dd>renvoie le formulaire à l'<code>index</code> spécifié dans le tableau du formulaire.</dd>
 <dt><code>document.forms[<em>id</em>]</code></dt>
 <dd>renvoie le formulaire dont l'ID (<em>identifiant</em>) est <code>id</code> .</dd>
 <dt><code>document.forms[<em>name</em>]</code></dt>
 <dd>renvoie le formulaire dont la valeur d'attribut de {{domxref("Element.name", "name")}} est <code>name</code>.</dd>
</dl>

<h3 id="Accès_aux_éléments_du_formulaire">Accès aux éléments du formulaire</h3>

<p>Vous pouvez accéder à la liste des éléments contenant des données dans le formulaire en examinant la propriété {{domxref ("HTMLFormElement.elements", "elements")}}. Ceci retourne une {{domxref ("HTMLFormControlsCollection")}} listant tous les éléments d'entrée de données utilisateur du formulaire, aussi bien ceux qui sont des descendants du <code>&lt;form&gt;</code> que ceux déclarés membres du formulaire par leurs attributs.</p>

<h3 id="Éléments_considérés_comme_des_contrôles_de_formulaire">Éléments considérés comme des contrôles de formulaire</h3>

<p>Les éléments qui sont inclus par <code>HTMLFormElement.elements</code> et  <code>HTMLFormElement.length</code> sont :</p>

<ul>
 <li>{{HTMLElement("button")}} (<em>bouton</em>)</li>
 <li>{{HTMLElement("fieldset")}} (<em>champ</em>s)</li>
 <li>{{HTMLElement("input")}} (<em>entrée</em>) (à l'exception de ceux dont {{htmlattrxref("type", "input")}} est <code>"image"</code> omis pour des raisons historiques)</li>
 <li>{{HTMLElement("object")}} (<em>objet</em>)</li>
 <li>{{HTMLElement("output")}} (<em>sortie</em>)</li>
 <li>{{HTMLElement("select")}} (<em>sélection</em>)</li>
 <li>{{HTMLElement("textarea")}} (<em>zone de texte</em>)</li>
</ul>

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

<p>Crée un nouvel élément de formulaire, modifie ses attributs et l'envoie :</p>

<pre class="brush: js">var f = document.createElement("form"); // On crée un formulaire
document.body.appendChild(f);           // On l'ajoute au corps du document
f.action = "/cgi-bin/some.cgi";         // On y ajoute des attributs action et method
f.method = "POST"
f.submit();                             // On appelle la méhtode submit pour l'envoyer
</pre>

<p id="Extraction_d'informations_et_définition_d'attributs">Extrait des informations d'un élément de formulaire et définit quelques uns de ses attributs :</p>

<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>formA<span class="punctuation token">"</span></span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>/cgi-bin/test<span class="punctuation token">"</span></span> <span class="attr-name token">method</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>post<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
 <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;Appuyez sur "Info" pour les détails du formulaire, ou "Définir" pour modifier ces détails</span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
 <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>getFormInfo();<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Info<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>button<span class="punctuation token">"</span></span> <span class="attr-name token">onclick</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>setFormInfo(this.form);<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Set<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>reset<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>Reset<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span>
 <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>

 <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>textarea</span> <span class="attr-name token">id</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>form-info<span class="punctuation token">"</span></span> <span class="attr-name token">rows</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>15<span class="punctuation token">"</span></span> <span class="attr-name token">cols</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>20<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>textarea</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>script</span><span class="punctuation token">&gt;</span></span><span class="language-javascript script token">
  <span class="keyword token">function</span> <span class="function token">getFormInfo</span><span class="punctuation token">(</span><span class="punctuation token">)</span><span class="punctuation token">{</span>
    <span class="comment token">// Obtenir une référence au formulaire par son nom</span>
    <span class="keyword token">var</span> f <span class="operator token">=</span> document<span class="punctuation token">.</span>forms<span class="punctuation token">[</span><span class="string token">"formA"</span><span class="punctuation token">]</span><span class="punctuation token">;</span>
    <span class="comment token">// Les propriétés du formulaire qui nous intéressent</span>
    <span class="keyword token">var</span> properties <span class="operator token">=</span> <span class="punctuation token">[</span> <span class="string token">'elements'</span><span class="punctuation token">,</span> <span class="string token">'length'</span><span class="punctuation token">,</span> <span class="string token">'name'</span><span class="punctuation token">,</span> <span class="string token">'charset'</span><span class="punctuation token">,</span> <span class="string token">'action'</span><span class="punctuation token">,</span> <span class="string token">'acceptCharset'</span><span class="punctuation token">,</span> <span class="string token">'action'</span><span class="punctuation token">,</span> <span class="string token">'enctype'</span><span class="punctuation token">,</span> <span class="string token">'method'</span><span class="punctuation token">,</span> <span class="string token">'target'</span> <span class="punctuation token">]</span><span class="punctuation token">;</span>
    <span class="comment token">// Itérer sur les propriétés en les transformant en une chaîne que nous pouvons afficher à l'utilisateur</span>
    <span class="keyword token">var</span> info <span class="operator token">=</span> properties<span class="punctuation token">.</span><span class="function token">reduce</span><span class="punctuation token">(</span><span class="keyword token">function</span><span class="punctuation token">(</span>property<span class="punctuation token">)</span> <span class="punctuation token">{</span> <span class="keyword token">return</span> property <span class="operator token">+</span> <span class="string token">": "</span> <span class="operator token">+</span> f<span class="punctuation token">[</span>property<span class="punctuation token">]</span> <span class="punctuation token">}</span><span class="punctuation token">,</span> <span class="string token">""</span><span class="punctuation token">)</span><span class="punctuation token">.</span><span class="function token">join</span><span class="punctuation token">(</span><span class="string token">"\n"</span><span class="punctuation token">)</span><span class="punctuation token">;</span>

    <span class="comment token">// Définir les &lt;textarea&gt; du formulaire pour en afficher les propriétés</span>
    document<span class="punctuation token">.</span>forms<span class="punctuation token">[</span><span class="string token">"formA"</span><span class="punctuation token">]</span><span class="punctuation token">.</span>elements<span class="punctuation token">[</span><span class="string token">'form-info'</span><span class="punctuation token">]</span><span class="punctuation token">.</span>value <span class="operator token">=</span> info<span class="punctuation token">;</span>
  <span class="punctuation token">}</span>

  <span class="keyword token">function</span> <span class="function token">setFormInfo</span><span class="punctuation token">(</span>f<span class="punctuation token">)</span><span class="punctuation token">{</span> <span class="comment token">//L'argument doit être une référence d'élément de formulaire.</span>
    f<span class="punctuation token">.</span>action <span class="operator token">=</span> <span class="string token">"a-different-url.cgi"</span><span class="punctuation token">;</span>
    f<span class="punctuation token">.</span>name   <span class="operator token">=</span> <span class="string token">"a-different-name"</span><span class="punctuation token">;</span>
  <span class="punctuation token">}</span>
</span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>script</span><span class="punctuation token">&gt;</span></span></code></pre>

<p id="Envoyer_un_formulaire_via_une_popup">Envoi d'un formulaire dans une nouvelle fenêtre :</p>

<pre class="brush: html line-numbers  language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>!doctype</span> <span class="attr-name token">html</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>html</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>head</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>meta</span> <span class="attr-name token">charset</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>utf-8<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>title</span><span class="punctuation token">&gt;</span></span>Example new-window form submission<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>title</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>head</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>body</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>form</span> <span class="attr-name token">action</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>test.php<span class="punctuation token">"</span></span> <span class="attr-name token">target</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>_blank<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span>First name: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>firstname<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span>Last name: <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>text<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>lastname<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>password<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pwd<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>

  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>fieldset</span><span class="punctuation token">&gt;</span></span>
   <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>legend</span><span class="punctuation token">&gt;</span></span>Pet preference<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>legend</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pet<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>cat<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> Cat<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>radio<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>pet<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>dog<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span> Dog<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>fieldset</span><span class="punctuation token">&gt;</span></span>

  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>fieldset</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>legend</span><span class="punctuation token">&gt;</span></span>Owned vehicles<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>legend</span><span class="punctuation token">&gt;</span></span>

    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>vehicle<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Bike<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>I have a bike<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
    <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>input</span> <span class="attr-name token">type</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>checkbox<span class="punctuation token">"</span></span> <span class="attr-name token">name</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>vehicle<span class="punctuation token">"</span></span> <span class="attr-name token">value</span><span class="attr-value token"><span class="punctuation token">=</span><span class="punctuation token">"</span>Car<span class="punctuation token">"</span></span><span class="punctuation token">&gt;</span></span>I have a car<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>label</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>fieldset</span><span class="punctuation token">&gt;</span></span>

  <span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>p</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;</span>button</span><span class="punctuation token">&gt;</span></span>Submit<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>button</span><span class="punctuation token">&gt;</span></span><span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>p</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>form</span><span class="punctuation token">&gt;</span></span>

<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>body</span><span class="punctuation token">&gt;</span></span>
<span class="tag token"><span class="tag token"><span class="punctuation token">&lt;/</span>html</span><span class="punctuation token">&gt;</span></span></code></pre>

<h3 id="Envoi_de_formulaires_et_téléchargement_de_fichiers_en_utilisant_XMLHttpRequest">Envoi de formulaires et téléchargement de fichiers en utilisant <code>XMLHttpRequest</code></h3>

<p>Vous pouvez consulter <a href="https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Utiliser_XMLHttpRequest#Submitting_forms_and_uploading_files">ce paragraphe</a> si vous souhaitez en savoir plus pour sérialiser et envoyer un formulaire grâce à l'API {{domxref("XMLHttpRequest")}}.</p>

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

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spécification</th>
   <th scope="col">État</th>
   <th scope="col">Commentaires</th>
  </tr>
  <tr>
   <td>{{SpecName('HTML WHATWG', "forms.html#the-form-element", "HTMLFormElement")}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>Ajout de la méthode <code>requestAutocomplete()</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', "forms.html#the-form-element", "HTMLFormElement")}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>Les propriétés de l'élément renvoient un élément {{domxref("HTMLFormControlsCollection")}} plutôt qu'un {{domxref("HTMLCollection")}} (changement principalement technique). Ajout de la méthode <code>checkValidity()</code>. Ajout des propriétés <code>autocomplete</code>, <code>noValidate</code> et <code>encoding</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM2 HTML', 'html.html#ID-40002357', 'HTMLFormElement')}}</td>
   <td>{{Spec2('DOM2 HTML')}}</td>
   <td>Aucune modification.</td>
  </tr>
  <tr>
   <td>{{SpecName('DOM1', 'level-one-html.html#ID-40002357', 'HTMLFormElement')}}</td>
   <td>{{Spec2('DOM1')}}</td>
   <td>Définition initiale.</td>
  </tr>
 </tbody>
</table>

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



<p>{{Compat("api.HTMLFormElement")}}</p>

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

<ul>
 <li>L'élément HTML qui implémente cette interface {{HTMLElement("form")}}.</li>
</ul>