Accueil    HTML    Balise BUTTON
 



balise button  Balise BUTTON : Bouton

«  Partie précédente  |  Index  |  Partie suivante  »


  • Tag de fermeture obligatoire | Support :
  • Google Chrome
  • Firefox
  • Internet Explorer
  • Opera
  • Safari



La balise <button> permet de créer un contrôle de type bouton. C'est l'un des différents éléments utilisables au sein d'un formulaire <form> (au même titre que select, textarea et input).

Il est possible de placer du code html à l'intérieur de l'élément button. Ce contrôle est très proche de la balise <input> qui gère l'affichage de boutons (en plus des affichages de zones de texte, boutons radio et cases à cocher à travers son attribut "type").

Exemple d'appel à une fonction javascript depuis un clic sur un bouton :

<button onclick="ClicBouton();">Cliquez moi !</button>

<script type="text/javascript">
   function ClicBouton(){
      alert("The user clicked me !...");
   }
</script>

L'exemple en application :


Propriétés pour la balise button :




Propriétés Définition Valeurs
accesskey Défini un raccourci clavier simulant le clic touche clavier
disabled rend le bouton non cliquable (apparence grisée) disabled
type évènement associé au clic facilitant l'action associée button
reset
submit
Le type submit valide le formulaire dans lequel il est contenu. Il est équivalent à la fonction javascript submit().
Le type reset efface tous les champs renseignés dans le formulaire (la fonction javascript équivalente existe également).
Enfin le type button équivaut à un bouton classique.


Exemple d'utilisation de la balise button :





 - Un bouton contenant une image et sur lequel un style a été appliqué :

<button type="button" style="background:white; cursor:hand; border:solid 1px black;"
        style="background:white; cursor:pointer; border:solid 1px black;"
        onclick="alert('Bouton Image');">
  <img src="../images/ico_home_blue.png" alt="home" />
</button>



 - Un bouton classique équivalent a <input type="button" ... > avec différents styles :


<button type="button" onclick="alert('Bouton text');">
  Cliquez ici
</button>


<button style="cursor:pointer; font-class:verdana; font-weight:700;" type="button" onclick="alert('Bouton text');">
  Cliquez ici
</button>


 - Utilisation de l'attribut disabled


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



 - Un bouton contenant une image et sur lequel un style a été appliqué :




 - Un bouton classique équivalent a <input type="button" ... > avec différents styles :

     


 - Utilisation de l'attribut disabled