La balise HTML <button> : Créer des boutons interactifs

Qu'est-ce que la balise <button> ?

La balise <button> définit un bouton cliquable dans un document HTML. Contrairement à la balise <input type="button">, la balise <button> peut contenir du HTML enrichi : texte formaté, images, icônes, et autres éléments. Cette flexibilité en fait un choix privilégié pour créer des boutons visuellement attractifs et personnalisés.

Point clé : La balise <button> nécessite toujours une balise de fermeture </button>. C'est un élément de formulaire au même titre que <input>, <select> et <textarea>.

Syntaxe et utilisation de base

La balise BUTTON permet de créer un contrôle de type bouton utilisable au sein d'un formulaire <form>. Vous pouvez placer du code HTML à l'intérieur de l'élément button, ce qui le distingue fondamentalement des boutons créés avec la balise <input>.

Structure de base :

Exemple :    📋 Copier le code

<button type="button">Cliquez ici</button>

Les types de boutons

L'attribut type définit le comportement du bouton. Il existe trois valeurs possibles :

1. type="submit" (soumission)

Le type submit valide et envoie le formulaire dans lequel il est contenu. Il est équivalent à la fonction JavaScript submit(). C'est le comportement par défaut selon les spécifications du W3C.

2. type="reset" (réinitialisation)

Le type reset efface tous les champs renseignés dans le formulaire et les remet à leur valeur initiale. La fonction JavaScript équivalente existe également.

3. type="button" (bouton standard)

Le type button équivaut à un bouton classique sans action par défaut. Il est généralement utilisé avec JavaScript pour déclencher des actions personnalisées.

⚠️ Important : Spécifiez toujours l'attribut type pour éviter les comportements incohérents entre navigateurs. Internet Explorer utilise "button" par défaut, tandis que les autres navigateurs et le W3C utilisent "submit".

Attributs spécifiques de la balise <button>

La balise <button> dispose de plusieurs attributs spécifiques :

• name : définit le nom du bouton pour l'identifier dans le formulaire
• value : spécifie la valeur envoyée au serveur lors de la soumission
• type : détermine l'événement associé au clic (submit, reset, button)
• disabled : rend le bouton non cliquable avec une apparence grisée
• accesskey : définit un raccourci clavier simulant le clic

Exemples pratiques

Exemple 1 : Bouton avec image personnalisée

Un bouton contenant une image avec un style appliqué :

Exemple :    📋 Copier le code

<button type="button" 
        style="background:white; cursor:pointer; border:solid 1px black; padding:10px;"
        onclick="alert('Bouton cliqué !')">
    <img src="../Images/icone.png" alt="Icône">
    <span>Cliquez ici</span>
</button>

Exemple 2 : Bouton de soumission de formulaire

Exemple :    📋 Copier le code

<form action="/traitement.php" method="post">
    <input type="text" name="nom" placeholder="Votre nom">
    <button type="submit">
        <strong>Envoyer</strong>
    </button>
</form>

Exemple 3 : Bouton désactivé

Exemple :    📋 Copier le code

<button type="button" disabled>
    Bouton désactivé
</button>

⚠️ Attention : Comportement dans les formulaires

Si vous utilisez l'élément <button> dans un formulaire HTML, certains navigateurs présentent des comportements différents :

Internet Explorer (anciennes versions) envoie le texte entre les balises <button> et </button>, tandis que les navigateurs modernes envoient le contenu de l'attribut value.

Recommandation : Pour éviter ces incohérences, utilisez plutôt <input type="submit"> ou <input type="button"> pour créer des boutons dans les formulaires nécessitant une compatibilité maximale.

Tableau des attributs optionnels

La colonne DTD dans le tableau suivant indique dans quel HTML 4.01/XHTML 1.0 DTD l'attribut est autorisé :
S = Strict, T = Transitional, F = Frameset.

Les attributs optionnels

Attributs standards

La balise <button> supporte les attributs standard suivants :

Les attributs d'événements

La balise <button> prend en charge les attributs d'événements suivants :

    Vous êtes ici : Balise button    Retour à la liste des balises