Balise HTML <button>
La balise HTML <button> crée des boutons cliquables. Apprenez l'attribut type, la mise en forme, l'état désactivé et l'accessibilité, avec des exemples.
La balise <button> crée un bouton cliquable sur la page web. Contrairement à un bouton construit avec la balise <input>, un <button> peut contenir du contenu enrichi — du texte, des images ou d'autres éléments HTML en ligne — entre ses balises ouvrante et fermante. C'est pourquoi il est l'élément privilégié pour la plupart des boutons aujourd'hui : il est plus facile à styliser et permet de combiner une icône avec un libellé.
Cette page traite de la syntaxe de <button>, de l'attribut crucial type (et du bug qui survient lorsqu'on l'oublie à l'intérieur d'un formulaire), de la mise en forme, de l'état disabled, de l'accessibilité, et de la comparaison entre <button> et <input>.
Par le passé, certains développeurs utilisaient <input type="button"> à la place de <button>, car de très anciennes versions d'Internet Explorer rendaient <button> de façon incohérente. Cette particularité a disparu depuis longtemps — dans les navigateurs modernes, <button> est le choix recommandé.
Syntaxe
La balise <button> fonctionne en paires. Le contenu est écrit entre les balises ouvrante (<button>) et fermante (</button>).
Exemple de la balise HTML <button> :
Exemple de la balise HTML <button>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Here will be our button</h1>
<button type="button">Click</button>
</body>
</html>L'attribut type
L'attribut type détermine ce que fait un bouton. Il existe trois valeurs :
submit— soumet le formulaire parent.reset— remet tous les contrôles du formulaire à leurs valeurs initiales.button— ne fait rien par lui-même ; vous câblez le comportement avec JavaScript.
L'erreur la plus fréquente : à l'intérieur d'un <form>, un <button> sans attribut type vaut par défaut type="submit". Ainsi, un bouton que vous destiniez à une action ordinaire soumettra le formulaire (rechargant souvent la page) dès qu'on clique dessus. Définissez toujours type="button" explicitement pour les boutons non-submit à l'intérieur d'un formulaire.
Exemple de submit, reset et button :
Exemple des trois types de boutons
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/submit">
<label>Name: <input type="text" name="name"></label>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button" onclick="alert('Just a button!')">Say hi</button>
</form>
</body>
</html>Submit envoie le formulaire, Reset vide le champ texte, et Say hi exécute uniquement son JavaScript sans toucher au formulaire.
Utiliser les styles CSS
Vous pouvez appliquer des styles CSS à la balise <button> pour modifier l'apparence du bouton, sa taille, sa couleur, la police du texte, et bien plus encore.
Exemple de la balise <button> avec des styles CSS :
Exemple de la balise HTML <button> avec les propriétés CSS de couleur et de police
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.red-text {
color: red;
}
.big-text {
font: bold 14px Arial;
}
</style>
</head>
<body>
Ordinary button
<button type="button">Add to the recycle bin</button>
<hr />
Button with red text
<button type="button" class="red-text"><b>HTML Book</b></button>
<hr />
Button with increased font size
<button type="button" class="big-text">Download the book</button>
</body>
</html>Résultat
L'état disabled
Un bouton avec l'attribut disabled ne peut pas être cliqué ni recevoir le focus, et il ne déclenchera pas ses gestionnaires d'événements ni ne soumettra un formulaire. Les navigateurs le grisent également pour indiquer aux utilisateurs qu'il est inactif. C'est utile lorsqu'une action est indisponible — par exemple, tant qu'un formulaire n'est pas correctement rempli.
Exemple d'un bouton désactivé
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<button type="button">Active button</button>
<button type="button" disabled>Disabled button</button>
</body>
</html>Attributs
La balise <button> n'a pas d'attributs obligatoires ; cependant, nous recommandons de toujours définir type="button" lorsque la balise est utilisée comme bouton ordinaire (non-submit), car à l'intérieur d'un formulaire un type non défini vaut par défaut submit.
| Attributs | Valeur | Description |
|---|---|---|
autofocus | autofocus | Spécifie que le bouton doit recevoir le focus après le chargement de la page. |
disabled | disabled | Désactive le bouton. (Utilisé lorsque le bouton doit devenir actif après l'exécution d'une action.) |
form | form_id | Spécifie un ou plusieurs formulaires auxquels le bouton appartient. Si le bouton est associé à plusieurs formulaires, leurs identifiants (form_id) doivent être séparés par des espaces. |
formaction | URL | Définit l'adresse à laquelle les données du formulaire seront envoyées après avoir cliqué sur le bouton. (Utilisé uniquement pour les boutons avec l'attribut type="submit"). |
formenctype | application/x-www-form-urlencoded | Définit comment les données du formulaire doivent être encodées lors de sa soumission. (Utilisé uniquement pour type="submit"). Tous les symboles sont encodés avant la soumission du formulaire (valeur par défaut). |
multipart/form-data | Encode les données au format MIME multipart. | |
text/plain | Les espaces sont remplacés par le signe "+", mais les symboles ne sont pas encodés. | |
formmethod | get | Définit la méthode de la requête HTTP utilisée lors de la soumission du formulaire (uniquement pour type="submit"). Transmet les données du formulaire dans la barre d'adresse ("nom = valeur"), ajoutées à l'URL de la page après le point d'interrogation et séparées par une esperluette (&). |
post | Le navigateur communique avec le serveur et envoie les données à traiter. | |
formnovalidate | formnovalidate | Spécifie que les données du formulaire ne doivent pas être validées lors de la soumission (uniquement pour type="submit"). |
formtarget | _blank | Spécifie où la réponse sera affichée après la soumission du formulaire (uniquement pour type="submit"). Ouvre la réponse dans une nouvelle fenêtre. |
_self | Ouvre la réponse dans la fenêtre courante. | |
_parent | Ouvre la réponse dans le cadre parent. | |
_top | Ouvre la réponse dans la fenêtre en pleine largeur. | |
name | name | Définit le nom du bouton. |
type | button | Définit un bouton ordinaire. |
reset | Bouton qui efface les données saisies dans le formulaire. | |
submit | Bouton pour envoyer les données du formulaire. | |
value | text | Définit la valeur du bouton. |
La balise <button> prend également en charge les attributs globaux et les attributs d'événement.
Accessibilité : donner un nom accessible à un bouton
Chaque bouton a besoin d'un nom accessible — le texte qu'un lecteur d'écran annonce. Pour un bouton texte ordinaire, le nom est simplement le texte entre les balises. Le problème se pose avec les boutons contenant uniquement une icône, où il n'y a pas de texte visible.
Si la seule chose à l'intérieur du bouton est une image, donnez à <img> un attribut alt qui décrit l'action, et non l'image. Le bouton emprunte alors ce texte comme nom :
<button type="button">
<img src="search.png" alt="Search">
</button>Ici alt="Search" décrit ce que fait le bouton, de sorte qu'un lecteur d'écran annonce « Search, bouton ».
Si le bouton n'a ni texte ni image avec alt — par exemple une icône dessinée avec une police d'icônes ou un SVG en ligne — ajoutez un aria-label afin que le bouton ait quand même un nom :
<button type="button" aria-label="Close menu">
<span class="icon-close" aria-hidden="true"></span>
</button>L'aria-label est le nom accessible du bouton ; aria-hidden="true" empêche l'icône décorative d'être annoncée. Notez que aria-label et un <img alt> interne sont des mécanismes distincts — utilisez celui qui convient au balisage, et ne laissez jamais un bouton uniquement icône sans l'un d'eux.
Comment ajouter un lien à un bouton ?
Pour créer un lien cliquable qui ressemble à un bouton, utilisez un élément <a> mis en forme avec CSS. Envelopper un <button> dans un <a> n'est pas valide en HTML5. Voici l'approche correcte :
Comment ajouter un lien à un bouton ?
<a href="https://example.com" class="button-link">
Button Label
</a>Dans cet exemple, l'élément <a> est mis en forme pour ressembler à un bouton. Lorsque l'utilisateur clique dessus, il est redirigé vers l'URL liée.
<button> vs. <input type="button">
Vous pouvez créer un bouton avec <button> ou avec la balise <input> (type="button", type="submit" ou type="reset"). Ils se comportent de manière similaire, mais diffèrent par ce qu'ils peuvent contenir :
<button> | <input type="button"> / <input type="submit"> | |
|---|---|---|
| Source du libellé | Contenu entre les balises | L'attribut value (texte brut uniquement) |
| Contenu enrichi | Oui — texte, images, icônes, autre HTML en ligne | Non — texte uniquement |
| Mise en forme | Plus facile (pseudo-éléments, éléments imbriqués) | Plus limitée |
| Balise fermante | Obligatoire (</button>) | Aucune — c'est un élément vide |
<!-- Rich content is possible -->
<button type="submit"><img src="check.png" alt=""> Save</button>
<!-- Text-only, set through value -->
<input type="submit" value="Save">Utilisez <button> lorsque vous souhaitez une icône, du texte formaté ou un contrôle de style plus fin ; optez pour <input> quand un simple libellé texte suffit.