HTML <button> Tag
Exemple
Un bouton cliquable se présente comme suit :
<button type="button">Cliquez-moi !</button> Plus d'exemples "Essayez-le vous-même" ci-dessous.
Définition et Utilisation
La <button> définit un bouton cliquable.
À l'intérieur d'un élément <button> , vous pouvez inclure du texte (et des balises comme <i> , <b> , <strong> , <br> , <img> , etc.). Cela 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> , afin d'indiquer aux navigateurs de quel type de bouton il s'agit.
Astuce : Vous pouvez facilement styliser les boutons avec CSS ! Consultez les exemples ci-dessous ou visitez notre tutoriel sur les Boutons CSS .
Support des Navigateurs
| Élément | |||||
|---|---|---|---|---|---|
| <button> | Oui | Oui | Oui | Oui | Oui |
Attributs
| Attribut | Valeur | Description |
|---|---|---|
| autofocus | autofocus | Spécifie qu'un bouton doit automatiquement obtenir le focus lorsque la page se charge |
| disabled | disabled | Spécifie qu'un bouton doit être désactivé |
| form | form_id | Spécifie à quel formulaire le bouton appartient |
| formaction | URL | Spécifie où envoyer les données du formulaire lors de la soumission. Seulement pour type="submit" |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Spécifie comment les données du formulaire doivent être encodées avant d'être envoyées à un serveur. Seulement pour type="submit" |
| formmethod | get post | Spécifie comment envoyer les données du formulaire (quelle méthode HTTP utiliser). Seulement pour type="submit" |
| formnovalidate | formnovalidate | Spécifie que les données du formulaire ne doivent pas être validées lors de la soumission. Seulement pour type="submit" |
| formtarget | _blank _self _parent _top framename | Spécifie où afficher la réponse après la soumission du formulaire. Seulement pour type="submit" |
| popovertarget | element_id | Spécifie quel élément popover invoquer |
| popovertargetaction | hide show toggle | Spécifie ce qui arrive à l'élément popover lorsque le bouton est cliqué |
| name | name | Spécifie un nom pour le bouton |
| type | button reset submit | Spécifie le type de bouton |
| value | text | Spécifie une valeur initiale pour le bouton |
Attributs Globaux
La <button> prend également en charge les Attributs Globaux en HTML .
Attributs d'Événement
La <button> prend également en charge 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: #04AA6D;} /* Vert */
.button2 {background-color: #008CBA;} /* Bleu */
</style>
</head>
<body>
<button class="button button1">Vert</button>
<button class="button button2">Bleu</button>
</body>
</html> 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 #04AA6D;
}
.button1:hover {
background-color: #04AA6D;
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">Vert</button>
<button class="button button2">Bleu</button>
</body>
</html> Pages Associées
Référence DOM HTML : Objet Bouton
Tutoriel CSS : Styliser les Boutons
Paramètres CSS par Défaut
Aucun.