Balise BUTTON

Rôle

La balise <button> définit un bouton cliquable, contrairement au bouton créé avec la balise input, cette balise peut contenir du contenu (texte et image).

Testez vous-même cette balise

Utilisez Codepen.

Voici le resultat

Compatibilité

La balise <button> est pris en charge dans tous les principaux navigateurs

Attributs spécifiques

Attributs spécifiques à cet élément

autofocus

Donne le focus à l’élément au chargement de la page, il est donc immédiatement utilisable (attention, pris en charge à partir de IE-10 et Opéra 13)
Syntaxe :
<button type="button" autofocus>Cliquez ici</button>

disabled

Permet de vérouiller l’élément, il n’est donc plus utilisable
Syntaxe :
<button type="button" disabled>Cliquez ici</button>

form

Spécifie l’idendifiant (attribut ID) du formulaire auquel l’élément appartient. Cet attribut permet à un élément d’être utilisé à l’extérieur à la balise <form> (attention, pas pris en charge par Internet Explorer)
Syntaxe :
<button type="button" form="form1" >Cliquez ici</button>

formaction

S’il est définit dans un bouton de type submit , cet attribut remplace l’attibut action de la baliseform (attention, pris en charge à partir de IE-10)
Syntaxe :
<button type="submit" formaction="form.php" >Envoyer</button>

formenctype

S’il est définit dans un bouton de type submit , cet attribut remplace l’attibut enctype de la baliseform (attention, pris en charge à partir de IE-10 et Safari 6).
Syntaxe :
<button type="submit" formenctype="text/plain" >Envoyer</button>

formenmethod

S’il est définit dans un bouton de type submit , cet attribut remplace l’attibut method de la baliseform (attention, pris en charge à partir de IE-10).
Syntaxe :
<button type="submit" formmethod="post" >Envoyer</button>

formnovalidate

S’il est définit dans un bouton de type submit , cet attribut remplace l’attibut novalidate de la balise form (attention, pris en charge à partir de IE-10 et pas pris en charge par Safari).
Syntaxe :
<button type="submit" formnovalidate >Envoyer</button>

formtarget

S’il est définit dans un bouton de type submit , cet attribut remplace l’attibut target de la baliseform (attention, pris en charge à partir de IE-10).
Syntaxe :
<button type="submit" formtarget="_blank" >Envoyer</button>

name

Spécifie le nom du bouton

type

Spécifie que le rôle du bouton (initialiser les données, envoyer les données, lancer un script).
Syntaxe :
<button type="submit" >Envoyer</button>
Valeurs possible :

• type=’button’ : bouton cliquable pour lancer un script
• type=’reset’ : bouton pour réinitialiser les valeurs de départ
• target=’submit’ : bouton pour soumettre les données

value

Spécifie la valeur initiale du bouton. Cette information pourra être exploitée par PHP.
Syntaxe :
<form action="form.php" method="get" value="envoi" >

La balise <button> prend aussi en charge les attributs globaux

Attibuts de type événement

La balise <button> prend en charge les événements de type formulaire. La balise <button> prend aussi en charge les événements souris

Voir les autres balises pour l’intégration d’un formulaire

button– datalist– fieldset– form– input– keygen– label– legend– meter– optgroup– option– output–progress – select– textarea