L'élément HTML <button> est utilisé afin de créer un contrôle interactif ayant la forme d'un bouton et qui pourra être utilisé dans un formulaire ou dans le document.

Par défaut, les boutons HTML sont mis en forme avec les styles natifs provenant du système d'exploitation mais leur apparence peut être adaptée grâce à CSS.

Catégories de contenu Contenu de flux, contenu phrasé, contenu interactif, listable, étiquettable, soumettable, contenu associé aux formulaires et contenu tangible.
Contenu autorisé Contenu phrasé mais sans contenu interactif.
Omission de balises Aucune, la balise d'ouverture et la balise de fermeture sont obligatoires
Parents autorisés Tout élément acceptant du contenu phrasé.
Rôles ARIA autorisés checkbox, link, menuitem, menuitemcheckbox, menuitemradio, radio, switch, tab.
Interface DOM HTMLButtonElement
Type d'élément En ligne

Attributs

Cet élément peut utiliser les attributs universels.

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 automatiquement avoir le focus 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
Pour l'élément <button>, 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é (cf. bug 654072 pour plus d'informations).
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 (par exemple 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 si é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, le bouton est rattaché à 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 un descendant d'éléments <form>.
formaction HTML5

Cet attribut indique l'URI à laquelle le formulaire doit être soumis si le contrôle est activé. Si l'attribut n'est pas indiqué, l'attribut action de l'élément <form> étant le plus proche ancêtre de cet élément est pris en compte. Si les deux sont absents, 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 à valeur contrainte qui peut prendre les valeurs suivantes :
  • application/x-www-form-urlencoded : la valeur par défaut.
  • multipart/form-data, (utilisez cet valeur si vous utilisez un <input> avec un attribut type défini à file.)
  • text/plain

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é. 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 à valeur contrainte 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. C'est cette valeur qui doit être utilisée si le bouton n'est pas utilisé pour envoyer un formulaire.
  • menu : le bouton ouvre un menu (correspondant à l'élément <menu> associé).

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.

Exemples

HTML

<button name="button">Cliquez sur moi :)</button>

Résultat

Accessibilité

Boutons avec une icône

Les boutons qui reposent uniquement sur une icône pour représenter une fonctionnalité n'ont pas de nom accessible. Un nom accessible permet à un outil d'assistance (un lecteur d'écran par exemple) de générer un arbre d'accessibilité correct lors de l'analyse du document. Les outils d'assistance utilisent cet arbre d'accessibilité pour permettre aux utilisateurs de naviguer et d'utiliser le contenu de la page.

Afin de fournir un nom accessible pour un bouton, on fournira un contenu texte dans l'élément qui décrit, de façon concise, la fonctionnalité offerte par le bouton.

Exemple

<button name="favorite" type="button">
  <svg aria-hidden="true" viewBox="0 0 10 10"><path d="m7.4 8.8-2.4-1.3-2.4 1.3.46-2.7-2-1.9 2.7-.39 1.2-2.5 1.2 2.5 2.7.39-1.9 1.9z"/></svg>
  Add to favorites
</button>

Si on souhaite que le texte du bouton ne soit pas visible, on peut le faire de façon accessible grâce à une combinaison de propriétés qui permettent de le masquer visuellement mais qui permet toujours aux technologies d'assistance de l'analyser.

Toutefois, on notera que laisser le texte visible permettra aux personnes qui ne sont pas familières avec l'application de comprendre le rôle du bouton. Cela vaut particulièrement pour les personnes qui utilisent peu la technologie ou dont la culture apporte une autre interprétation aux images utilisées.

Proximité

Lorsque de nombreux contrôles interactifs (dont les boutons) sont placés les uns à côté des autres, il est nécessaire d'aovir un espace suffisant entre chaque. Cet espacement permet aux personnes souffrant de troubles musculaires ou qui utilise des stylets buccaux d'éviter d'activer le mauvais contrôle.

Un tel espacement peut être créé grâce à des propriétés CSS comme margin.

Firefox

Firefox ajoute un bordure en pointillés sur le bouton qui a le focus. Cette bordure est ajoutée via la feuille de style du navigateur et il est possible de la surcharger avec son propre style via button::-moz-focus-inner { }.

Si ce comportement est surchagé, il est nécessaire de vérifier que le changement de focus est clairement perceptible, y compris lorsque la vision ou les conditions d'éclairage réduisent la visibilité du document.

Le ratio de contraste est calculé en comparant la luminosité de la couleur du texte et celle de l'arrière-plan. Afin de respecter les préconisations d'accessibilité sur le Web (WCAG), un ratio minimal de 4.5:1 est obligatoire pour le contenu textuel normal et un ratio minimal de 3:1 est obligatoire pour grands textes ou les titres. Un grand texte est défini comme un texte qui mesure 18.66px et qui est en gras ou comme un texte qui mesure 24px ou plus.

Spécifications

Spécification État Commentaires
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

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple Oui Oui Oui Oui Oui Oui
autofocus5 Oui4109.65
autocomplete Non Non Oui Non Non Non
disabled Oui Oui Oui Oui Oui Oui
form Oui16 Oui Non Oui Oui
formaction9 Oui410 ? ?
formenctype9 Oui41010.6 ?
formmethod9 Oui410 ? ?
formnovalidate Oui Oui Oui Oui Oui Oui
formtarget Oui Oui Oui Oui Oui Oui
name Oui Oui Oui Oui Oui Oui
type Oui Oui Oui Oui Oui Oui
value Oui Oui Oui Oui Oui Oui
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple Oui Oui Oui Oui Oui Oui Oui
autofocus ? ? ?4 ? ? ?
autocomplete Non Non Non Oui Non Non Non
disabled Oui Oui Oui Oui Oui Oui Oui
form Oui Oui Oui Oui Oui Oui Oui
formaction ? ? Oui4 ? ? ?
formenctype ? ? Oui4 ? ? ?
formmethod ? ? Oui4 ? ? ?
formnovalidate Oui Oui Oui Oui Oui Oui Oui
formtarget Oui Oui Oui Oui Oui Oui Oui
name Oui Oui Oui Oui Oui Oui Oui
type Oui Oui Oui Oui Oui Oui Oui
value Oui Oui Oui Oui Oui Oui Oui

Voir aussi

Étiquettes et contributeurs liés au document

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