Élément HTML <button> : l'élément représentant un bouton

Exemple interactif

Attributs

Cet élément inclut les attributs universels.

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

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

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éthode HTMLDialogElement.showModal() sur l'élément <dialog>.

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éthode HTMLDialogElement.close() sur l'élément <dialog>. Lorsqu'il est utilisé avec l'attribut value, la valeur du bouton sera transmise comme propriété returnValue de la boîte de dialogue.

Le bouton déclenchera un événement cancel sur un élément <dialog> pour demander au navigateur de le fermer, suivi d'un événement close. Cela diffère de la commande close car les auteur·ice·s peuvent appeler Event.preventDefault() sur l'événement cancel 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éthode HTMLDialogElement.requestClose() sur l'élément <dialog>. Lorsqu'il est utilisé avec l'attribut value, la valeur du bouton sera transmise comme propriété returnValue de la boîte de dialogue.

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. Voir l'API Popover pour plus de détails. Ceci est équivalent à la valeur show pour l'attribut popovertargetaction, et fournit également un équivalent déclaratif à l'appel de la méthode HTMLElement.showPopover() sur l'élément contextuel flottant.

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. Voir l'API Popover pour plus de détails. C'est équivalent à la valeur hide pour l'attribut popovertargetaction, et fournit aussi un équivalent déclaratif à l'appel de la méthode HTMLElement.hidePopover() sur l'élément contextuel flottant.

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é. Voir l'API Popover pour plus de détails. C'est équivalent à la valeur toggle pour l'attribut popovertargetaction, et fournit aussi un équivalent déclaratif à l'appel de la méthode HTMLElement.togglePopover() sur l'élément contextuel flottant.

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

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

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

L'élément <form> auquel associer le bouton (son proprié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.

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

Si le bouton est un bouton de soumission (il est à l'intérieur ou associé à un <form> et n'a pas type="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'attribut type 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'attribut enctype du formulaire rattaché au bouton.

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

• 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'URL action du formulaire, avec un ? comme séparateur, et l'URL résultante est envoyée au serveur. Utilisez cette méthode lorsque le formulaire n'a pas d'effets secondaires, comme les formulaires de recherche.
• dialog : Cette méthode permet d'indiquer que le bouton ferme l'é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'attribut method du formulaire rattaché au bouton.

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

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

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

Définit l'élément <button> comme un invocateur 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). Voir Utilisation des invocateurs d'intérêt pour plus de détails et d'exemples.

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

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

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

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

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

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

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.

Définit la valeur associée au name 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. Lorsqu'il est utilisé avec les commandes close ou request-close, l'attribut value définit le returnValue de l'élément <dialog> contrôlé.

Notes

Un bouton de soumission avec l'attribut formaction 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'attribut form 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 attribut type à 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 style display: flow-root aux boutons, ce qui établit un contexte 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 avec display: inline sera stylisé comme si la valeur était display: 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 un arbre 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

Si vous souhaitez masquer visuellement le texte du bouton, il existe une méthode accessible qui consiste à utiliser une 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 ? | Vispero (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×44 pixels 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 que margin.

• 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 est aria-pressed et non aria-checked ou aria-selected. Pour en savoir plus, lisez les informations sur le rô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 de s'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 les Rè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 et bold 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é, mais Safari ne le fait pas, par conception (angl.).

Exemples

Création d'un bouton simple

Cet exemple crée un bouton cliquable. L'attribut type="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 comme command et commandfor.

Utilisation de la valeur request-close pour l'attribut command

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électionnez Oui ou Non, puis cliquez sur Demander la fermeture pour tenter de fermer la boîte de dialogue. Si Oui est sélectionné, la boîte de dialogue se ferme ; si Non est sélectionné, la boîte de dialogue reste ouverte et affiche un message à la place.

Le bouton Ouvrir la boîte de dialogue ouvre l'élément <dialog> en utilisant command="show-modal".

Le bouton Demander la fermeture a command="request-close", qui cible l'élément <dialog> en utilisant l'attribut commandfor="mydialog". Lorsqu'il est cliqué, il demande au <dialog> s'il peut être fermé (contrairement à l'attribut command="close", qui fermerait immédiatement le <dialog>). Cela vérifie si le <dialog> est cancelable en utilisant un événement cancel.

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

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

Utiliser l'attribut value avec la commande close d'un dialogue

Cet exemple montre comment utiliser l'attribut value d'un bouton avec la commande close pour remplir la propriété returnValue d'un dialogue.

Lorsque le bouton Annuler ou Supprimer est cliqué, le dialogue se ferme et définit sa returnValue sur l'attribut value du bouton. Le gestionnaire d'évènements close vérifie dialog.returnValue pour déterminer quelle action l'utilisateur a choisie et affiche le résultat à l'écran.

HTML

Le HTML définit d'abord un bouton Supprimer l'enregistrement qui utilise l'attribut commandfor pour définir le dialogue à ouvrir.

Dans le dialogue, les boutons Annuler et Supprimer utilisent l'attribut commandfor pour indiquer qu'ils s'appliquent au dialogue actuel. Ils définissent également l'attribut command sur "close" et l'attribut value sur "cancel" et "delete" respectivement — la valeur du bouton sélectionné est automatiquement copiée dans la propriété returnValue du dialogue lorsque le bouton est cliqué.

JavaScript

The code uses a close event listener to log the dialog's returnValue.

Résultats

Résumé technique

Spécifications

Compatibilité des navigateurs

Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.