Les éléments <input> dont l'attribut type vaut "submit" 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.

<input type="submit" value="Envoyer le formulaire">

Valeur Une chaîne de caractères (DOMString) utilisée comme étiquette (texte) pour le bouton.
Évènements click
Attributs pris en charge type, and value
Attributs IDL value
Méthodes Aucune.

Valeur

La valeur de l'attribut value d'un élément <input type="submit"> contient une chaîne de caractères (DOMString) qui est utilisée comme étiquette pour le bouton.

<input type="submit" value="Envoyer le formulaire">

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:

<input type="submit">

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">.

Attention, si un seul élément bouton est inséré dans un formulaire (par exemple <button>Mon bouton</button>), 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 (<input type="submit">) en plus d'autres boutons que vous souhaiteriez ajouter.

Un bouton d'envoi simple

Commençons par un exemple simple :

<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

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 accesskey.

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

<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>

Note : 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.

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 :

<input type="submit" value="Disabled" disabled>

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

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

Note : À la différence des autres navigateurs, Firefox conservera un état désactivé obtenu de façon dynamique lorsque la page est rechargée. L'attribut autocomplete peut être utilisé afin de contrôler cette fonctionnalité.

Validation

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

Exemples

Voir les exemples ci-avant.

Spécifications

Spécification État
HTML Living Standard
La définition de '<input type="submit">' dans cette spécification.
Standard évolutif
HTML5
La définition de '<input type="submit">' dans cette spécification.
Recommendation

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet OuiFirefox Support complet 1
Notes
Support complet 1
Notes
Notes Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.</button>
IE Support complet OuiOpera Support complet OuiSafari Support complet 1WebView Android Support complet OuiChrome Android Support complet OuiEdge Mobile Support complet OuiFirefox Android Support complet 4
Notes
Support complet 4
Notes
Notes Unlike other browsers, Firefox by default persists the dynamic disabled state of a <button> across page loads. Use the autocomplete attribute to control this feature.</button>
Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight, cabalpit
Dernière mise à jour par : SphinxKnight,