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 serveuras submit buttons — clicking one will attempt to submit the form to the sever.

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

<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

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins)[1] (Oui) (Oui) 1.0
Fonctionnalité Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) 4.0 (4.0)[1] (Oui) (Oui) (Oui)

[1] À la différence des autres navigateurs, Firefox conservera un état désactivé placé dynamiquement malgré les rechargements sur la page. L'attribut autocomplete permet de contrôler cette fonctionnalité.

Voir aussi

Étiquettes et contributeurs liés au document

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