<< Retour au sommaire

 

 

Objets & formulaires

 

 

 

Le sommaire :

  1. Introduction.
  2. Un exemple de bouton de saisie.
  3. Un exemple de vérification de saisie.

 

 

Introduction

 

En VBscript, nous travaillons dans un environnement objets.

 

Par exemple, la page affichée dans le navigateur est l’objet  dit « document ».

 

Dans cette objet, se trouvent des sous objets, tels que les formulaires etc.

 

Puis, dans un formulaire, nous trouvons des champs !

 

Nous avons donc une certaine hiérarchie d’objets, et grâce à cela, nous pouvons agir sur les champs !

 

Cet aspect, propre aux langages de script sur le WEB, apporte une amélioration considérable en terme d’interactivité.

 

Seulement, pour accéder aux propriétés d’un champ de formulaire, nous devons spécifier l’intégralité du chemin depuis l’objet principal, le document, jusqu’à la propriété elle-même.

 

C’est la raison pour laquelle nous devons impérativement nommer les formulaires est les champs par l’intermédiaire de l’attribut « name ».

 

 


Un exemple de bouton de saisie

 

Dans l’exemple qui suit, nous avons un formulaire très simple.

 

  1. Une zone d’édition dans laquelle on doit saisir le pays dans lequel on vit.
  2. Un bouton « Effacer » qui permet d’effacer le formulaire, il s’agit d’un bouton de type « reset ».
  3. Un bouton « Insérer » qui permet d’exécuter la procédure évènementielle « insertion_OnClick », qui va insérer le texte « LA France » directement dans la zone d’édition.

 

Afficher l’exemple >>

 

Le code :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<script type="text/VBscript">

' Procédure évènementielle associée au clic gauche sur le bouton "Insérer"

Sub insertion_OnClick()

' Insertion de "LA FRANCE" dans la zone d'édition du formulaire

document.question.pays.value="LA FRANCE"

End Sub

</script>

<title>Jeu de formulaire</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<body>

<table border="2">

<caption>Manipulation de formulaires</caption>

<tr><td>

Cliquez sur le bouton "Insérer" pour insérer la FRANCE dans la zone d'édition.

</td></tr>

<tr><td>

<form name="question">

<label for="pays">

Où habitez-vous ?<br />

</label>

<input type="text" name="pays" id="pays" size="25" maxlength="25" />

<br />

<input type="button" value="Insérer" name="insertion" />

<br />

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

</form>

</td></tr>

</table>

</body>

</html>

 

 


Un exemple de vérification de saisie

 

Dans cet exemple, la procédure évènementielle « pseudo_OnBlur » vérifie la saisie du pseudo de l’utilisateur.

 

Si le pseudo « toto » est saisi, un message d’erreur est affiché et le mot « erreur » est automatiquement affiché dans la zone d’édition.

 

Bien sûr, pour vérifier la saisie, nous sommes obligés de faire référence à la zone d’édition « pseudo » par l’intermédiaire de l’arborescence complète depuis l’objet principal « document ».

 

Afficher l’exemple >>

 

Le code :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<script type="text/VBscript">

' Procédure évènementielle de perte de focus sur pseudo

Sub pseudo_OnBlur()

' Vérifie si toto n'a pas été saisi

if document.formulaire.pseudo.value="toto" then

 ' Erreur, c'est toto qui a été saisi

 ' affichage d'un message d'erreur

 MsgBox("Désolé !"&CHR(13)&"Vous n'allez pas me faire le coup !"&CHR(13)&"Saisissez un autre pseudo...")

 ' affichage de "erreur" dans pseudo dans

 document.formulaire.pseudo.value="erreur"

End If

End Sub

</script>

<title>Jeu de formulaire</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<body>

<table border="2">

<caption>Demande à l'utilisateur de saisir son pseudo SKYPE</caption>

<tr><td>

<form name="formulaire">

<label for="pseudo">

Saisissez ici votre pseudo : </label>

<input type="text" name="pseudo" id="pseudo" size="15" maxlength="15" />

</td></tr>

<tr><td>

<input type="reset" value="Effacer le formulaire" />

</td></tr></table></form>

</body>

</html>

 

Philippe BOULANGER