Balise<button> HTML

Définition et utilisation

<button> Balise définissant un bouton cliquable.

Dans <button> À l'intérieur de l'élément, vous pouvez placer du texte (et des balises telles que <i>, <b>, <strong>, <br>, <img>). C'est utilisé <input> Ce que les boutons de création d'éléments ne peuvent pas faire !

Avis :Il faut toujours définir <button> l'élément spécifie l'attribut typepour informer le navigateur du type de bouton.

Avis :Vous pouvez ajouter facilement du style aux boutons avec CSS ! Voir les exemples ci-dessous ou visitez notre Tutoriel CSS bouton.

Description détaillée

<button> Contrôle avec <input type="button"> cette fonctionnalité est plus puissante et offre un contenu plus varié.<button> par rapport à </button> Tous les contenus entre les balises sont le contenu du bouton, y compris tout contenu acceptable, comme du texte ou du contenu multimédia. Par exemple, nous pouvons inclure une image et du texte associé pour créer une image de marque attrayante dans le bouton.

L'élément exclusivement interdit est la carte image, car les actions sensibles au curseur et à la touche peuvent interférer avec le comportement du bouton de formulaire.

Il faut toujours définir pour le bouton l'attribut type. Le type par défaut d'Internet Explorer est "button"tandis que dans d'autres navigateurs (y compris les normes W3C) la valeur par défaut est "submit".

Voir également :

Guide de référence HTML DOM :Objet Button

Tutoriel CSS :Définir le style du bouton

Exemple

Marquez ainsi les boutons cliquables :

<button type="button">Cliquez-moi !</button>

Essayez-le vous-même

Avis :Plus d'exemples sont fournis au bas de la page.

Attribut

Attribut Valeur Description
autofocus autofocus Définit que le bouton doit obtenir automatiquement le focus lors du chargement de la page.
disabled disabled Définit que le bouton doit être désactivé.
form form_id Définit à quel formulaire appartient le bouton.
formaction URL

Définit où les données du formulaire doivent être envoyées lors de la soumission du formulaire.

Seulement applicable pour type="submit".
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

Définit comment les données du formulaire doivent être codées avant d'être envoyées au serveur.

Seulement applicable pour type="submit".
formmethod
  • get
  • post

Définit comment les données du formulaire doivent être envoyées (quelle méthode HTTP utiliser).

Seulement applicable pour type="submit".
formnovalidate formnovalidate

Définit que les données du formulaire ne doivent pas être vérifiées lors de la soumission.

Seulement applicable pour type="submit".
formtarget
  • Nom de la fenêtre

Définit où le réponse doit être affichée après le soumission du formulaire.

Seulement applicable pour type="submit".
name Nom Définit le nom du bouton.
popovertarget element_id Définit l'élément de fenêtre contextuelle à appeler.
popovertargetaction
  • hide
  • show
  • toggle
 Définit l'opération sur l'élément de fenêtre contextuelle lorsque le bouton est cliqué.
type
  • button
  • reset
  • submit
 Définit le type du bouton.
value Texte Définit la valeur initiale du bouton.

Attributs globaux

<button> Les balises prennent également en charge Attributs globaux dans HTML.

Attributs d'événement

<button> Les balises prennent également en charge Attributs d'événement dans HTML.

Configuration CSS par défaut

Aucun.

Plus d'exemples

Exemple 2

Définir le style des boutons à l'aide de CSS :

<!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;} /* Vert */
.button2 {background-color: #008CBA;} /* Bleu */
</style>
</head>
<body>
<button class="button button1">Vert</button>
<button class="button button2">Bleu</button>
</body>
</html>

Essayez-le vous-même

Exemple 2

Définir le style des boutons à l'aide de CSS (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">Vert</button>
<button class="button button2">Bleu</button>
</body>
</html>

Essayez-le vous-même

Supporte le navigateur

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support