Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Résumé

L'élément HTML <button> (pour bouton) est utilisé afin de créer un contrôle interactif ayant la forme d'un bouton.

Attributs

Cet élément peut utiliser les attributs globaux.

autofocus HTML5
Cet attribut booléen, qui ne doit être défini qu'une fois par document, indique au navigateur que cet élément doit avoir le focus automatiquement lorsque la page est chargée. Cela permet d'utiliser immédiatement ce bouton, via un raccourci clavier par exemple, sans avoir à cliquer au préalable dans le contrôle adéquat.
autocomplete
Cet attribut propre à Firefox n'est pas standard. Par défaut et à la différence des autres navigateurs, Firefox conserve l'état de désactivation d'un bouton d'un élément <button> au fur et à mesure des chargements d'une page. Utiliser cet attribut avec la valeur off (i.e. autocomplete="off") désactive cette fonctionnalité. Pour plus d'informations, voir bug 654072.
disabled
La présence de cet attribut booléen indique que le contrôle est désactivé, c'est-à-dire non modifiable. Il apparaît souvent en grisé dans les navigateurs et ne reçoit plus les événements de navigation comme un clic de souris ou ceux en relation avec le focus. S'il n'est pas défini, l'élément peut malgré tout hériter cet état de ses ancêtres, par exemple par élément <fieldset> désactivé. Par défaut le bouton sera activé.
À la différence des autres navigateurs, Firefox conservera par défaut l'état de désactivation d'un bouton même après un rechargement. Pour contrôler ce comportement, on utilisera l'attribut autocomplete présenté ci-avant.
form HTML5
Cet attribut contient l'attribut id de l'élément <form> auquel celui-ci est rattaché. Par défaut, il l'est à l'élément <form> qui est son plus proche ancêtre. Cet attribut permet à un bouton d'être placé n'importe où dans le document et pas seulement comme descendant d'éléments <form>.
formaction HTML5

Lorsque l'attribut type possède la valeur submit, cet attribut indique l'URI à laquelle le formulaire doit être soumis si le contrôle est activé. S'il n'est pas mis, l'attribut action de l'élément <form> qui est le plus proche ancêtre de cet élément est pris en compte. En leur absence à tous les deux, l'URI sera une chaîne vide.

Si cet attribut est défini, il écrasera l'attribut action du formulaire rattaché au bouton.

formenctype HTML5
Lorsque l'attribut type possède la valeur submit, cet attribut définit le type MIME qui sera utilisée pour encoder les données envoyées au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :
  • application/x-www-form-urlencoded,
  • multipart/form-data, (utilisez cet valeur si vous utilisez un <input> avec un attribut type défini à file.)
  • text/plain,

correspondant au type MIME éponyme.

Si cet attribut n'est pas défini, c'est la valeur de l'attribut enctype de l'élément <form> qui est le plus proche ancêtre de cet élément qui est utilisé. En son absence, la valeur par défaut utilisée est application/x-www-form-urlencoded.

Si cet attribut est défini, il écrasera l'attribut enctype du formulaire rattaché au bouton.

formmethod HTML5
Lorsque l'attribut type possède la valeur submit, cet attribut définit la méthode HTTP qui sera utilisée pour envoyer les données au serveur. C'est un attribut énuméré qui peut prendre les valeurs suivantes :

Si cet attribut n'est pas défini, c'est la valeur de l'attribut method de l'élément <form> qui est le plus proche ancêtre de cet élément qui est utilisé. En son absence, la valeur par défaut utilisée est GET.

Si cet attribut est défini, il écrasera l'attribut method du formulaire rattaché au bouton.

formnovalidate HTML5

Lorsque l'attribut type possède la valeur submit, cet attribut booléen indique si le formulaire doit être validé au moment de sa soumission. S'il n'est pas mis, l'attribut novalidate de l'élément <form> qui est le plus proche ancêtre de cet élément est pris en compte. En leur absence à tous les deux, le formulaire sera validé.

Si cet attribut est défini, il écrasera l'attribut novalidate du formulaire rattaché au bouton.

formtarget HTML5
Lorsque l'attribut type possède la valeur submit, cet attribut indique le contexte de navigation (onglet, fenêtre, frame) associé avec le formulaire, sa cible. Outre un attribut id valide du document, il peut prendre l'une de ces valeurs particulières:
  • _self où la cible sera le contexte actuel;
  • _parent où la cible sera le contexte hiérarchiquement au-dessus du contexte actuel (où le contexte actuel, s'il n'y en a pas);
  • _top où la cible sera le contexte hiérarchiquement le plus au-dessus du contexte actuel (typiquement l'onglet courant);
  • _blank où la cible sera un nouveau contexte proche, c'est-à-dire facilement atteignable, du contexte actuel (un nouvel onglet ou une nouvelle fenêtre par exemple).

S'il n'est pas mis, l'attribut target de l'élément <form> qui est le plus proche ancêtre de cet élément est pris en compte. En leur absence à tous les deux, la cible sera déterminée par l'attribut target du premier élément <base> descendant de l'élément <head> du document. S'il n'y en a pas, la cible sera la chaîne vide.

Si cet attribut est défini, il écrasera l'attribut target du formulaire rattaché au bouton.

name
Le nom du contrôle, qui sera soumis avec les données du formulaire.
type
Le type du bouton. Le type par défaut si cet attribut énuméré n'est pas spécifié est submit. Les valeurs, et les actions associées, possibles sont :
  • submit : l'activation du bouton entraîne la soumission du formulaire au serveur distant (après validation des contraintes du formulaire);
  • reset : l'activation du bouton entraîne la réinitialisation du formulaire et dans ce cas-là, l'élément est exclu de la validation des contraintes;
  • button : l'activation du bouton n'entraîne aucun action automatique et dans ce cas-là également, l'élément est exclu de la validation des contraintes.

Si l'attribut disabled est activé, aucune action n'a lieu.

value
Cet attribut contient la valeur de ce bouton en rapport avec la soumission du formulaire; il n'est ajouté aux données envoyées au serveur que si le bouton a été utilisée pour initier l'envoi.

Exemple

<button name="button">Click me</button>

Notez que des styles CSS ont été appliqués à ce bouton.

Spécifications

Spécification Statut Commentaire
WHATWG HTML Living Standard
La définition de '<button>' dans cette spécification.
Standard évolutif  
HTML5
La définition de '<button>' dans cette spécification.
Recommendation  
HTML 4.01 Specification
La définition de '<button>' dans cette spécification.
Recommendation  

Compatibilité des navigateurs

Fonction Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple 1.0 1.0 (1.7 ou moins) (Oui) (Oui) (Oui)
Attribut formaction 9.0 4.0 (2.0) 10 ? ?
Attribut formenctype 9.0 4.0 (2.0) 10 10.6 ?
Attribut formmethod 9.0 4.0 (2.0) 10 ? ?
Attribut autofocus 5.0 4.0 (2.0) 10 9.6 5.0
Fonction Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) 1.0 (1.0) (Oui) (Oui) (Oui)
Attribut formaction ? 4.0 (2.0) ? ? ?
Attribut formenctype ? 4.0 (2.0) ? ? ?
Attribut formmethod ? 4.0 (2.0) ? ? ?

Le clic et le focus

La réception du focus (par défaut) suite à un clic sur un élément <button> varie selon le navigateur et le système d'exploitation.

Est-ce que le clic sur un élément <button> donne le focus ?
Navigateurs pour ordinateurs Windows 8.1 OS X 10.9
Firefox 30.0 Oui Non (même avec tabindex)
Chrome 35 Oui Oui
Safari 7.0.5 N/A Non (même avec tabindex)
Internet Explorer 11 Oui N/A
Presto (Opera 12) Oui Oui
Est-ce qu'une sélection au doigt sur un élément <button> donne le focus ?
Navigateurs mobiles iOS 7.1.2 Android 4.4.4
Safari Mobile Non (même avec tabindex) N/A
Chrome 35 ??? Oui

Notes

  • Les éléments <button> sont beaucoup plus facile à styler que les éléments <input>. Vous pouvez y ajouter du contenu HTML (pensez à <strong>, <em> ou encore à <img>) et utilisez les pseudo-éléments :after et :before pour réaliser un rendu encore plus complexe. Alors que l'élément <input> n'accepte qu'un attribut textuel.
  • IE7 a un bug quand vous soumettez un formulaire avec <button type="submit" name="monBouton" value="foo">Cliquez-moi</button>, la donnée POST envoyée sera in monBouton=Cliquez-moi au lieu de monBouton=foo. IE6 a une version bien plus horrible du bug, où la soumission du formulaire par un bouton, soumettra TOUS les boutons du formulaire, avec le même bug que IE7. Ce bug a été résolu avec IE8.
  • Firefox rajoutera, pour des questions d'accessibilité, une fine bordure pointillée autours du bouton avec le focus. Cette bordure est déclarée en CSS, dans la feuille du style du navigateur. Mais vous pouvez la surcharger si nécessaire pour ajouter votre propre style de focus en utilisant button::-moz-focus-inner { }
  • À la différence des autres navigateurs, pour Firefox, par défaut, l'état de désactivation persistera malgré le rechargement de la page pour un élément <button>. Pour éviter ce comportement, on pourra utiliser l'attribut autocomplete et lui donner la valeur off pour désactiver cette fonctionnalité. Voir bug 654072.

  • Les versions de Firefox pour Android antérieures à la version 35 applique un gradient de background-image sur tous les boutons (voir bug 763671). Cela peut être désactivé avec background-image: none.

Voir aussi

Les autres éléments utilisés pour créer des formulaires : <form>, <datalist>, <fieldset>, <input>,<keygen>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Chealer, marie-ototoi, SphinxKnight, arnaudb, FredB, tregagnon, ethertank, teoli
 Dernière mise à jour par : Chealer,