Balise HTML <button>
Exemple
Un bouton cliquable est balisé comme suit :
<button type="button">Click Me!</button>
Try it Yourself »
Plus d'exemples "Try it Yourself" (« Essayez-le vous-même ») ci-dessous.
Définition et utilisation
La balise <button> définit un bouton cliquable.
À l'intérieur d'un élément <button> vous pouvez mettre du texte (et des balises comme <i>, <b>, <strong>, <br>, <img>, etc.). Ce n'est pas possible avec un bouton créé avec l'élément <input> !
Astuce : Spécifiez toujours l'attribut type pour un élément <button>, pour indiquer aux navigateurs ce que type de bouton dont il s'agit.
Astuce : Vous pouvez facilement styliser les boutons avec CSS ! Regardez les exemples ci-dessous ou visitez notre tutoriel sur les Boutons CSS.
Prise en charge du navigateur
| Élément | |||||
|---|---|---|---|---|---|
| <button> | Oui | Oui | Oui | Oui | Oui |
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| autofocus | autofocus | Spécifie qu'un bouton doit automatiquement obtenir le focus lors du chargement de la page |
| disabled | disabled | Spécifie qu'un bouton doit être désactivé |
| form | form_id | Spécifie à quel formulaire appartient le bouton |
| formaction | URL | Spécifiez où envoyer les données du formulaire lorsqu'un formulaire est soumis. Uniquement pour type="submit" |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Spécifiez comment les données du formulaire doivent être codées avant de les envoyer à un serveur. Uniquement pour type="submit" |
| formmethod | get post |
Spécifie comment envoyer les données du formulaire (quelle méthode HTTP utiliser). Uniquement pour type="submit" |
| formnovalidate | formnovalidate | Précisez que les données du formulaire ne doivent pas être validées lors de la soumission. Uniquement pour type="submit" |
| formtarget | _blank _self _parent _top framename |
Spécifiez où afficher la réponse après avoir soumis le formulaire. Uniquement pour type="submit" |
| name | name | Spécifie un nom pour le bouton |
| type | button reset submit |
Spécifiez le type de bouton |
| value | text | Spécifiez une valeur initiale pour le bouton |
Attributs globaux
La balise <button> prend également en charge les Attributs globaux en HTML.
Attributs d'événement
La balise <button> supporte également les Attributs d'événement en HTML.
Plus d'exemples
Exemple
Utilisez CSS pour styliser les boutons :
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
</style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>
</html>
Try it Yourself »
Exemple
Utilisez CSS pour styliser les boutons (avec effet de survol) :
<!DOCTYPE html>
<html>
<head>
<style>
.button {
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
</style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
</body>
</html>
Try it Yourself »
Pages connexes
Référence HTML DOM : Objet Button.
Tutoriel CSS : Boutons de style.
Paramètres CSS par défaut
Aucun.
