L'élémentHTML<button> est un élément interactif qui peut être activé avec une souris, un clavier, un doigt, une commande vocale ou tout autre technologie d'assistance. Une fois activé, il peut déclencher une action tel qu'envoyer unformulaire ou ouvrir une boite de dialogue.

Par défaut, les boutons HTML sont présentés dans un style ressemblant à la plate-forme d'exécution del'agent utilisateur, mais vous pouvez modifier l'apparence des boutons avecCSS.

Exemple interactif

<button type="button">Ajouter aux favoris</button>

.styled {  border: 0;  line-height: 2.5;  padding: 0 20px;  font-size: 1rem;  text-align: center;  color: white;  text-shadow: 1px 1px 1px black;  border-radius: 10px;  background-color: tomato;  background-image: linear-gradient(    to top left,    rgb(0 0 0 / 0.2),    rgb(0 0 0 / 0.2) 30%,    transparent  );  box-shadow:    inset 2px 2px 3px rgb(255 255 255 / 0.6),    inset -2px -2px 3px rgb(0 0 0 / 0.6);}.styled:hover {  background-color: red;}.styled:active {  box-shadow:    inset -2px -2px 3px rgb(255 255 255 / 0.6),    inset 2px 2px 3px rgb(0 0 0 / 0.6);}

Attributs

Cet élément inclut lesattributs universels.

autofocus

Cet attribut booléen indique que le bouton doit recevoir lefocus lors du chargement de la page.Un seul élément dans un document peut avoir cet attribut.

command

Définit l'action à effectuer sur un élément contrôlé par un bouton<button> via l'attributcommandfor. Les valeurs possibles sont :

"show-modal"

Le bouton affichera un élément<dialog> en mode modale. Si la boîte de dialogue est déjà modale, aucune action ne sera effectuée. C'est l'équivalent déclaratif de l'appel à la méthodeHTMLDialogElement.showModal() sur l'élément<dialog>.

"close"

Le bouton fermera un élément<dialog>. Si la boîte de dialogue est déjà fermée, aucune action ne sera effectuée. C'est l'équivalent déclaratif de l'appel à la méthodeHTMLDialogElement.close() sur l'élément<dialog>.

"request-close"

Le bouton déclenchera un événementcancel sur un élément<dialog> pour demander au navigateur de le fermer, suivi d'un événementclose. Cela diffère de la commandeclose car les auteur·ice·s peuvent appelerEvent.preventDefault() sur l'événementcancel pour empêcher la fermeture du<dialog>. Si la boîte de dialogue est déjà fermée, aucune action ne sera effectuée. C'est l'équivalent déclaratif de l'appel à la méthodeHTMLDialogElement.requestClose() sur l'élément<dialog>.

"show-popover"

Le bouton affichera un élément contextuel flottant (popover en anglais) caché. Si vous essayez d'afficher un élément contextuel flottant déjà affiché, aucune action ne sera effectuée. Voirl'API Popover pour plus de détails. Ceci est équivalent à la valeurshow pour l'attributpopovertargetaction, et fournit également un équivalent déclaratif à l'appel de la méthodeHTMLElement.showPopover() sur l'élément contextuel flottant.

"hide-popover"

Le bouton masquera un élément contextuel flottant (popover en anglais) affiché. Si vous essayez de masquer un élément contextuel flottant déjà caché, aucune action ne sera effectuée. Voirl'API Popover pour plus de détails. C'est équivalent à la valeurhide pour l'attributpopovertargetaction, et fournit aussi un équivalent déclaratif à l'appel de la méthodeHTMLElement.hidePopover() sur l'élément contextuel flottant.

"toggle-popover"

Le bouton basculera l'affichage d'un élément contextuel flottant (popover en anglais) entre visible et caché. Si l'élément contextuel flottant est caché, il sera affiché ; s'il est affiché, il sera caché. Voirl'API Popover pour plus de détails. C'est équivalent à la valeurtoggle pour l'attributpopovertargetaction, et fournit aussi un équivalent déclaratif à l'appel de la méthodeHTMLElement.togglePopover() sur l'élément contextuel flottant.

Valeurs personnalisées

Cet attribut peut représenter des valeurs personnalisées préfixées par deux tirets (--). Les boutons avec une valeur personnalisée déclencheront unCommandEvent sur l'élément contrôlé.

commandfor

Transforme un élément<button> en bouton de commande, contrôlant un élément interactif donné en émettant la commande définie dans l'attributcommand du bouton. L'attributcommandfor prend comme valeur l'identifiant de l'élément à contrôler. Il s'agit d'une version plus générale depopovertarget.

disabled

Cet attribut booléen empêche l'utilisateur·ice d'interagir avec le bouton : il ne peut pas être pressé ni sélectionné.

form

L'élément<form> auquel associer le bouton (sonpropriétaire de formulaire). La valeur de cet attribut doit être l'identifiant (id) d'un<form> dans le même document. (Si cet attribut n'est pas défini, le<button> est associé à son ancêtre<form>, s'il existe.)

Cet attribut permet d'associer des éléments<button> à des<form> n'importe où dans le document, pas seulement à l'intérieur d'un<form>. Il peut aussi remplacer un élément<form> ancêtre.

formaction

L'URL qui traite les informations soumises par le bouton. Remplace l'attributaction du propriétaire du formulaire du bouton. Ne fait rien s'il n'y a pas de propriétaire de formulaire.

formenctype

Si le bouton est un bouton de soumission (il est à l'intérieur ou associé à un<form> et n'a pastype="button"), définit la façon dont les données du formulaire sont encodées lors de la soumission. Valeurs possibles :

• application/x-www-form-urlencoded : La valeur par défaut si l'attribut n'est pas utilisé.
• multipart/form-data : Utilisé pour soumettre des éléments<input> dont l'attributtype est défini àfile.
• text/plain : Définie comme aide au débogage ; ne doit pas être utilisé pour une soumission réelle de formulaire.

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

formmethod

Lorsque l'attributtype possède la valeursubmit (explicitement ou comme valeur par défaut), cet attribut définit lamé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 :

• post : Les données du formulaire sont incluses dans le corps de la requête HTTP lorsqu'elles sont envoyées au serveur. À utiliser lorsque le formulaire contient des informations qui ne devraient pas être publiques, comme les identifiants de connexion.
• get : Les données du formulaire sont ajoutées à l'URLaction du formulaire, avec un? comme séparateur, et l'URL résultante est envoyée au serveur. Utilisez cette méthode lorsque le formulairen'a pas d'effets secondaires, comme les formulaires de recherche.
• dialog : Cette méthode permet d'indiquer que le bouton fermel'élément<dialog> auquel il est associé, et n'envoie pas de données du formulaire.

S'il est défini, cet attribut remplace l'attributmethod du formulaire rattaché au bouton.

formnovalidate

Si le bouton est un bouton de soumission, cet attribut booléen indique que le formulaire ne doit pas êtrevalidé lors de sa soumission. Si cet attribut est défini, il remplace l'attributnovalidate du propriétaire du formulaire du bouton.

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

formtarget

Lorsque l'attributtype possède la valeursubmit, cet attribut indique le contexte de navigation (onglet, fenêtre, frame) associé avec le formulaire, sa cible. Outre un attributid valide du document, il peut prendre l'une de ces valeurs particulières:

• _self : Charge la réponse dans le même contexte de navigation que le contexte actuel. Il s'agit de la valeur par défaut si l'attribut n'est pas défini.
• _blank : Charge la réponse dans un nouveau contexte de navigation sans nom — généralement un nouvel onglet ou une nouvelle fenêtre, selon les paramètres du navigateur de l'utilisateur·ice.
• _parent : Charge la réponse dans le contexte de navigation parent de celui en cours. S'il n'y a pas de parent, cette option se comporte de la même manière que_self.
• _top : Charge la réponse dans le contexte de navigation de niveau supérieur (c'est-à-dire le contexte de navigation qui est un ancêtre du contexte actuel, et qui n'a pas de parent). S'il n'y a pas de parent, cette option se comporte de la même manière que_self.

interestforExpérimentalNon standard

Définit l'élément<button> comme uninvocateur d'intérêt (interest invoker). Sa valeur est l'id de l'élément cible, qui sera affecté d'une manière ou d'une autre (généralement affiché ou masqué) lorsque l'intérêt est montré ou perdu sur l'élément invocateur (par exemple au survol/fin de survol ou à la sélection/perte de sélection). VoirUtilisation des invocateurs d'intérêt pour plus de détails et d'exemples.

name

Le nom du bouton, soumis en tant que paire avec la valeur (value) du bouton comme partie des données du formulaire.

popovertarget

Transforme un<button> en un élément de contrôle d'un élément contextuel flottant (popover en anglais) ; il prend comme valeur l'id de l'élément élément contextuel flottant à contrôler. Voir la page surl'API Popover pour plus de détails.

popovertargetaction

Définit l'action à effectuer sur l'élément contextuel flottant (popover en anglais) cible lorsqu'un bouton est activé. Les valeurs possibles sont :

"hide"

Le bouton masquera l'élément contextuel flottant cible. Si l'élément contextuel flottant cible est déjà masqué, rien ne se passera.

"show"

Le bouton affichera l'élément contextuel flottant cible. Si l'élément contextuel flottant cible est déjà affiché, rien ne se passera.

"toggle"

Le bouton affichera l'élément contextuel flottant cible s'il est masqué, ou le masquera s'il est affiché. Sipopovertargetaction n'est pas défini, le bouton se comportera comme s'il avait la valeur"toggle".

type

Le comportement par défaut du bouton. Les valeurs possibles sont :

• submit : Le bouton soumet les données du formulaire au serveur. C'est la valeur par défaut si l'attribut n'est pas défini pour les boutons associés à un<form>, ou si l'attribut est une valeur vide ou invalide.
• reset : Le bouton réinitialise tous les contrôles à leur valeur initiale, comme<input type="reset">. (Ce comportement a tendance à agacer les utilisateur·ice·s).
• button : Le bouton n'a pas de comportement par défaut et ne fait rien lorsqu'il est pressé par défaut. Les scripts côté client peuvent écouter les événements de l'élément, qui sont déclenchés lorsque les événements se produisent.

value

Définit la valeur associée auname du bouton lorsqu'il est soumis avec les données du formulaire. Cette valeur est transmise au serveur en paramètres lorsque le formulaire est soumis.

Notes

Un bouton de soumission avec l'attributformaction défini, mais sans formulaire associé ne fait rien. Vous devez définir un formulaire rattaché, soit en l'enveloppant dans un<form>, soit en définissant la valeur de l'attributform avec l'identifiant du formulaire.

Les éléments<button> sont beaucoup plus faciles à mettre en forme que les éléments<input>. Vous pouvez ajouter du contenu HTML interne (pensez à<i>,<br>, ou même<img>), et utiliser les pseudo-éléments::after et::before pour un rendu complexe.

Si vos boutons ne servent pas à soumettre des données de formulaire à un serveur, assurez-vous de définir leur attributtype àbutton. Sinon, ils tenteront de soumettre des données de formulaire et de charger la réponse (inexistante), détruisant éventuellement l'état actuel du document.

Bien que<button type="button"> n'ait pas de comportement par défaut, on peut utiliser des gestionnaires d'évènements scriptés pour déclencher certaines actions. Un bouton pourra déclencher des actions grâce àJavaScript, par exemple pour retirer un élément d'une liste.

Par défaut, les agents utilisateurs appliquent le styledisplay: flow-root aux boutons, ce qui établit uncontexte de formatage de bloc et centre les enfants du bouton horizontalement et verticalement tant qu'ils ne débordent pas. Si le bouton est défini comme conteneur flex ou grid, ses enfants se comporteront comme des éléments flex ou grid. Un bouton avecdisplay: inline sera stylisé comme si la valeur étaitdisplay: inline-block.

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 unarbre d'accessibilité correct lors de l'analyse du document. Les outils d'assistance utilisent cet arbre d'accessibilité pour permettre aux utilisateur·ice·s de naviguer et d'utiliser le contenu de la page.

Pour fournir un nom accessible à un bouton icône, il faut placer un texte dans l'élément<button> qui décrit de façon concise la fonctionnalité offerte par le bouton.

Exemples

<button name="favorite">  <svg fill="black" viewBox="0 0 42 42">    <path      d="M21,1c1.081,0,5.141,12.315,6.201,13.126s13.461,1.053,13.791,2.137 c0.34,1.087-9.561,8.938-9.961,10.252c-0.409,1.307,      3.202,13.769,2.331,14.442c-0.879,0.673-11.05-6.79-12.361-6.79 c-1.311,0-11.481,7.463-12.36,6.79c-0.871-0.674,2.739-13.136,      2.329-14.442c-0.399-1.313-10.3-9.165-9.96-10.252 c0.33-1.084,12.731-1.326,13.791-2.137S19.91,1,21,1z"></path>  </svg>  Ajouter aux favoris</button>

Résultat

Si vous souhaitez masquer visuellement le texte du bouton, il existe une méthode accessible qui consiste à utiliserune combinaison de propriétés CSS^(angl.) pour le retirer visuellement de l'écran tout en le laissant accessible aux technologies d'assistance.

Cependant, il est important de noter que laisser le texte du bouton visible peut aider les personnes qui ne sont pas familières avec la signification de l'icône ou qui ne comprennent pas la fonction du bouton. Cela est particulièrement important pour les personnes peu technophiles ou dont la culture apporte une autre interprétation à l'icône utilisée.

• Qu'est-ce qu'un nom accessible ? | The Paciello Group^(angl.)
• MDN Comprendre WCAG, explications de la règle 4.1
• Comprendre le critère de succès 4.1.2 | W3C Understanding WCAG 2.0^(angl.)

Dimensionnement et proximité

Dimensionnement

Les éléments interactifs tels que les boutons doivent fournir une surface suffisamment grande pour qu'il soit facile de les activer. Cela facilitera la tâche à une variété de personnes : celles qui ont des problèmes moteurs, celles qui utilisent des dispositifs de pointage peu précis (doigt ou stylet). La taille interactive minimale recommandée est de 44×44pixels CSS.

• Comprendre le critère de succès 2.5.5 : Taille de la cible | W3C Comprendre WCAG 2.1^(angl.)
• Taille de la cible et 2.5.5 | Adrian Roselli^(angl.)
• Test rapide : grandes cibles tactiles - The A11Y Project^(angl.)

Proximité

De grandes quantités de contenu interactif — y compris les boutons — placées à proximité visuelle les unes des autres doivent être séparées par de l'espace. Cet espacement est bénéfique pour les personnes ayant des problèmes de contrôle moteur, qui pourraient activer accidentellement le mauvais contenu interactif.

L'espacement peut être créé à l'aide de propriétés CSS telles quemargin.

• Les tremblements de la main et le problème du bouton géant — Axess Lab^(angl.)

Informations sur l'état de l'ARIA

Pour décrire l'état d'un bouton, l'attribut ARIA correct à utiliser estaria-pressed et nonaria-checked ouaria-selected. Pour en savoir plus, lisez les informations sur lerôle ARIA de bouton.

Mises en formes de bouton

Il est préférable de ne pas surcharger l'anneau de sélection par défaut pour les éléments qui reçoivent la sélection. Si les styles de bouton sont modifiés, il est important des'assurer que l'état de sélection présente un contraste suffisant pour que les personnes malvoyantes puissent le percevoir et que les personnes ayant des différences cognitives puissent le comprendre.

La pseudo-classe:focus-visible peut être utilisée pour appliquer des styles à un élément qui a:focus uniquement lorsque les heuristiques de l'agent utilisateur déterminent que le focus doit être mis en évidence, par exemple lorsqu'un<button> reçoit le focus au clavier. Voir:focus contre :focus-visible pour plus d'informations.

Le ratio de contraste des couleurs est déterminé en comparant la luminosité des valeurs de couleur du texte du bouton et de l'arrière-plan avec l'arrière-plan sur lequel le bouton est placé. Pour respecter lesRègles pour l'accessibilité des contenus Web (WCAG)^(angl.), un ratio de 4,5:1 est requis pour le contenu textuel et de 3:1 pour les grands textes. (Un grand texte est défini comme un texte de 18,66px etbold ou plus, ou de 24px ou plus.)

• WebAIM : vérificateur de contraste des couleurs^(angl.)
• MDN Comprendre WCAG, explications de la règle 1.4
• Comprendre le critère de succès 1.4.3 | W3C Comprendre WCAG 2.0^(angl.)

Clic et focus

Le fait de cliquer sur un<button> ou sur un bouton<input> peut, selon le navigateur et l'OS, lui donner la sélection par défaut. La plupart des navigateurs donnent la sélection à un bouton cliqué, maisSafari ne le fait pas, par conception^(angl.).

Exemples

Création d'un bouton simple

Cet exemple crée un bouton cliquable.L'attributtype="button" garantit que le bouton n'a pas de comportement par défaut.Vous pouvez rendre ce bouton interactif en utilisant JavaScript ou des attributs commecommand etcommandfor.

<button type="button" name="button">Je suis un bouton</button>

Utilisation de la valeurrequest-close pour l'attributcommand

La boîte de dialogue dans cet exemple comporte deux boutons radio qui contrôlent la possibilité de fermer ou non la boîte de dialogue.SélectionnezOui ouNon, puis cliquez surDemander la fermeture pour tenter de fermer la boîte de dialogue.SiOui est sélectionné, la boîte de dialogue se ferme ; siNon est sélectionné, la boîte de dialogue reste ouverte et affiche un message à la place.

<button type="button" commandfor="mydialog" command="show-modal">  Ouvrir la boîte de dialogue</button><dialog>  <div>    <form>      <fieldset>        <legend>          Autoriser cette boîte de dialogue à se fermer lorsque c'est          demandé&nbsp;?        </legend>        <div>          <input type="radio" name="close" value="no" checked />          <label for="no">Non</label>        </div>        <div>          <input type="radio" name="close" value="yes" />          <label for="yes">Oui</label>        </div>      </fieldset>    </form>    <button commandfor="mydialog" command="request-close">      Demander la fermeture    </button>    <p hidden>      Vous devez choisir «&nbsp;Oui&nbsp;» pour fermer cette boîte de dialogue.    </p>  </div></dialog>

.warning {  color: tomato;}

const dialog = document.querySelector("dialog");const radio = document.querySelector("form").elements["close"];const warning = document.querySelector(".warning");dialog.addEventListener("cancel", (e) => {  if (!e.cancelable) return;  if (radio.value === "no") {    warning.hidden = false;    e.preventDefault();  } else {    warning.hidden = true;  }});

Le boutonOuvrir la boîte de dialogue ouvre l'élément<dialog> en utilisantcommand="show-modal".

Le boutonDemander la fermeture acommand="request-close", qui cible l'élément<dialog> en utilisant l'attributcommandfor="mydialog". Lorsqu'il est cliqué, il demande au<dialog> s'il peut être fermé (contrairement à l'attributcommand="close", qui fermerait immédiatement le<dialog>).Cela vérifie si le<dialog> estcancelable en utilisant un événementcancel.

Lorsque l'événement estcancelable, la valeur des boutons radio est vérifiée :

• Si la valeur estoui, la boîte de dialogue est fermée.
• Si la valeur estnon, l'attributhidden est désactivé sur l'avertissement et la méthodepreventDefault() est appelée, ce qui empêche le comportement de fermeture par défaut du<dialog>.

Résumé technique

Spécifications

Compatibilité des navigateurs