Forms

Tutoriaux, Sommaire JavaScript

1. Définition
    On peut se représenter une forme dans une page Html comme un cadre englobant un certains nombre de composants d'interface, (zone de texte, boutons, liste déroulante, case à cocher, etc...). Ces formes apportent un bon système d'interactivité entre l'utilisateur et le programme. Il peut exister un certain nombres de formes séparées dans une page.

2. Rappel de syntaxe

       Les éléments d'une forme doivent être compris entre les tags,
    <form> et </form>
    principaux éléments,

<INPUT TYPE="BUTTON" NAME="ValideTransaction" VALUE="Valider" ONCLICK="JScode">
<INPUT TYPE="PASSWORD" MAXLENGTH="20" NAME="Passe" ONSELECT="JSCode" SIZE="10" VALUE="">
<INPUT TYPE="CHECKBOX" CHECKED NAME="name" ONCLICK="JScode" VALUE="checkboxValue"> Opinion 1
<INPUT TYPE="RADIO" CHECKED NAME="Reside" ONCLICK="JSCode" VALUE="Res"> Résident
Visiteur
<INPUT TYPE="RESET" NAME="name" ONCLICK="JScode" VALUE="label">
<INPUT TYPE="TEXT" MAXLENGTH="50" NAME="Texte1" ONBLUR="JScode" ONCHANGE="JScode"  ONFOCUS="JScode"  ONSELECT="JScode" SIZE="25" VALUE="Texte à afficher">
<SELECT NAME="Liste1" MULTIPLE  ONBLUR="JScode" ONCHANGE="JScode"  ONCLICK="JScode" ONFOCUS="JScode" SIZE="2"><OPTION...>...<OPTION ...> </SELECT>
<TEXTAREA COLS="20" NAME="name" ONBLUR="JScode" ONCHANGE="JScode" ONFOCUS="JScode" ONSELECT="JScode" ROWS="5"  WRAP="OFF"|"HARD"|"SOFT">Texte à afficher</TEXTAREA>


3. Evénements

   Dans le cours d'un programme, on a souvent besoin de provoquer des actions à partir d'événements précis, (chargement d'une page, passage de la souris, changement du contenu d'un élément, etc...). Dans le cadre des formes, un certain nombre d'événements sont pris en compte. Les événements pris en compte dépendent du type d'éléments. Dans le tableau ci-dessus, vous trouvez pour chaque élément, les événements sous la forme, onclick="JSCode", onselect="JSCode", onchange="JSCode". Ces syntaxes se référent à la nature de l'événement géré, (exemple onclick, quand vous effectué un click avec le bouton gauche de la souris sur l'élément). L'indication "JSCode", indique que cet événement déclenchera l'exécution d'instruction Javascript,
    soit sous forme immédiate,
    onclick="javascript:alert('Bonjour')"
    ou par l'appel d'une procédure,
    onclick = "Validation(0)"
    Nous allons donc écrire une forme très simple, consistant en un bouton et un texte définissant l'action à effectuer. Un click sur ce bouton déclenchera une fonction Valide() affichant un message alert().
    Si vous vous référez au tableau ci dessus vous verrez que l'élément,  input type="button", (Bouton poussoir), accepte un type d'évenement, onclick.
    Forme,
<form name="Transaction">
Cliquez pour valider <input type="button" name="ValideTransaction" value="Valider" onclick="Valide()">
</form>
    Le script se trouve dans la forme ci-dessous après la forme, dans une page normale, il pourrait être dans l'en-tête, (avant </head>), ou avant la forme.
    <SCRIPT>
    function Valide(){
        alert("Validé")
    }
</SCRIPT>

Code de la page:

     


4. Communication avec JavaScript

   Les éléments d'une forme sont caractérisés par un nom, (name), ce qui permet d'adresser un élément.
    Soit un élément de type texte contenu dans une forme nommé "Transaction",
<input type="text" maxlength="50" name="Texte1" size="25" value="">
    L'adressage de cet élément nommé Texte1, pourra être, (il existe plusieurs syntaxes possibles),
    document.Transaction.Texte1.value
    Après la référence à l'objet document, nous trouvons, le nom de la forme, (Transaction), le nom de l'élément dans cette forme, (Texte1), et une  propriétée de cet élément, ici "value", qui est le contenu de Texte1.
    Cette instruction nous donnera le contenu, (texte), de l'élément comme dans,
    nomClient = document.Transaction.Texte1.value
    Ou permet de changer le texte de Texte1,
    document.Transaction.Texte1.value = "Veuillez saisir un nom validé !"
    Nous allons expérimenter ceci sur un exemple.
    Nous allons créer une forme nommé Transaction.
    Dans cette forme, nous inclurons un élément de type text nommé Texte1, nous permettant d'entrer un texte.
    Nous inclurons aussi un élément bouton, (button), permettant de déclencher le programme. Ce bouton déclenchera une function "Valide()", éditant dans un message alert() le contenu de Texte 1.
    Forme,
<form name="Transaction">
Votre nom Svp <input type="text" maxlength="50" name="Texte1" size="25" value="">
<br><br>
Cliquez pour valider <input type="button" name="ValideTransaction" value="Valider" onclick="Valide()">
</form>
    Nous voyons que nous avons ajouté un élément de type texte destiné à recevoir le nom tapé par le visiteur, le texte au départ est vide, (value="").
    Dans la fonction Valide(), nous allons modifier le message pour y faire apparaître le nom frappé par la visiteur,
function Valide(){
alert("Bonjour " + document.Transaction.Texte1.value)
}
    Vous pouvez exécuter ce programme dans la forme ci-dessous.

Code de la page:

     



5. Tableaux de formes, d'éléments

   L'objet document maintient un tableau des formes présentent sur une page, (forms[ ]), on peut adresser les formes, soit par leur nom,
   
forms[Translation], et pour adresser un élément dans la forme,
    forms[Translation].
Texte1.value
    Soit par un numéro d'ordre, 0 est la premiére forme dans la page, 1 la suivante, etc...
    forms[0].Texte1.value en assumant que la forme Translation est la première dans la page.
    Cette forme d'adressage est valable même si la forme est nommée par name.
    D'une manière similaire, les éléments dans une forme sont groupés dans un tableau, (elements
[ ]), avec les deux modes d'adressage ci-dessus.
    Pour l'élément de type bouton, (nom
ValideTransaction),  dans la forme ci-dessus,
    forms[Translation].elements[
ValideTransaction].value
    forms[0].elements[1].value en assumant que la forme Translation est la première dans la page et que le bouton est le deuxiéme élément dans la forme.
    Cette forme d'adressage est particuliérement pratique pour extraire ou changer des données par des boucles, (for, do, etc.).
    Exemple,
    Nous allons écrire deux formes sur la même page, une pour saisir le nom du visiteur, une autre pour saisir un numéro, elle seront calquées sur la forme précédente, (saisie du nom). nous afficherons les données succesivement par le même message alert(), en se servant de l'adressage en tableau.
    Ecriture des formes,
<form name="FormNom">
Votre nom Svp <input type="text" maxlength="50" name="NomVisit" size="25" value="">
<br>
Cliquez pour valider <input type="button" name="SaisieNom" value="Valider" onclick="Valide(0)">
</form>
<br>
<form name="FormNum">
Votre N° Svp <input type="text" maxlength="50" name="Numero" size="25" value="">
<br>
Cliquez pour valider <input type="button" name="SaisieNumero" value="Valider" onclick="Valide(1)">
</form>
    La seule différence réelle, est le passage dans l'appel de la fonction Valide(), d'un paramêtre donnant le numéro de la forme, valid(0).
function Valide(code){
  alert("Donnée " + document.forms[code].elements[0].value)
}
    On voit que la lecture des données se fait en se servant du numéro de code pour sélectionner la forme et du nombre 0, pour sélectionner le premier élément dans la forme.
   

Code de la page:

     
 
    Exercice,
    Ecrire au Pour pouvoir lire les noms des élément il faut que ceci soient définis, donc aprés la forme dans la page chargement de la page dans le programme de la forme ci-dessus, le nom des formes et de leurs éléments, sous la forme,

NomForm NomElément (en-tête)

FormNom NomVisit
FormNom SaisieNom

FormNum Numero
FormNum SaisieNumero
   
       Ecrire, deux boucles imbriquées, (i, j),  lisant le tableau des forms et le tableau des éléments dans une forme.
    Nom d'une forme, document.forms[i].name
    Nom d'un élément dans une forme index i, document.forms[i].elements[j].name

    Organigramme.

    Corrigé

    Suite Autres événements

Sommaire
Précédent Suivant