w3docs logo

Tag HTML <button>

Le tag<button> est utilisé pour créer des boutons interactifs sur la page Web. Contrairement au tag unique <input> (avec l'attribut type = "button"), avec laquelle vous pouvez également créer des boutons, le contenu du tag <button> peut être un texte, bien qu'une image.

Si vous voulez créer un bouton en forme HTML, utilisez l’élément <input>, car des navigateurs affichent différemment le contenu du tag <button>.

Syntaxe

Le contenu du texte est écrit entre le tag ouvrant <button> et le tag fermant </button>.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    <h1>Ici, vous allez trouver notre bouton</h1>
    <button type="button">Cliquez</button>
  </body>
</html>

Résultat

Notre Bouton

L’utilisation des styles CSS

Vous pouvez appliquer des styles CSS au tag <button> pour modifier l'apparence du bouton, sa taille, sa couleur, sa police de texte, etc.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
  </head>
  <body>
    Bouton simple
    <button type="button">Ajouter à carte</button>
    <hr />
    Bouton avec un texte rouge
    <button type="button" style="color: red;"><strong>Apprenez HTML</strong></button>
    <hr />
    Bouton avec la taille différente
    <button type="button" style="font: bold 14px Arial;">Texte du style différent</button><br />
  </body>
</html>

Résultat

Un bouton

Attributs

Le tag <button> n’a pas d’attributs obligatoires, mais nous vous recommandons de toujours utiliser l’attribut type=”button”, si le tag est utilisé comme un bouton ordinaire.
Attribut Valeur Description
autofocus autofocus Indique au navigateur que le bouton doit recevoir le focus après le chargement de la page.
disabled disabled Désactive le bouton. (Il est utilisé, quand le bouton doit devenir actif après la réalisation de quelque action.)
form form_id Indique la forme du bouton. Si le bouton appartient à plusieurs formes, alors identifiants (form_id) doivent être séparé par des espaces.
formaction URL Indique l’adresse, où les formes données seront envoyées en cliquant sur le bouton. (Il est utilisé uniquement pour les boutons avec l’attribut type="submit").
formenctype application/x-www-form-
urlencoded
multipart/form-data
text/plain		 Définit comment encoder les données avant de les envoyer au serveur. (Utilisé uniquement pour les boutons avec l'attribut type = "submit"). Tous les symboles sont encodés avantl'envoi (valeur par défaut). Les symboles ne sont pas codés, les espaces sont remplacés par un signe "+", mais symboles ne sont pas codés.
formmethod Spécifie la méthode de requête HTTP, qui sera utilisée lors de l'envoi des données de formulaire. (Utilisé uniquement pour les boutons avec l'attribut type = "submit")
get Transmet les données de formulaire dans la barre d'adresse ("nom = valeur"), qui sont ajoutées à l'URL de la page après le point d'interrogation et sont séparées par une esperluette (&). (Http://example.ru/doc/?name=Ivan&password=vanya)
post Le navigateur communique avec le serveur et envoie les données pour traitement.
formnovalidate formnovalidate Annule la validation des données de formulaire pour qu'elles soient correctes. (Utilisé uniquement pour les boutons avec l'attribut type = "submit").
formtarget Indique qu'il faut afficher la réponse après avoir soumis le formulaire. (Utilisé uniquement pour les boutons avec l'attribut type = "submit").
_blank Ouvre la réponse dans la nouvelle fenêtre.
_self Ouvre la réponse dans la fenêtre courante.
_parent Ouvre la réponse dans le cadre parental.
_top Ouvre la réponse en pleine largeur de la fenêtre.
name name Spécifie le nom du bouton.
type Spécifie le type du bouton.
button bouton ordinare.
reset bouton qui efface le formulaire des données d'entrée
submit bouton d'envoi de données de formulaire
value text Définit la valeur du bouton.

Le tag <button> supporte également les Attributs globaux et les Attributs d'événements.

Comment styler le tag HTML <button> ?

Propriétés communes pour modifier le poids visuel/emphase/taille du texte dans le tag <button>:

Coloration du texte dans le tag HTML <button>:

Styles de mise en page du texte pour la tag HTML <button>:

Autres propriétés utiles pour le tag HTML <button>:

Support de Navigateurs

chrome edge firefox safari opera
✓ ✓ ✓ ✓ ✓

Pratiquez vos connaissances

Qu'est-ce qui est vrai au sujet de la balise HTML <button>?
Trouvez-vous cela utile?