Les Formulaires en VBScript

Les Formulaires...avec VBScript

Généralités

VBScript permet d'accéder à chaque élément ( objet ) des Formulaires des pages HTML.
Il est possible de les Lire ou de les Ecrire..Et , surtout il est possible de leur associer la gestion d'évènements.
Tout ceci, permettra d'enrichir considérablement les Pages HTML en leur apportant l'Interacitivité avec le visiteur.
Rapelons qu'un formulaire , en HTML, comporte des éléments ( des objets ) tels que :

Comment associer la gestion d'un évènement à un objet de Formulaire?

Par exemple : supposons un objet de formulaire tel qu'un Bouton à cliquer . Il est possible de lui associer un évènement tel que le Click !

<INPUT type="button" value="Essai" OnClick="alert 'Quel beau Click!'">

Cependant les Navigateurs savent gèrer les Evènements dans les 2 langages Script ( JavaScript et VBScript ) mais ils
utilisent JavaScript par défaut .. donc, dans notre cas, nous devons prévenir le navigateur que le langage script est VBScript..Pour cela...transformons le contenu de notre balise HTML ainsi:

<INPUT type="button" value="Essai" language="VBScript" OnClick="alert 'Quel beau Click!'">

Reconnaissons que cette écriture complique un peu nos Scripts..Calmez vous on va faire mieux!!

Ecrivons un script faisant la même action mais utilisant une procédure :

<HTML>

<Head>

<Script language="VBScript">

sub message(mes)

alert( mes )

end sub

</Script>

<BODY>

<form name="formu">

<input type="button" value="Essai" onClick="message 'quel beau click!!'">

</FORM>

</BODY>

</HTML>

L'objet de Formulaire : zone de saisie de Texte

Rappel: en HTML une zone de saisie se créée ainsi:

<input type="text" size=20 name="zone">

Cet objet comporte des propriétés telles que :

name
value

Ecrivons une page HTML comprenant une zone de saisie , une zone à écrire et un bouton à cliquer.
Ajoutons le script VBScript permettant de copier le texte de la zone de saisie que vous aurez entré dans la zone à écrire..et cela lorsque l'on clique sur le bouton...

<HTML>

<HEAD>

<SCRIPT language="VBScript">

Sub ecrire()

lit= document. formul.zone_saisie.value

document.formul.zone_ecrite.value=lit

End Sub

</SCRIPT>

</HEAD>

<BODY>

<FORM NAME="formul">

<CENTER>

<INPUT TYPE="text" NAME="zone_saisie" >

<INPUT TYPE="button" VALUE="Copier" onClick="ecrire()">

<INPUT TYPE="text" NAME="zone_ecrite" > <BR>

</FORM>

</BODY>

</HTML>

Entrez un texte dans la zone de saisie ( à gauche ) et Cliquez sur le bouton!! Expliquons..:
Dès que le bouton est cliqué l'évènement Click appelle la procédure ecrire().
Cette procédure écrite en VBScript affecte à la propriété value de la zone à écrire la propriété value de la zone de saisie.
Ici ces 2 propriétés sont atteintes en citant toute la hiérarchie des objets ..
Notre page ..c'est l'objet document ..qui contient l'objet formul ..qui contient l'objet zone_saisie ..qui possède la propriété value.
Ce qui constitue le nom complet: document.formul.zone_saisie.value

REMARQUE
Il est possible de rendre encore plus compacte l'écriture de la Procédure( mais cela vous complique peut-être? ..alors oubliez-la !)

Sub ecrire()

document.formul.zone_ecrite.value=document. formul.zone_saisie.value

End Sub

Les boutons radio
Les boutons radio sont ces petites cases rondes à cocher qui existent par groupe dans lequel une seule peut être cochée à la fois.
Ils possèdent les propriétés suivantes:

name
value
items()..comme un tableau indicé..0 pour le 1er,1 pour le second, etc..
checked si coché
defaultchecked pour cocher un bouton à l'origine..

Ils permettent donc de choisir un cas parmi plusieurs..
Par exemple..imaginons le choix entre 3 moyens de transport :
Voiture, Train, Avion.

<HTML>

<HEAD>

<SCRIPT language="VBScript">

Sub tri()

dim flag_trouve 'sert à savoir si 1 item a été coché

flag_trouve=false

for i=0 to 2

if ( document.formul.transport.item(i).checked) then

msgbox "Vous avez choisi : " + document.formul.transport.item(i).value

flag_trouve=true '1 item a été coché

end if

next

if flag_trouve=false then ' aucun item n'a été coché !

alert "Oh..là là ..Vous avez oublié de cocher une option !!"

end if

End Sub

</SCRIPT>

</HEAD>

<BODY> Entrez votre choix :

<FORM NAME="formul">

<center>

Choisissez votre moyen de transport

<table width=80%>

<tr>

<td>INPUT TYPE="radio" NAME="transport" VALUE="Voiture">Transport routier </TD>

<td><INPUT TYPE="radio" NAME="transport" VALUE="Train" >Transport ferroviaire</TD>

<td><INPUT TYPE="radio" NAME="transport" VALUE="Avion" >Transport aérien</TD>

</TR><TR>

<td align=center><INPUT TYPE="button" VALUE="Vous avez choisi" onClick="tri()"> </TD>

</TR>

</TABLE>

</center>

</FORM>

</BODY>

</HTML>

Choisissez votre moyen de transport

Transport routier	Transport ferroviaire	Transport aérien

Remarquons surtout:

Les 3 boutons faisant partie du même groupe ont le même nom.
La procédure tri() utilise une boucle for qui parcourt la propriété des 3 items ( de 0 à 2 ) pour savoir quelle est celui qui a été cliqué..Si , aucun n'a été cliqué unmessage d'avertissement est créé.
Pour détecter si 1 item a été cliqué par l'utilisateur, j'ai créé une variable qui est initialisée à FAUX(false) avant la boucle for et qui passera à VRAI ( true) si 1 item a été coché.

Liste de sélection

C'est une liste déroulante proposant plusieurs options que l'on peut cliquer pour sélectionner..
Les propriétés de ces listes sont:

name
length
options()...un peu comme le tableau d'items ci-dessus !
selectedIndex
defaultselected

Reprenons le même exemple que ci-dessus avec les boutons radio..

<HTML>

<HEAD>

<SCRIPT language="VBscript">

Sub sel()

alert "Vous avez choisi : "+

document.formul.transp.options(document.formul.transp.selectedIndex).value

end sub

</SCRIPT>

</HEAD>

<BODY> Entrez votre choix :

<FORM NAME="formul">

<center>

<SELECT NAME="transp">

<OPTION VALUE="Route">Routier

<OPTION VALUE="Train">Ferroviaire

<OPTION VALUE="Avion">Aérien

</SELECT>

<INPUT type="button" value="Vous avez choisi" onClick="sel()">

</center>

</FORM>

</BODY>

</HTML>

Remarquons surtout:

La procédure sel() repère quelle est l'option cliquée en utlisant son tableau d'options et l'indice:selectedIndex qui représente le n° de l'option cliquée..
La propriété affichée est value mais on aurait pû afficher la propriété text
Il existe aussi la possibilité d'utiliser la syntaxe suivante ( qui ne fait pas intervenir la balise <script>..mais alors, attention aux guillemets et apostrophes ! ).

<INPUT type="button" value="Vous avez choisi" language="VBScript" onClick="alert 'Vous avez choisi : '+
document.formul.transp.options(document.formul.transp.selectedIndex).value ">

Les Boutons

Bouton submit permet de soumettre le Formulaire au serveur...
Bouton Reset permet de réinitialiser les objets du Formulaire
Bouton permet de servir de bouton ! ..bon à tout faire !!..à condition d'exploiter l'évènement Click en VBScript

Ils possèdent les propriétés suivantes:

name pour lui donner un nom exploitable en VBScript
value pour lui affecter un texte sur le corps..( le tatouer !!)

<html>

<body>

<script language="VBSript"><!--

sub change()

dim tamp

tamp=document.fb.b1.value

document.fb.b1.value=document.fb.b3.value

document.fb.b3.value=tamp

end sub

'-->

</script>

<form name="fb">

<center>

<input type="button" name="b1" value="Bouton Gauche">

<input type="button" name="b2" value="Commande" onClick="change()">

<input type="button" name="b3" value="Bouton Droit">

</center>

</form>

</body>

</html>

Chaque Click sur le bouton 'Commande' inverse les textes écrits sur les 2 autres boutons.

Tous ces exemples vous permettent d'aborder le principe de gestion des évènements et l'exploitation des propriétés des objets de Formulaire en VBScript..