Formulaires : Les boutons

Pour obtenir un bouton, il est nécessaire de le préciser :

<INPUT type="button">

Voici le résultat :

Pour écrire quelque chose sur ce bouton qui sinon est tout gris (ou montre "button", ça dépend des éditeurs), il faut lui préciser le Value :

<INPUT type="button" value="Cliquez sur moi">

Voici le résultat :

Afin de pouvoir utiliser ce bouton dans JavaScript, il est nécessaire de lui donner un nom, avec l'attribut Name :

<INPUT type="button" value="Cliquez sur moi" name=LeBouton>

Ce qui va permettre de le récupérer dans un code JavaScript :

<BODY>
  <INPUT type="button" value="Cliquez sur moi" name=LeBouton>
  <SCRIPT LANGUAGE = "JavaScript">
    alert (window.LeBouton.name)
// ou simplement LeBouton.Name
  </SCRIPT>
</BODY>

Attention : Il ne va pas afficher le résultat quand vous cliquez sur le bouton, mais directement en chargeant la page qui contient ce code !

Comme on peut s'y attendre, alert (window.LeBouton.value) afficherait "Cliquez sur moi".

Il est possible de déterminer les dimensions de ce bouton. Cet exemple élargit la taille du bouton à 180 pixels :

<INPUT type="button" style="WIDTH : 180px">

Le voici :

Admettons qu'on veuille également augmenter sa hauteur à 50 pixels :

<INPUT type="button" style="WIDTH : 180px; HEIGHT : 50px">

Le voici :

Appel à JavaScript en cas de clic sur ce bouton

Dans cet exemple, nous allons simplement donner une boîte de dialogue alert dès qu'on clique : Constatez les apostrophes à la place des guillemets autour de 'Vous venez de cliquer', pusque l'appel à javascript est lui-même encadré par des guillemets : "javascript:alert('Vous venez de cliquer')"

<INPUT type="button" onClick="javascript:alert('Vous venez de cliquer')">

Cliquez sur ce bouton pour voir :

Bien entendu, il est plus sympa d'appeler une fonction JavaScript en en-tête de fichier HTML :

<SCRIPT LANGUAGE = "JavaScript">
  function Truc()
  {
  alert("Vous venez de cliquer")
  alert("Et voilà...")
  }

</SCRIPT>

<HTML>
  <HEAD>  </HEAD>
  <BODY>
    <INPUT type="button" onClick="javascript:Truc()">
  </BODY>
</HTML>