Balise HTML <button>
La balise <button> est utilisée pour créer des boutons cliquables sur une page web. La différence entre ces éléments et les boutons créés avec la balise <input> est que vous pouvez placer du contenu (images ou texte) à l'intérieur de la balise <button>.
TIP
Utilisez l'élément <input> pour définir un bouton dans un formulaire HTML, car les navigateurs affichent le contenu de la balise <button> différemment.
Syntaxe
La balise <button> s'utilise par paire. Le contenu est écrit entre les balises d'ouverture (<button>) et de fermeture (</button>).
Exemple de la balise HTML <button> :
Exemple de 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>Utilisation des 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, etc.
Exemple de la balise <button> avec des styles CSS :
Exemple de balise HTML <button> avec les propriétés CSS color et font
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
Ordinary button
<button type="button">Add to the recycle bin</button>
<hr />
Button with red text
<button type="button" style="color: red;"><b>HTML Book </b></button>
<hr />
Button with increased font size
<button type="button" style="font: bold 14px Arial;">Download the book </button><br />
</body>
</html>Résultat
Attributs
TIP
La balise <button> ne possède pas d'attributs obligatoires ; cependant, nous recommandons d'utiliser toujours l'attribut type="button" si la balise est utilisée comme un bouton standard.
Note : Si l'attribut type est omis et que le bouton est placé dans un formulaire HTML, il prend par défaut type="submit".
Attributs
| 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 avoir effectué une action.) |
form | form_id | Spécifie un ou plusieurs formulaires auxquels le bouton appartient. Si le bouton appartient à plusieurs formulaires, leurs identifiants (form_id) doivent être séparés par des espaces. |
formaction | URL | Définit l'adresse vers laquelle les données du formulaire seront envoyées après un clic 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 la 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 en tant que 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 qui sera utilisée lors de la soumission du formulaire (uniquement pour type="submit"). Transmet les données du formulaire dans la barre d'adresse ("name = value"), qui sont ajoutées à l'URL de la page après un point d'interrogation et séparées par un esperluette (&). |
post | Le navigateur communique avec le serveur et envoie les données pour traitement. | |
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 actuelle. | |
_parent | Ouvre la réponse dans le cadre parent. | |
_top | Ouvre la réponse dans une fenêtre pleine largeur. | |
name | name | Définit le nom du bouton. |
type | button | Définit un bouton standard. |
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.
Comment ajouter un texte alternatif à un bouton avec une image ?
Pour ajouter un texte alternatif à un bouton contenant une image, vous pouvez utiliser l'attribut alt. Voici un exemple :
Comment ajouter un texte alternatif à un bouton avec une image ?
<button type="button">
<img src="button-image.png" alt="Button Label">
</button>Dans cet exemple, l'attribut alt a été ajouté à l'élément img à l'intérieur de l'élément button. La valeur de l'attribut alt doit être une brève description de l'image, qui sera lue par les lecteurs d'écran à la place de l'image elle-même.
Comment ajouter un lien à un bouton ?
Pour créer un lien cliquable qui ressemble à un bouton, utilisez un élément <a> stylisé avec CSS. Envelopper un <button> dans un <a> n'est pas valide en HTML5. Voici la bonne approche :
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 stylisé pour ressembler à un bouton. Lorsque l'utilisateur clique dessus, il sera redirigé vers l'URL liée.
Pratique
Quelles sont les propriétés et l'utilisation de la balise HTML <button> ?