Les boutons


Les boutons

Un bouton comme celui-là se crée très facilement ! Il vous suffit dans votre éditeur de taper le code suivant :

 

<input type="button">

 

Ensuite vous pouvez lui affecter un nom :


code :

<input type="button" value="cliquez ici">

 

Vous pouvez lui affecter aussi une action (dans un formulaire) :


code :

<input type="reset" value="Effacer">


code :

<input type="submit" value="Envoyer">

 

  • Vous aurez remarqué que c'est le "value" qui détermine le nom visible du bouton mais que son action est déterminée par le "type"...
  • A noter que dans un formulaire, on emploie principalement type="reset" pour remettre à zéro les données d'un formulaire ou type="submit" pour valider et envoyer ces mêmes données...

En effet, type="button" s'emploie exclusivement lorsque le bouton exécute une action locale, comme du Javascript ou DHTML.

Par exemple

  

Code du premier :

<input type="button" value="Bonjour" onclick="alert('Bonjour !')">


Code du deuxième :

<input type="button" value="Coucou" onclick="alert('Coucou...')">


voici et voici d'autres exemples

souvent, dans un site web, on utillise des boutons pour diverses choses.

pour creer un bouton comme celui-ci :  on tape ce code:

<INPUT TYPE="reset" VALUE="Recommencer">

ou celui ci :  on tape ce code : <INPUT TYPE="submit" VALUE="Envoyer">

 

pour centrer, on tape ce code avant le code des boutons :

<td colspan="2" align="center">

un bouton de test qui, quand on a cliqué dessus, declenche une fenetre :

    <FORM>
    <INPUT type="button" name="nom" value= "Bouton de test"
    onclick="alert('Test réussi !')">
    </FORM>

 

on peut avoir une image dans un bouton (nouveau):

son code :

<form><button onclick="document.location.href = 'http://www.vacanceo.com';return(false);" style="text-align: center; font-family: verdana; font-size: 10px; font-weight: bold; color: rgb(54, 54, 54);">Visitez Vacanceo.com !<br><img src="http://www.vacanceo.com/img/logo.gif" border="0"></button></form>

ce qui est souligne en rouge, c'est la source de l'image

ce qui est souligne en vert, c'est le texte qu'il y a dedans : et oui, c'est un bouton

et en bleu, c'est le lien.

_____________________________________________

on peut avoir un bouton sans image mais qui a un lien :

son code :

<p><input value="accueil de codesource" onclick="location.href='http://codesource.e-monsite.com/accueil.html';" type="button" /></p>

 

et un bouton pratique pour valider un formulaire mais on est oblige a cocher la case pour cliquer dessus :

 

J'accepte le reglement


son code :

<script type="text/javascript">
function ChangeStatut(formulaire) {
if(formulaire.regagree.checked == true) {formulaire.validation.disabled = false }
if(formulaire.regagree.checked == false) {formulaire.validation.disabled = true }
}
</script>

<form action="" methed="post">
<p><input type="checkbox" name="regagree" value="valeur" onClick="ChangeStatut(this.form)" /> J'accepte le reglement</p>

<p><input type="submit" name="validation" value="S'enregistrer" disabled /></p>
</form><noscript><a href="http://www.editeurjavascript.com/">ajax</a></noscript>

et il existe aussi un bouton de redirection :

Créer un site gratuit avec e-monsite - Signaler un contenu illicite sur ce site

×