<input type="submit">

Baseline Large disponibilité

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

Les éléments <input> de type submit sont affichés comme des boutons. Lorsqu'un évènement click se produit (généralement parce que l'utilisateur·ice a cliqué sur le bouton), l'agent utilisateur tente de soumettre le formulaire au serveur.

Valeur

La valeur de l'attribut value d'un élément <input type="submit"> contient une chaîne de caractères qui est utilisée comme étiquette pour le bouton. Les boutons n'ont pas de véritable valeur autrement. La valeur de value fournit la description accessible pour le bouton.

Définir l'attribut `value`

html

<input type="submit" value="Envoyer la requête" />

Omettre l'attribut `value`

Si vous ne définissez pas de value, le bouton aura une étiquette par défaut, choisie par l'agent utilisateur. Cette étiquette est probablement quelque chose comme « Envoyer » ou « Envoyer la requête ». Voici un exemple de bouton de soumission avec une étiquette par défaut dans votre navigateur :

html

<input type="submit" />

Attributs supplémentaires

En complément des attributs pris en charge par l'ensemble des éléments <input>, les boutons "submit" permettent d'utiliser les attributs.

`formaction`

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 action du formulaire (<form>) propriétaire du champ <input>.

Cet attribut est également disponible pour les éléments <input type="image"> et <button>.

`formenctype`

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 :

application/x-www-form-urlencoded: C'est la valeur par défaut, elle envoie les données du formulaire sous forme de chaîne de caractères après avoir encodé en pourcentage le texte en utilisant un algorithme tel que encodeURI().
multipart/form-data: Cette valeur utilise l'API FormData pour gérer les données, permettant de téléverser des fichiers sur le serveur. Vous devez utiliser un encodage de ce type s'il y a des éléments de formulaire, incluant des <input> de type file (<input type="file">).
text/plain: Les données sont envoyées comme texte simple ; ce qui vous permet de voir les données qui seront envoyées.

S'il est défini, la valeur de l'attribut formenctype remplace l'attribut enctype du formulaire propriétaire.

Cet attribut est également disponible pour les éléments <input type="image"> et <button>.

`formmethod`

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 method du formulaire. Les valeurs autorisées sont :

get: Une URL est construite en commençant avec l'URL fournie par l'attribut formaction ou action, suivie d'un point d'interrogation (« ? ») puis des données du formulaire, encodées comme indiqué avec formenctype ou enctype. Cette URL est ensuite envoyée au serveur avec une requête HTTP GET. Cette méthode fonctionne correctement pour les formulaires simples, contenant des données ASCII et sans effet de bord. C'est la valeur par défaut.
post: Les données du formulaire sont incluses dans le corps de la requête envoyée à l'URL fournie par l'attribut formaction ou action en utilisant une requête POST. Cette méthode prend en charge les données plus complexes et les pièces jointes sous forme de fichiers.
dialog: 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.

Cet attribut est également disponible pour les éléments <input type="image"> et <button>.

`formnovalidate`

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 novalidate du formulaire parent.

Cet attribut est également disponible pour les éléments <input type="image"> et <button>.

`formtarget`

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 d'un contexte de navigation (un onglet, une fenêtre ou une <iframe>). La valeur de cet attribut prendra la priorité sur celle fournie par l'attribut target du formulaire (<form>) parent.

En complément des noms des onglets, fenêtres, cadres intégrés (iframes ena anglais), quelques mots-clés spéciaux peuvent être utilisés :

_self: 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. Cette valeur est la valeur par défaut.
_blank: La réponse est chargée 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.
_parent: 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 "_self".
_top: 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 "_self".

Cet attribut est également disponible pour les éléments <input type="image"> et <button>.

Utiliser les boutons d'envoi

Les boutons <input type="submit"> 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 <button> ou un élément <input type="button">.

Si vous choisissez d'utiliser les éléments <button> pour créer les boutons dans votre formulaire, gardez ceci à l'esprit : Si le <button> se trouve à l'intérieur d'un <form>, ce bouton sera considéré comme le bouton « d'envoi du formulaire ». Il est donc recommandé de prendre l'habitude de préciser clairement quel bouton est le bouton de soumission.

Un bouton pour envoyer simple

Commençons par un exemple simple :

html

<form>
  <div>
    <label for="example">Veuillez saisir un texte</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="Envoyer" />
  </div>
</form>

Voici le résultat obtenu :

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

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 text=monTexte (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 <form> (ainsi que d'autres détails). Pour plus d'informations, vous pouvez lire Envoyer les données d'un formulaire.

Ajouter un raccourci clavier à un bouton pour envoyer

Les raccourcis clavier, aussi appelés touches d'accès et équivalents clavier, permettent à l'utilisateur·ice d'activer un bouton en appuyant sur une touche ou une combinaison de touches du clavier. Pour ajouter un raccourci clavier à un bouton d'envoi — comme vous le feriez pour tout <input> pour lequel cela a du sens — utilisez l'attribut global accesskey.

Dans cet exemple, s est défini comme touche d'accès (vous devrez appuyer sur s ainsi que sur les touches de modification particulières selon votre combinaison navigateur/OS). Pour éviter les conflits avec les raccourcis propres à l'agent utilisateur, des touches de modification différentes sont utilisées pour les touches d'accès par rapport aux autres raccourcis sur l'ordinateur hôte. Consultez accesskey pour plus de détails.

Voici l'exemple précédent avec la touche d'accès s ajoutée :

html

<form>
  <div>
    <label for="example">Veuillez saisir du texte</label>
    <input id="example" type="text" name="text" />
  </div>
  <div>
    <input type="submit" value="Envoyer" accesskey="s" />
  </div>
</form>

Par exemple, dans Firefox pour Mac, en appuyant sur Control-Option-S déclenche le bouton Envoyer, tandis que Chrome sur Windows utilise Alt+S.

Le problème de l'exemple ci‑dessus est que l'utilisateur·ice ne saura pas quelle est la touche d'accès ! Cela est d'autant plus vrai que les modificateurs sont généralement non standard afin d'éviter les conflits. Lors de la création d'un site, veillez à fournir cette information d'une manière qui n'interfère pas avec le design du site (par exemple en proposant un lien facilement accessible pointant vers une page expliquant quelles sont les touches d'accès du site). Ajouter une infobulle au bouton (en utilisant l'attribut title) peut également aider, bien que ce ne soit pas une solution complète pour l'accessibilité.

Activer et désactiver un bouton d'envoi

Si on souhaite désactiver un bouton, il sufft d'utiliser l'attribut booléen universel disabled :

html

<input type="submit" value="Envoyer" disabled />

Vous pouvez activer et désactiver les boutons dynamiquement en définissant disabled à true ou false ; en JavaScript, cela ressemble à btn.disabled = true ou btn.disabled = false.

Note : Voir la page de <input type="button"> pour plus d'exemples concernant l'activation/désactivation des boutons.

Valeur	Une chaîne de caractères utilisée comme étiquette (texte) pour le bouton.
Évènements	`click`
Attributs pris en charge	`type` et `value`
Attributs IDL	`value`
Interface DOM	`HTMLInputElement`
Méthodes	Aucune.
Rôle ARIA implicite	`button`