<button>

Un bouton cliquable : il envoie un formulaire, le réinitialise, ou lance une action sur la page.

Affichage: inline-block
Balise fermante: Obligatoire
Contenu autorisé: Contenu phrasant sans éléments interactifs

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Attributs
Attributs en pratique
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

HTML

<button type="button">
  <svg width="14" height="14" viewBox="0 0 16 16" aria-hidden="true">
    <path d="M4 2 L14 8 L4 14 Z" fill="currentColor" />
  </svg>
  Exécuter le code
</button>
<button type="button" disabled>Enregistrer (aucun changement)</button>

Aperçu

Définition et utilisation

L’élément <button> crée un bouton que l’on peut cliquer avec la souris, toucher du doigt, ou activer avec la touche Entrée ou la barre d’espace. Il fonctionne d’emblée avec le clavier et les lecteurs d’écran, ce qu’un <div> doté d’un gestionnaire de clic ne vous offrira pas.

L’attribut type définit son comportement. À l’intérieur d’un formulaire, un bouton sans cet attribut a le type submit et envoie le formulaire, ce qui est parfois source de bugs : cliquer sur « Afficher le mot de passe » envoie alors les données sans crier gare. Donnez toujours type="button" aux boutons qui ne font que déclencher du code JavaScript.

Contrairement à <input type="submit">, un bouton <button> peut contenir du HTML : une icône SVG, une image ou du texte en gras. Il ne peut cependant pas contenir d’autres éléments interactifs, comme un lien ou un second bouton.

Syntaxe

<button type="button">Texte du bouton</button>

Attributs

type
submit | reset | button
Le genre de bouton. submit (par défaut dans un formulaire) envoie le formulaire, reset restaure les valeurs initiales de tous les champs, et button ne fait rien de lui-même et attend votre code JavaScript.
disabled
attribut booléen
Désactive le bouton : impossible de cliquer dessus ou de l’atteindre avec la touche Tab. Le griser seul ne dit pas à l’utilisateur pourquoi le bouton ne fonctionne pas, expliquez-le donc à côté.
name / value
texte
Une paire envoyée avec le formulaire lorsque c’est ce bouton précis qui l’a envoyé. Le serveur sait ainsi lequel, parmi plusieurs boutons, a été cliqué, par exemple « Enregistrer le brouillon » ou « Publier ».
form
id d’un formulaire
Associe le bouton au formulaire ayant l’id indiqué, même si le bouton se trouve dans le code à l’extérieur de celui-ci, par exemple dans le pied d’une fenêtre ou sur une barre en bas de l’écran.
formaction / formmethod / formnovalidate / formtarget
comme les attributs `action`, `method`, `novalidate` et `target` du formulaire
Remplacent les réglages du formulaire pour ce bouton uniquement. C’est formnovalidate qui sert le plus souvent : un bouton « Enregistrer le brouillon » peut envoyer un formulaire incomplet sans validation, tandis que « Soumettre pour évaluation » exige toujours que les champs soient remplis.
popovertarget
id d’un élément avec un attribut `popover`
Ouvre et ferme l’élément indiqué portant un attribut popover, sans écrire de JavaScript. L’attribut supplémentaire popovertargetaction (toggle, show, hide) détermine ce qui doit se passer au clic. Cela fonctionne dans tous les grands navigateurs depuis le début de 2025.
commandfor / command
id d’un élément / show-modal | close | toggle-popover | show-popover | hide-popover
Déclenche une commande sur l’élément indiqué sans JavaScript : command="show-modal" ouvre une boîte <dialog> en tant que fenêtre modale, et command="close" la ferme. C’est une nouveauté qui ne fonctionne dans tous les grands navigateurs que depuis décembre 2025, donc dans les versions plus anciennes, le bouton ne fera rien.

Attribut	Valeurs	Description
type	submit \| reset \| button	Le genre de bouton. `submit` (par défaut dans un formulaire) envoie le formulaire, `reset` restaure les valeurs initiales de tous les champs, et `button` ne fait rien de lui-même et attend votre code JavaScript.
disabled	attribut booléen	Désactive le bouton : impossible de cliquer dessus ou de l’atteindre avec la touche Tab. Le griser seul ne dit pas à l’utilisateur pourquoi le bouton ne fonctionne pas, expliquez-le donc à côté.
name / value	texte	Une paire envoyée avec le formulaire lorsque c’est ce bouton précis qui l’a envoyé. Le serveur sait ainsi lequel, parmi plusieurs boutons, a été cliqué, par exemple « Enregistrer le brouillon » ou « Publier ».
form	id d’un formulaire	Associe le bouton au formulaire ayant l’`id` indiqué, même si le bouton se trouve dans le code à l’extérieur de celui-ci, par exemple dans le pied d’une fenêtre ou sur une barre en bas de l’écran.
formaction / formmethod / formnovalidate / formtarget	comme les attributs `action`, `method`, `novalidate` et `target` du formulaire	Remplacent les réglages du formulaire pour ce bouton uniquement. C’est `formnovalidate` qui sert le plus souvent : un bouton « Enregistrer le brouillon » peut envoyer un formulaire incomplet sans validation, tandis que « Soumettre pour évaluation » exige toujours que les champs soient remplis.
popovertarget	id d’un élément avec un attribut `popover`	Ouvre et ferme l’élément indiqué portant un attribut `popover`, sans écrire de JavaScript. L’attribut supplémentaire `popovertargetaction` (`toggle`, `show`, `hide`) détermine ce qui doit se passer au clic. Cela fonctionne dans tous les grands navigateurs depuis le début de 2025.
commandfor / command	id d’un élément / show-modal \| close \| toggle-popover \| show-popover \| hide-popover	Déclenche une commande sur l’élément indiqué sans JavaScript : `command="show-modal"` ouvre une boîte `<dialog>` en tant que fenêtre modale, et `command="close"` la ferme. C’est une nouveauté qui ne fonctionne dans tous les grands navigateurs que depuis décembre 2025, donc dans les versions plus anciennes, le bouton ne fera rien.

L’élément accepte aussi tous les attributs globaux, comme class, id, style ou hidden.

Attributs en pratique

type

submit | reset | button

Le genre de bouton. submit (par défaut dans un formulaire) envoie le formulaire, reset restaure les valeurs initiales de tous les champs, et button ne fait rien de lui-même et attend votre code JavaScript.

HTML

<form>
  <label>Votre réponse <input type="text" name="answer" value="&lt;p&gt;"></label>
  <p>
    <button type="submit">Vérifier</button>
    <button type="reset">Effacer</button>
    <button type="button">Indice</button>
  </p>
</form>

Aperçu

disabled

attribut booléen

Désactive le bouton : impossible de cliquer dessus ou de l’atteindre avec la touche Tab. Le griser seul ne dit pas à l’utilisateur pourquoi le bouton ne fonctionne pas, expliquez-le donc à côté.

HTML

<button type="submit" disabled>Soumettre le projet</button>
<p><small>Ajoutez d’abord le lien vers le dépôt.</small></p>

Aperçu

name / value

texte

Une paire envoyée avec le formulaire lorsque c’est ce bouton précis qui l’a envoyé. Le serveur sait ainsi lequel, parmi plusieurs boutons, a été cliqué, par exemple « Enregistrer le brouillon » ou « Publier ».

HTML

<form>
  <textarea name="post" rows="2" cols="30" aria-label="Contenu de l’article">Mon premier article</textarea>
  <p>
    <button type="submit" name="action" value="draft">Enregistrer le brouillon</button>
    <button type="submit" name="action" value="publish">Publier</button>
  </p>
</form>

Aperçu

form

id d’un formulaire

Associe le bouton au formulaire ayant l’id indiqué, même si le bouton se trouve dans le code à l’extérieur de celui-ci, par exemple dans le pied d’une fenêtre ou sur une barre en bas de l’écran.

HTML

<form id="profile-form">
  <label>Prénom <input type="text" name="name" value="Léa"></label>
</form>
<footer>
  <button type="submit" form="profile-form">Enregistrer le profil</button>
</footer>

Aperçu

formaction / formmethod / formnovalidate / formtarget

comme les attributs `action`, `method`, `novalidate` et `target` du formulaire

Remplacent les réglages du formulaire pour ce bouton uniquement. C’est formnovalidate qui sert le plus souvent : un bouton « Enregistrer le brouillon » peut envoyer un formulaire incomplet sans validation, tandis que « Soumettre pour évaluation » exige toujours que les champs soient remplis.

HTML

<form action="/exercices/envoyer" method="post">
  <label>Lien vers le dépôt <input type="url" name="repo" required></label>
  <p>
    <button type="submit">Soumettre pour évaluation</button>
    <button type="submit" formaction="/exercices/brouillon" formnovalidate>Enregistrer le brouillon</button>
  </p>
</form>

Aperçu

popovertarget

id d’un élément avec un attribut `popover`

Ouvre et ferme l’élément indiqué portant un attribut popover, sans écrire de JavaScript. L’attribut supplémentaire popovertargetaction (toggle, show, hide) détermine ce qui doit se passer au clic. Cela fonctionne dans tous les grands navigateurs depuis le début de 2025.

HTML

<button type="button" popovertarget="hint">Afficher l’indice</button>
<div id="hint" popover>
  N’oubliez pas de fermer la balise <code>&lt;/p&gt;</code>.
</div>

Aperçu

commandfor / command

id d’un élément / show-modal | close | toggle-popover | show-popover | hide-popover

Déclenche une commande sur l’élément indiqué sans JavaScript : command="show-modal" ouvre une boîte <dialog> en tant que fenêtre modale, et command="close" la ferme. C’est une nouveauté qui ne fonctionne dans tous les grands navigateurs que depuis décembre 2025, donc dans les versions plus anciennes, le bouton ne fera rien.

HTML

<button type="button" commandfor="quiz-rules" command="show-modal">Règles du quiz</button>
<dialog id="quiz-rules">
  <p>Vous avez 10 minutes pour 5 questions. Chacune a une seule bonne réponse.</p>
  <button type="button" commandfor="quiz-rules" command="close">Fermer</button>
</dialog>

Aperçu

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Ne construisez pas de boutons avec <div> ou <span>. Vous perdriez la prise en charge du clavier, le focus et le rôle de bouton que <button> offre gratuitement.
Si le clic mène vers une autre page, c’est un lien <a> qu’il faut utiliser, pas un bouton.
Un bouton composé uniquement d’une icône a besoin d’un nom accessible, par exemple aria-label="Fermer".

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez HTML dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours