<button>

Description

L’élément <button> crée un bouton interactif. Contrairement à <input type="button">, il peut contenir du contenu HTML (texte, icônes, images). Son comportement par défaut dans un <form> est type="submit" — toujours spécifier type explicitement pour éviter les soumissions accidentelles.

Syntaxe

<button type="button">Cliquer ici</button>

Exemples

Bouton de soumission :

<form action="/inscription" method="post">
  <!-- … champs … -->
  <button type="submit">S'inscrire</button>
</form>

Bouton JavaScript :

<button type="button" id="toggle-menu" aria-expanded="false">
  Menu
</button>

Bouton avec icône :

<button type="button">
  <svg aria-hidden="true" width="16" height="16">…</svg>
  Télécharger
</button>

Bouton désactivé :

<button type="submit" disabled>Envoyer (désactivé)</button>

Attributs spécifiques

Attribut	Type	Description
type	enum	Comportement : submit (soumet le formulaire, défaut), reset (réinitialise), button (aucun comportement par défaut).
name	string	Nom envoyé avec value lors de la soumission (pour identifier quel bouton a été cliqué).
value	string	Valeur envoyée avec name.
disabled	boolean	Désactive le bouton.
form	string	ID du formulaire associé (si bouton hors du <form>).
formaction	URL	Surcharge l’action du formulaire pour ce bouton.
formmethod	enum	Surcharge la method du formulaire.
formnovalidate	boolean	Soumet sans validation pour ce bouton.
popovertarget	string	ID d’un élément popover à contrôler.
popovertargetaction	enum	Action sur le popover : toggle, show, hide.

Notes

<button> vs <a> : <button> pour les actions (soumettre, ouvrir une modale, basculer un état) ; <a href> pour la navigation vers une URL. Mélanger ces usages nuit à l’accessibilité et à la sémantique.

Toujours spécifier type : dans un <form>, un <button> sans type explicite est type="submit", ce qui peut provoquer des soumissions accidentelles. Toujours écrire type="button" pour les boutons non-soumission.