| Javascript
 |
Généralités
Avec Javascript, les formulaires Html
prennent une toute autre dimension. N'oublions pas qu'en Javascript,
on peut accéder à chaque élément d'un formulaire pour, par exemple, y
aller lire ou écrire une valeur, noter un choix auquel on pourra
associer un gestionnaire d'événement... Tous ces éléments
renforceront grandement les capacités interactives de vos pages.
Mettons au point le vocabulaire que nous
utiliserons. Un formulaire est l'élément Html déclaré par les balises
<FORM></FORM>. Un formulaire contient un ou
plusieurs éléments que nous appellerons des contrôles (widgets). Ces
contrôles sont notés par exemple par la balise <INPUT
TYPE= ...>.
|
|
Déclaration d'un formulaire
La déclaration d'un formulaire se fait par
les balises <FORM> et </FORM>.
Il faut noter qu'en Javascript, l'attribut NAME="nom_du_formulaire"
a toute son importance pour désigner le chemin complet des éléments.
En outre, les attributs ACTION et
METHOD sont facultatifs pour autant que vous
ne faites pas appel au serveur.
Une erreur classique en Javascript est,
emporté par son élan, d'oublier de déclarer la fin du formulaire
</FORM> après avoir incorporé un contrôle.
|
|
Le contrôle ligne de texte
La zone de texte est l'élément
d'entrée/sortie par excellence de Javascript. La syntaxe Html est
<INPUT TYPE="text" NAME="nom" SIZE=x MAXLENGTH=y> pour un champ de
saisie d'une seule ligne, de longueur x et de longueur maximale de y.
L'objet text possède trois propriétés :
Propriété
|
Propriété |
Description |
| name |
indique le nom du contrôle par lequel on pourra accéder. |
| defaultvalue |
indique la valeur par défaut qui sera affichée dans la zone
de texte. |
| value |
indique la valeur en cours de la zone de texte. Soit celle
tapée par l'utilisateur ou si celui-ci n'a rien tapé, la valeur
par défaut. |
Lire une valeur dans une zone de texte
Voici un exemple que nous détaillerons :
Voici une zone de texte. Entrez une valeur
et appuyer sur le bouton pour contrôler celle-ci.
Le script complet est celui-ci :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function controle(form1) {
var test = document.form1.input.value;
alert("Vous avez tapé : " + test);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<INPUT TYPE="text" NAME="input" VALUE=""><BR>
<INPUT TYPE="button" NAME="bouton" VALUE="Contrôler"
onClick="controle(form1)">
</FORM>
</BODY>
</HTML>
Lorsqu'on clique le bouton "contrôler",
Javascript appelle la fonction controle() à laquelle on passe le
formulaire dont le nom est form1 comme argument.
Cette fonction controle() définie dans les balises <HEAD> prend sous
la variable test, la valeur de la zone de texte. Pour accéder à cette
valeur, on note le chemin complet de celle-ci (voir le chapitre "Un
peu de théorie objet"). Soit dans le document présent, il y a
l'objet formulaire appelé form1 qui contient le contrôle de texte
nommé input et qui a comme propriété l'élément de valeur value. Ce
qui donne document.form1.input.value.
Ecrire une valeur dans une zone de texte
Entrez une valeur quelconque dans la zone de
texte d'entrée. Appuyer sur le bouton pour afficher cette valeur dans
la zone de texte de sortie.
Voici le code :
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function afficher(form2) {
var testin =document. form2.input.value;
document.form2.output.value=testin
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form2">
<INPUT TYPE="text" NAME="input" VALUE=""> Zone de texte d'entrée <BR>
<INPUT TYPE="button" NAME="bouton" VALUE="Afficher"
onClick="afficher(form2)"><BR>
<INPUT TYPE="text" NAME="output" VALUE=""> Zone de texte de sortie
</FORM>
</BODY>
</HTML>
Lorsqu'on clique le bouton "Afficher",
Javascript appelle la fonction afficher() à laquelle on passe le
formulaire dont le nom est cette fois form2 comme argument.
Cette fonction afficher() définie dans les balises
<HEAD> prend sous la variable testin, la valeur de la zone de
texte d'entrée. A l'instruction suivante, on dit à Javascript que la
valeur de la zone de texte output comprise dans le formulaire nommé
form2 est celle de la variable testin. A nouveau, on a utilisé le
chemin complet pour arriver à la propriété valeur de l'objet souhaité
soit en Javascript document.form2.output.value.
|
|
Les boutons radio
Les boutons radio sont utilisés pour noter
un choix, et seulement un seul, parmi un ensemble de
propositions.
Propriété
|
Propriété |
Description |
| name |
indique le nom du contrôle. Tous les boutons portent le même
nom. |
| index |
l'index ou le rang du bouton radio en commençant par 0. |
| checked |
indique l'état en cours de l'élément radio |
| defaultchecked |
indique l'état du bouton sélectionné par défaut. |
| value |
indique la valeur de l'élément radio. |
Prenons un exemple :
<HTML>
<HEAD>
<SCRIPT language="javascript">
function choixprop(form3) {
if (form3.choix[0].checked) { alert("Vous avez choisi la proposition
" + form3.choix[0].value) };
if (form3.choix[1].checked) { alert("Vous avez choisi la proposition
" + form3.choix[1].value) };
if (form3.choix[2].checked) { alert("Vous avez choisi la proposition
" + form3.choix[2].value) };
}
</SCRIPT>
</HEAD>
<BODY>
Entrez votre choix :
<FORM NAME="form3">
<INPUT TYPE="radio" NAME="choix" VALUE="1">Choix numéro 1<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="2">Choix numéro 2<BR>
<INPUT TYPE="radio" NAME="choix" VALUE="3">Choix numéro 3<BR>
<INPUT TYPE="button"NAME="but" VALUE="Quel et votre choix ?"
onClick="choixprop(form3)">
</FORM>
</BODY>
</HTML>
PS: Ce programme a été écrit avec un souci didactique. On pourrait
l'écrire avec des codes plus compacts.
Entrez votre choix :
Dans le formulaire nommé form3, on déclare trois boutons radio.
Notez que l'on utilise le même nom pour les trois boutons. Vient
ensuite un bouton qui déclenche la fonction choixprop().
Cette fonction teste quel bouton radio est coché. On accède aux
boutons sous forme d'indice par rapport au nom des boutons radio soit
choix[0], choix[1], choix[2]. On teste la propriété checked du bouton
par if(form3.choix[x].checked). Dans l'affirmative, une boite
d'alerte s'affiche. Ce message reprend la valeur attachée à chaque
bouton par le chemin form3.choix[x].value.
|
|
Les boutons case à cocher (checkbox)
Les boutons case à cocher sont utilisés pour noter un ou
plusieurs choix (pour rappel avec les boutons radio un seul
choix) parmi un ensemble de propositions. A part cela, sa syntaxe et
son usage est tout à fait semblable aux boutons radio sauf en ce qui
concerne l'attribut name.
Propriété
|
Propriété |
Description |
| name |
indique le nom du contrôle. Toutes les cases à cocher portent
un nom différent. |
| checked |
indique l'état en cours de l'élément case à cocher. |
| defaultchecked |
indique l'état du bouton sélectionné par défaut. |
| value |
indique la valeur de l'élément case à cocher. |
Entrez votre choix :
Il faut sélectionner les numéros 1,2 et 4 pour avoir la bonne
réponse.
<HTML>
<HEAD>
<script language="javascript">
function reponse(form4) {
if ( (form4.check1.checked) == true && (form4.check2.checked) == true
&& (form4.check3.checked) == false && (form4.check4.checked) == true)
{ alert("C'est la bonne réponse! ") }
else
{alert("Désolé, continuez à chercher.")}
}
</SCRIPT>
</HEAD>
<BODY>
Entrez votre choix :
<FORM NAME="form4">
<INPUT TYPE="CHECKBOX" NAME="check1" VALUE="1">Choix numéro 1<BR>
<INPUT TYPE="CHECKBOX" NAME="check2" VALUE="2">Choix numéro 2<BR>
<INPUT TYPE="CHECKBOX" NAME="check3" VALUE="3">Choix numéro 3<BR>
<INPUT TYPE="CHECKBOX" NAME="check4" VALUE="4">Choix numéro 4<BR>
<INPUT TYPE="button"NAME="but" VALUE="Corriger"
onClick="reponse(form4)">
</FORM>
</BODY>
</HTML>
Dans le formulaire nommé form4, on déclare quatre cases à cocher.
Notez que l'on utilise un nom différent pour les quatre boutons.
Vient ensuite un bouton qui déclenche la fonction reponse().
Cette fonction teste quelles cases à cocher sont sélectionnées. Pour
avoir la bonne réponse, il faut que les cases 1, 2 et 4 soient
cochées. On accède aux cases en utilisant chaque fois leur nom. On
teste la propriété checked du bouton par
(form4.nom_de_la_case.checked). Dans l'affirmative (&& pour et
logique), une boite d'alerte s'affiche pour la bonne réponse. Dans la
négative, une autre boite d'alerte vous invite à recommencer.
|
|
Liste de sélection
Le contrôle liste de sélection vous permet de proposer diverses
options sous la forme d'une liste déroulante dans laquelle
l'utilisateur peut cliquer pour faire son choix. Ce choix reste alors
affiché.
La boite de la liste est crée par la balise <SELECT>
et les éléments de la liste par un ou plusieurs tags
<OPTION>. La balise </SELECT> termine
la liste.
Propriété
|
Propriété |
Description |
| name |
indique le nom de la liste déroulante. |
| length |
indique le nombre d'éléments de la liste. S'il est indiqué
dans le tag <SELECT>, tous les éléments de
la liste seront affichés. Si vous ne l'indiquez pas un seul
apparaîtra dans la boite de la liste déroulante. |
| selectedIndex |
indique le rang à partir de 0 de l'élément de la liste qui a
été sélectionné par l'utilisateur. |
| defaultselected |
indique l'élément de la liste sélectionné par défaut. C'est
lui qui apparaît alors dans la petite boite. |
Un petit exemple comme d'habitude :
Entrez votre choix :
<HTML>
<HEAD>
<script language="javascript"> function
liste(form5) {
alert("L\'élément " + (form5.list.selectedIndex + 1)); }
</SCRIPT>
</HEAD>
<BODY>
Entrez votre choix : <FORM NAME="form5">
<SELECT NAME="list">
<OPTION VALUE="1">Elément 1
<OPTION VALUE="2">Elément 2
<OPTION VALUE="3">Elément 3
</SELECT>
<INPUT TYPE="button"NAME="b" VALUE="Quel est l'élément retenu?"
onClick="liste(form5)"> </FORM>
</BODY>
</HTML>
Dans le formulaire nommé form5, on déclare une liste de sélection
par la balise <SELECT></SELECT>. Entre ses
deux balises, on déclare les différents éléments de la liste par
autant de tags <OPTION>. Vient ensuite un
bouton qui déclenche la fonction liste().
Cette fonction teste quelle option a été sélectionnée. Le chemin
complet de l'élément sélectionné est
form5.nomdelaliste.selectedIndex. Comme l'index commence à 0, il ne
faut pas oublier d'ajouter 1 pour retrouver le juste rang de
l'élément.
|
Fin de la partie prévue pour les débutants --- Début de la partie
considérée comme avancée
|
|
Le contrôle textarea
(pour les bavards)
L'objet textarea est une zone de texte de
plusieurs lignes.
La syntaxe Html est :
où ROWS=x représente le nombre de lignes et
COLS=y représente le nombre de colonnes.
L'objet textarea possède plusieurs
propriétés :
|
Propriété |
Description |
| name |
indique le nom du contrôle par lequel on pourra accéder. |
| defaultvalue |
indique la valeur par défaut qui sera affichée dans la zone
de texte. |
| value |
indique la valeur en cours de la zone de texte. Soit celle
tapée par l'utilisateur ou si celui-ci n'a rien tapé, la valeur
par défaut. |
A ces propriétés, il faut ajouter onFocus(), onBlur(), onSelect()
et onChange().
En Javascript, on utilisera \r\n
pour passer à la ligne.
Comme par exemple dans l'expression document.Form.Text.value =
'Check\r\nthis\r\nout'.
|
|
Le contrôle Reset
Le contrôle Reset permet d'annuler les modifications apportées aux
contrôles d'un formulaire et de restaurer les valeurs par défaut.
la syntaxe Html est :
<INPUT TYPE="reset" NAME="nom"
VALUE="texte">
où VALUE donne le texte du bouton.
Une seule méthode est associée au contrôle Reset, c'est la méthode
onClick(). Ce qui peut servir, par exemple, pour faire afficher une
autre valeur que celle par défaut.
|
|
Le contrôle Submit
Le contrôle a la tâche spécifique de transmettre toutes les
informations contenues dans le formulaire à l'URL désignée dans
l'attribut ACTION du tag <FORM>.
la syntaxe Html est :
<INPUT TYPE="submit" NAME="nom"
VALUE="texte">
où VALUE donne le texte du bouton.
Une seule méthode est associée au contrôle Submit, c'est la
méthode onClick().
|
|
Le contrôle Hidden (caché)
Le contrôle Hidden permet d'entrer dans le script des éléments
(généralement des données) qui n'apparaîtront pas à l'écran. Ces
éléments sont donc cachés. D'où son nom.
la syntaxe Html est :
<INPUT TYPE="hidden" NAME="nom" VALUE=
"les données cachées">
|
|
L'envoi d'un formulaire par Email.
A force de jouer avec des formulaires, il
peut vous prendre l'envie de garder cette source d'information. Mais
comment faire? Javascript, et à fortiori le Html, ne permet pas
d'écrire dans un fichier . Ensuite, le contrôle Submit est surtout
destiné à des CGI ce qui entraîne (encore) un codage spécial à
maîtriser. D'autant que pour nous simples et présumés incompétents
internautes, la plupart des providers ne permettra pas d'héberger une
CGI faite par un amateur pour des raisons (tout à fait
compréhensibles) de sécurité. Il ne reste plus que l'unique solution
de l'envoi d'un formulaire via le courrier électronique.
La syntaxe est :
<FORM METHOD="post"
ACTION="mailto:votre_adresse_Email">
<INPUT TYPE=text NAME="nom">
<TEXTAREA NAME="adresse" ROWS=2 COLS=35>
</TEXTAREA>
<INPUT TYPE=submit VALUE="Submit">
</FORM>
Ce qui donne :
Vous recevrez dans notre boite de réception,
un truc bizarre du genre :
nom=Van+Lancker+Luc&adresse=Rue+des+Brasseurs+2217OD%OA7700+Mouscron.
où on retrouve les champs nom= et adresse=, où les champs sont
séparés par le signe &, où les espaces sont remplacés par le signe +
et 17%OD%OA correspond à un passage à la ligne.
Attention ! Ceci ne marche sous Netscape et
sous Explorer 4.0 et plus (pas sous Explorer 3.0) ...
Avec Explorer, le mailto ouvre le
programme de Mail mais n'envoie rien du tout. |
|
