path: root/files/fr/web/html/element/input/submit/index.html

---
title: <input type="submit">
slug: Web/HTML/Element/Input/submit
tags:
  - Element
  - Formulaire
  - HTML
  - Input
  - Reference
translation_of: Web/HTML/Element/input/submit
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary">Les éléments {{HTMLElement("input")}} dont l'attribut <code>type</code> vaut <strong><code>"submit"</code></strong> sont affichés comme des boutons permettant d'envoyer les données d'un formulaire. Cliquer sur un tel bouton déclenchera l'envoi des données du formulaire vers le serveur.</span></p>

<div id="summary-example2">
<pre class="brush: html">&lt;input type="submit" value="Envoyer le formulaire"&gt;</pre>
</div>

<p>{{EmbedLiveSample("summary-example2", 650, 30)}}</p>

<h2 id="Valeur">Valeur</h2>

<p>La valeur de l'attribut {{htmlattrxref("value", "input")}} d'un élément <code>&lt;input type="submit"&gt;</code> contient une chaîne de caractères ({{domxref("DOMString")}}) qui est utilisée comme étiquette pour le bouton.</p>

<p>Si on n'indique aucune valeur, ce sera un texte par défaut (dépendant du navigateur) qui sera utilisé ainsi que du système d'éxploitation:</p>

<div id="summary-example1">
<pre class="brush: html">&lt;input type="submit"&gt;</pre>
</div>

<p>{{EmbedLiveSample("summary-example1", 650, 30)}}</p>

<h2 id="Attributs_supplémentaires">Attributs supplémentaires</h2>

<p>En complément des attributs pris en charge par l'ensemble des éléments {{HTMLElement("input")}}, les boutons <code>"submit"</code> permettent d'utiliser les attributs suivants :</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Attribut</th>
   <th scope="col">Description</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>{{anch("formaction")}}</code></td>
   <td>L'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire s'il est défini.</td>
  </tr>
  <tr>
   <td><code>{{anch("formenctype")}}</code></td>
   <td>Une chaîne de caractères qui indique le type d'encodage à utiliser pour les données du formulaire.</td>
  </tr>
  <tr>
   <td><code>{{anch("formmethod")}}</code></td>
   <td>La méthode HTTP ({{HTTPMethod("get")}} ou {{HTTPMethod("post")}}) à utiliser pour envoyer le formulaire.</td>
  </tr>
  <tr>
   <td><code>{{anch("formnovalidate")}}</code></td>
   <td>Un booléen qui, lorsqu'il est présent, indique que les champs du formulaire ne sont pas soumis <a href="/fr/docs/Web/Guide/HTML/HTML5/Constraint_validation">aux contraintes de validation</a> avant l'envoi des données au serveur.</td>
  </tr>
  <tr>
   <td><code>{{anch("formtarget")}}</code></td>
   <td>Le contexte de navigation dans lequel charger la réponse du serveur reçue après l'envoi du formulaire.</td>
  </tr>
 </tbody>
</table>

<h3 id="htmlattrdef(formaction)">{{htmlattrdef("formaction")}}</h3>

<p>Une chaîne de caractères représentant l'URL à laquelle envoyer les données du formulaire. Cette valeur prend le pas sur l'attribut {{htmlattrxref("action", "form")}} du formulaire ({{HTMLElement("form")}}) propriétaire du champ <code>&lt;input&gt;</code>.</p>

<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> et {{HTMLElement("button")}}.</p>

<h3 id="htmlattrdef(formenctype)">{{htmlattrdef("formenctype")}}</h3>

<p>Une chaîne de caractères qui identifie la méthode d'encodage à utiliser pour l'envoi des données du formulaire au serveur. Trois valeurs sont autorisées :</p>

<dl>
 <dt><code>application/x-www-form-urlencoded</code></dt>
 <dd>Les informations sont envoyées sous la forme d'une chaîne de caractères ajoutée à l'URL en utilisant l'algorithme de {{jsxref("encodeURI", "encodeURI()")}}. <strong>Cette valeur est la valeur par défaut.</strong></dd>
 <dt><code>multipart/form-data</code></dt>
 <dd>Cette valeur utilise l'API {{domxref("FormData")}} pour gérer les données et permet d'<em>uploader</em>des fichiers. Cet encodage <em>doit</em> être utilisé s'il y a des éléments  {{HTMLElement("input")}} de {{htmlattrxref("type", "input")}} <code>"file"</code> (<code><a href="/fr/docs/Web/HTML/Element/input/file">&lt;input type="file"&gt;</a></code>).</dd>
 <dt><code>text/plain</code></dt>
 <dd>Les données sont envoyées comme texte simple. Cette valeur est généralement utile pour déboguer car elle permet de voir facilement les données envoyées.</dd>
</dl>

<p>Si cet attribut est défini, sa valeur prend la priorité sur l'attribut {{htmlattrxref("action", "form")}} du formulaire.</p>

<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> et {{HTMLElement("button")}}.</p>

<h3 id="htmlattrdef(formmethod)">{{htmlattrdef("formmethod")}}</h3>

<p>Une chaîne de caractères qui indique la méthode HTTP à utiliser lors de l'envoi des données du formulaire. Cette valeur prend la priorité sur l'attribut {{htmlattrxref("method", "form")}} du formulaire. Les valeurs autorisées sont :</p>

<dl>
 <dt><code>get</code></dt>
 <dd>Une URL est construite en commençant avec l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}}, suivie d'un point d'interrogation puis des données du formulaire, encodées comme indiqué avec <code>formenctype</code> ou {{htmlattrxref("enctype", "form")}}. Cette URL est ensuite envoyée au serveur avec une requête HTTP {{HTTPMethod("get")}}. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. <strong>C'est la valeur par défaut.</strong></dd>
 <dt><code>post</code></dt>
 <dd>Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut <code>formaction</code> ou {{htmlattrxref("action", "form")}} en utilisant une requête {{HTTPMethod("push")}}. Cette méthode prend en charge les données plus complexes (que celles pour <code>get</code>) et les pièces jointes sous forme de fichiers.</dd>
 <dt><code>dialog</code></dt>
 <dd>Cette méthode est utilisée pour indique que le bouton permet simplement de fermer la boîte de dialogue associée au champ. Aucune donnée n'est transmise.</dd>
</dl>

<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> et {{HTMLElement("button")}}.</p>

<h3 id="htmlattrdef(formnovalidate)">{{htmlattrdef("formnovalidate")}}</h3>

<p>Un attribut booléen qui, lorsqu'il est présent, indique que le formulaire ne devrait pas être validé avant d'être envoyé au serveur. Cet attribut prend la priorité sur l'attribut {{htmlattrxref("novalidate", "form")}} du formulaire parent.</p>

<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> et {{HTMLElement("button")}}.</p>

<h3 id="htmlattrdef(formtarget)">{{htmlattrdef("formtarget")}}</h3>

<p>Une chaîne de caractères qui indique un nom ou un mot-clé qui définit où afficher la réponse reçue depuis le serveur après l'envoi du formulaire. La chaîne de caractères doit correspondre au nom <strong>d'un contexte de navigation</strong> (un onglet, une fenêtre ou une {{HTMLElement("iframe")}}). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut {{htmlattrxref("target", "form")}} du formulaire ({{HTMLElement("form")}}) parent.</p>

<p>En complément des noms des onglets, fenêtres, <em>iframes</em>, quelques mots-clés spéciaux peuvent être utilisés :</p>

<dl>
 <dt><code>_self</code></dt>
 <dd>La réponse est chargée dans le même contexte de navigation que celui contenant le formulaire. Cela remplacera le document courant avec les données reçues. <strong>Cette valeur est la valeur par défaut.</strong></dd>
 <dt><code>_blank</code></dt>
 <dd>La réponse est chargé dans un contexte de navigation vierge. Ce sera généralement un nouvel onglet dans la même fenêtre mais cela peut varier selon la configuration de l'agent utilisateur.</dd>
 <dt><code>_parent</code></dt>
 <dd>La réponse est chargée dans le contexte de navigation parent du contexte courant. S'il n'y a pas de contexte parent, cette valeur est synonyme de <code>"_self"</code>.</dd>
 <dt><code>_top</code></dt>
 <dd>La réponse est chargée dans le contexte de navigation de plus haut niveau, c'est-à-dire le contexte de navigation qui est l'ancêtre, sans parent, du contexte courant. Si le contexte courant est déjà le contexte de navigation le plus haut, cette valeur est synonyme de <code>"_self"</code>.</dd>
</dl>

<p>Cet attribut est également disponible pour les éléments <code><a href="/fr/docs/Web/HTML/Element/input/image">&lt;input type="image"&gt;</a></code> et {{HTMLElement("button")}}.</p>

<h2 id="Utiliser_les_boutons_d'envoi">Utiliser les boutons d'envoi</h2>

<p>Les boutons <code>&lt;input type="submit"&gt;</code> sont utilisés afin d'envoyer des formulaires. Si vous souhaitez créer un bouton personnalisé et adapter son comportement avec JavaScript, il sera préférable d'utiliser un élément {{HTMLElement("button")}} ou un élément <code><a href="/fr/docs/Web/HTML/Element/input/button">&lt;input type="button"&gt;</a></code>.</p>

<p>Attention, si un seul élément bouton est inséré dans un formulaire (par exemple <code>&lt;button&gt;Mon bouton&lt;/button&gt;</code>), le navigateur considèrera que ce bouton doit servir comme bouton d'envoi. Il est donc nécessaire de déclarer explicitement un bouton d'envoi (<code>&lt;input type="submit"&gt;</code>) en plus d'autres boutons que vous souhaiteriez ajouter.</p>

<h3 id="Un_bouton_pour_envoyer_simple">Un bouton pour envoyer simple</h3>

<p>Commençons par un exemple simple :</p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="example"&gt;Veuillez saisir un texte&lt;/label&gt;
    &lt;input id="example" type="text" name="text"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;input type="submit" value="Envoyer"&gt;
  &lt;/div&gt;
&lt;/form&gt;
</pre>

<p>Voici le résultat obtenu :</p>

<p>{{EmbedLiveSample("Un_bouton_pour_envoyer_simple", 650, 100)}}</p>

<p>Pour tester, vous pouvez saisir un texte dans le champ puis cliquer sur le bouton.</p>

<p>Lorsque le formulaire est envoyé, les paires formées par les noms et les valeurs seront envoyées au serveur. Dans le cas précédent, la donnée envoyée aura la forme <code>text=monTexte</code> (la deuxième partie varie selon le texte saisi). La destination et la méthode utilisées pour l'envoi des données dépend des attributs utilisés sur l'élément <code>&lt;form&gt;</code> (ainsi que d'autres détails). Pour plus d'informations, vous pouvez lire <a href="/fr/docs/Web/Guide/HTML/Formulaires/Envoyer_et_extraire_les_données_des_formulaires">Envoyer les données d'un formulaire</a>.</p>

<h3 id="Ajouter_un_raccourci_clavier">Ajouter un raccourci clavier</h3>

<p>Les raccourcis claviers permettent à l'utilisateur d'utiliser une touche du clavier ou une combinaison de touches afin de déclencher l'action d'un bouton. Pour ajouter un raccourci à un bouton d'envoi, on peut utiliser l'attribut universel {{htmlattrxref("accesskey")}}.</p>

<p>Dans l'exemple qui suit, on définit <kbd>s</kbd> comme raccourci (autrement dit, il faudra appuyer sur la touche <kbd>s</kbd> avec une ou plusieurs touches supplémentaires qui dépendent du navigateur et du système d'exploitation, cf. {{htmlattrxref("accesskey")}} pour la liste de ces touches).</p>

<pre class="brush: html">&lt;form&gt;
  &lt;div&gt;
    &lt;label for="example"&gt;Veuillez saisir du texte&lt;/label&gt;
    &lt;input id="example" type="text" name="text"&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;input type="submit" value="Envoyer"
     accesskey="s"&gt;
  &lt;/div&gt;
&lt;/form&gt;</pre>

<p>{{EmbedLiveSample("Ajouter_un_raccourci_clavier", 650, 100)}}</p>

<div class="note">
<p><strong>Note </strong>: Un problème de cet exemple est que l'utilisateur ne saura pas quelle touche utiliser comme raccourci. Dans un cas concret, cette information serait affichée ou fournie via un lien simple d'accès qui décrirait les raccourcis disponibles.</p>
</div>

<h3 id="Activer_et_désactiver_un_bouton_d'envoi">Activer et désactiver un bouton d'envoi</h3>

<p>Si on souhaite désactiver un bouton, il sufft d'utiliser l'attribut booléen universel {{htmlattrxref("disabled")}} :</p>

<div id="disable-example1">
<pre class="brush: html">&lt;input type="submit" value="Disabled" disabled&gt;</pre>
</div>

<p>Pour activer / désactiver le bouton dynamiquement, on pourra manipuler l'attribut DOM <code>disabled</code> avec la valeur <code>true</code> ou <code>false</code> en JavaScript (avec une instruction similaire à <code>btn.disabled = true</code>).</p>

<div class="note">
<p><strong>Note </strong>: Voir la page <code><a href="/fr/docs/Web/HTML/Element/Input/button#Désactiver_et_activer_un_bouton">&lt;input type="button"&gt;</a></code> pour plus d'exemples concernant l'activation/désactivation des boutons liés à un formulaire.</p>
</div>

<div class="note">
<p><strong>Note </strong>: À la différence des autres navigateurs, <a href="https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing">Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée</a>. L'attribut {{htmlattrxref("autocomplete","button")}} peut être utilisé afin de contrôler cette fonctionnalité.</p>
</div>

<h2 id="Validation">Validation</h2>

<p>Il n'existe pas de mécanisme de validation natif côté client pour les boutons d'envoi de formulaires.</p>

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

<p>Voir les exemples ci-avant.</p>

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

<table class="properties">
 <tbody>
  <tr>
   <td><strong>{{anch("Valeur")}}</strong></td>
   <td>Une chaîne de caractères ({{domxref("DOMString")}}) utilisée comme étiquette (texte) pour le bouton.</td>
  </tr>
  <tr>
   <td><strong>Évènements</strong></td>
   <td>{{event("click")}}</td>
  </tr>
  <tr>
   <td><strong>Attributs pris en charge</strong></td>
   <td>{{htmlattrxref("type", "input")}}, and {{htmlattrxref("value", "input")}}</td>
  </tr>
  <tr>
   <td><strong>Attributs IDL</strong></td>
   <td><code>value</code></td>
  </tr>
  <tr>
   <td><strong>Méthodes</strong></td>
   <td>Aucune.</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#submit-button-state-(type=submit)', '&lt;input type="submit"&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'forms.html#submit-button-state-(type=submit)', '&lt;input type="submit"&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

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

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

<p>{{Compat("html.elements.input.input-submit")}}</p>

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

<ul>
 <li>L'élément {{HTMLElement("input")}} et l'interface DOM {{domxref("HTMLInputElement")}} qu'il implémente</li>
 <li>L'élément {{HTMLElement("button")}}.</li>
 <li><a href="/fr/docs/Learn/HTML/Forms_and_buttons">Apprendre les formulaires et les boutons</a></li>
 <li><a href="/fr/docs/Web/Accessibility/ARIA/forms">L'accessibilité et les formulaires</a></li>
 <li><a href="/fr/docs/Learn/HTML/Forms">Les formulaires HTML</a></li>
</ul>