Les contrôles de formulaire


Attention ! Les exemples VBscript ne fonctionneront pas sous Netscape.

Généralités

Avec les langages de script, les formulaires Html prennent une toute autre dimension. N'oublions pas qu'en VBscript (comme 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 (à ne pas confondre avec le sens Visual Basic du terme) 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= ...>.


 
Procédure événementielle simplifiée (ou explicite)

Plutôt que de créer une procédure événementielle comme décrit dans le chapitre précédent (procédure d'événement implicite), on peut inclure l'événement comme un attribut de la balise <INPUT...> du formulaire. Cet attribut prendra la forme :

    <INPUT ... On-Evénement="instruction">

Soit dans le cas de notre bouton "test" qui affiche une boite de message au clic de l'utilisateur :

    <INPUT type="button" name="test" value="Pour un test"
    OnClick="MsgBox 'Test réussi!'">

Mais cette déclaration de procédure n'est pas encore complète. Il faut encore spécifier au browser à quel langage de script vous faites référence. Dans le cas présent du VBscript et non du Javascript (assumé par défaut).

    <INPUT type="button" name="test" value="Pour un test"
    language="VBscript" OnClick="MsgBox 'Test réussi!'">

Ce genre de notation, assurément empruntée à Javascript, est fort pratique mais son usage intensif compliquera la relecture de vos scripts.


 
Le contrôle ligne de texte

Nous passons en ci-dessous quelques contrôles de formulaire avec une application en VBscript.

La ligne de texte est l'élément d'entrée/sortie par excellence de langage de script. 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 : name, defaultvalue, value.

Prenons un exemple tout simple. 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.

  Zone de texte d'entrée

  Zone de texte de sortie

Le code est :

<HTML>
<HEAD>
<SCRIPT language="VBscript">
Function afficher(form2)
test =document. form2.input.value
document.form2.output.value=test
End Function
</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" (onClick), VBscript appelle la fonction afficher() à laquelle on passe comme argument le formulaire dont le nom est form2 .
Cette fonction afficher() définie dans les balises <HEAD> prend sous la variable test, la valeur de la zone de texte d'entrée. 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é form2 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.form2.input.value.A l'instruction suivante, on dit à VBscript que la valeur de la zone de texte output comprise dans le document.formulaire nommé form2 est celle de la variable test. A nouveau, on a utilisé le chemin complet pour arriver à la propriété valeur de l'objet souhaité soit en VBscript 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. L'objet radio possède plusieurs propriétés : name, value, item(pour le rang du bouton en commençant par 0, checked et defaultchecked.

Prenons un exemple :

Choix numéro 1
Choix numéro 2
Choix numéro 3

<HTML>
<HEAD>
<SCRIPT language="VBscript">
Function choix(form3)
If (form3.choix.item(0).checked) Then
alert("Choix " + form3.choix.item(0).value)
End If
If (form3.choix.item(1).checked) Then
alert("Choix " + form3.choix.item(1).value)
End If
If (form3.choix.item(2).checked) Then
alert("Choix " + form3.choix.item(2).value)
End If
End Function
</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="choix(form3)">
</FORM>
</BODY>
</HTML>
PS: Ce programme a été écrit avec un souci didactique. On pourrait l'écrire avec des codes plus compacts.

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 choix().
Cette fonction teste quel bouton radio est coché. On accède aux boutons sous forme d'indice par rapport à la propriété item du bouton radio nommé "choix" soit choix.item(0), choix.item(1) et choix.item(2). On teste la propriété checked du bouton par if(form3.choix.item(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.item(x).value.


 
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. Comme propriétés, on a name, length, selectedIndex (à partir de 0), defaultselected,

Un petit exemple comme d'habitude :

Entrez votre choix :

<HTML>
<HEAD>
<SCRIPT language="VBscript">
Function liste(form5)
MsgBox "Elément " & (form5.list.selectedIndex + 1)
End Function
</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.

Le même exemple avec la procédure événementielle simplifiée décrite plus haut, donnerait :

</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?"
language="VBscript"
onClick="MsgBox 'Elément ' & (form5.list.selectedIndex + 1)">
</FORM>
</BODY>
</HTML>


 
Pour terminer

Il existe d'autres contrôles de formulaires (textarea, submit, bouton checkbox...) que nous vous laissons découvrir lors de vos études ultérieures de VBscript.