Forms en JavaScript:
1. Marche à suivre
Un formulaire en JavaScript contient des évenements à
l'intérieur d'une balise <form> et </form>
1. On prépare une balise avev un nom (NAME = "nomForm")
2. À l'intérieur de la balise </form>, dans une balise <input> de type
"txt" et d'un cerain nom, (NAME ="nomEntree"), on entre une valeure "valeure" qui
devient la valeure affectée pour la variable "nomEntree",
3. On déclare cette valeure à l'extérieur de la balise </form>,
comme:
var valeure;
4. Cette valeur doit être enregistrée à l'extérieur de la balise </form>,
comme variable locale dans une fonction, comme suit:
nouveauNom = document.nomForm.nomEntree.value;
5. À l'intérieur de la balise </form>, on prépare une balise <input> de
type "txt" et d'un cerain nom, (NAME ="nomSortie"), pour recevoir le résultat,
6. À l'intérieur de la balise </form>, on ecrit une balise <input> de
type "button" et d'évenement onClick = "une_fontion();" qui declanchera
l'exécution de la fonction "une_fonction()".
Cette fonction "une_fonction()" est decrite à l'extérieur de la balise <form>.
Elle manipulera la valeur enregistrée "nouveau_nom" pour effectuer des opérations
dont le resultat< est envoyé dans balise <input> de nom (NAME ="nomSortie"),
déjà préparée, par l'ecriture suivante:
document.nomForm.nomSortie.value = resultat;
7. Le tout entre les balises de JavaScript <script type="text/javascript"> et </script>
2. Exemple
<html>
<head>
<script type="text/javascript">
<!--
var valeure1;
var valeure2;
function demi_somme()
val1 = document.formule.valeure1.value;
val2 = document.formule.valeure2.value;
//Le nom du formulaire est "formule"
{ //Cette fontion calcule la demi-somme de deux nombres:
var result = (1*val1 + 1*val2)/2;
document.formule.RESULTAT.value = result;
}
// -->
</script>
</head>
<body>
<form name ="formule">
<table width = "500" border = "0">
<tr><td>
<font color = "blue">Entrer une première valeure:</font></TD><TD><
input style="background-color:black; color:lime; TYPE="txt" SIZE="20" VALUE="0" NAME="valeure1"
></td></tr>
<tr><td>
<font color = "red" >Entrer une deuxième valeure</font></TD><TD><
input style="background-color:black; color:lime; TYPE="txt" SIZE="20" VALUE="0" NAME="valeure2"
></td></tr>
</td></tr>
<tr><td>
<input TYPE="button" SIZE ="15" VALUE ="Résultat" NAME="" onClick = "demi_somme();"
style = "color: blue; font-size: 15;font-family:Bookman old style; font-weight:bold;"
> </TD><td>
<input align = "center" style="background-color:black ; color:lime; font-size:15";
TYPE="txt" SIZE="20" NAME="RESULTAT" VALUE="0" color = "red"></td><TD>
</TD></tr>
</table>
</form>
</body>
</html>
L'éxécution donne:
|