Les différentes zones de saisie : marqueur <INPUT>

Les zones de saisie sont marquées par la balise <INPUT>. Ces zones de saisie peuvent permettre de récupérer du texte ou des valeurs logiques, ou bien même des fichiers.

La structure générale du marqueur est la suivante :

<INPUT TYPE="type" NAME="nom"> où type est le type de la zone de saisie et nom est le nom de la variable dans lequel l'information sera stockée.

Zone de saisie de texte

Les zones de saisie de type text :

Ce type de zone de saisie est utilisé pour récupérer du texte saisi par l'utilisateur. Ce texte sera entré dans un cadre s'étendant sur une seule ligne, et dont la dimension est paramétrable (attribut SIZE de <INPUT>). La dimension maximale du texte à saisir est aussi paramétrable(attribut MAXLENGTH de <INPUT>). Une valeur par défaut peut être paramétrée pour chaque zone de saisie (attribut VALUE).

Exemple :

<INPUT TYPE="text" NAME="essai_txt" SIZE="40" MAXLENGTH="38" VALUE="Essai de zone de saisie de type text">

On a définit un champ de type text, de nom essai_text, dont le cadre peut contenir 40 caractères. La valeur par défaut de essai_txt est "Essai de zone de saisie de type text", et la taille maximale de essai_txt est de 38 caractères. Le texte saisi par l'utilisateur est contenu dans la variable essai_txt après validation du questionnaire.

Résultat :

Les zones de saisie de type <TEXTAREA> :

Avec ce marqueur <TEXTAREA>, le texte peut être entré sur plusieurs lignes. La largeur (attribut ROWS) et la hauteur (attribut COLS) de la zone de saisie est paramétrable.

Exemple :

<TEXTAREA NAME="essai_textarea" ROWS="6" COLS="40">
Le texte est saisi dans une zone de 6 lignes qui peuvent chacune
contenir 40 caractères.
</TEXTAREA>

Après validation du questionnaire, le texte saisi est contenu dans la variable essai_textarea.

Résultat : Le texte est saisi dans une zone de 6 lignes qui peuvent chacune contenir 40 caractères.

Les zones de saisie de type password :

Comme son nom l'indique, ce type de zone de saisie est utilisé lorsque l'on veut que l'utilisateur entre un mot de passe. Pour chaque caractère entré, une étoile apparaît dans la zone de saisie.

Exemple :

<INPUT TYPE="password" NAME="essai_password" SIZE="7" MAXLENGTH="6">

Après validation du questionnaire, le mot de passe saisi est placé dans la variable essai_password.

Résultat :

Les zones de saisie par sélection de champ

Les boutons de type radio :

Ce type de zone de saisie est utilisé quand on veut que l'utilisateur ne puisse choisir qu'un élément parmi plusieurs. On peut donner un élément sélectionné par défaut en ajoutant le paramètre CHECKED.

Exemple :

<OL>
<INPUT TYPE="radio" NAME="essai_radio" VALUE="premier">Je prefere le premier element<BR>
<INPUT TYPE="radio" NAME="essai_radio" VALUE="deuxieme" CHECKED >Je prefere le deuxieme element<BR>
<INPUT TYPE="radio" NAME="essai_radio" VALUE="troisieme">Je prefere le troisieme element<BR>
<INPUT TYPE="radio" NAME="essai_radio" VALUE="quatrieme">Je prefere le quatrieme element<BR>
</OL>

Remarquez que tous les éléments d'une même zone à choix multiples doit avoir le même nom. Après validation du questionnaire, la variable essai_radio contient la valeur du paramètre VALUE du bouton sélectionné.

Résulat :
Je prefere le premier element
Je prefere le deuxieme element
Je prefere le troisieme element
Je prefere le quatrieme element

Les boutons de type checkbox :

Ce type de zone de saisie est utilisé quand on veut que l'utilisateur sélectionne ou non un élément. On peut le sélectionner par défaut en ajoutant le paramètre CHECKED.

Exemple :

<OL>
<INPUT TYPE="checkbox" NAME="premier" VALUE="OK" CHECKED>je veux &ccil;&agrave;<BR>
<INPUT TYPE="checkbox" NAME="deuxieme" VALUE="OK">je veux aussi &ccil;&agrave;
</OL>

Après validation du questionnaire, la valeur du paramètre VALUE est renvoyée dans la variable décrite dans l'attribut NAME.

Résultat :

je veux çà
je veux aussi çà

Les zones de saisie de type <SELECT> :

Ce type de zone de saisie permet à l'utilisateur de choisir entre un ou plusieurs composants dans un cadre de taille définie. Par défaut, l'utilisateur ne peut choisir qu'un composant. Si on veut qu'il puisse choisir plusieurs composants, ajouter l'attribut MULTIPLE à l'intérieur du marqueur select. On peut sélectionner un élément par défaut en ajoutant le paramètre SELECTED à l'intérieur du marqueur <OPTION> considéré.

Exemple 1 :

Je choisi le
<SELECT NAME="essai_select1">
<OPTION>Premier element
<OPTION SELECTED>Deuxieme element
<OPTION>Troisieme element
</SELECT>

Résultat : Je choisi le Premier element Deuxieme element Troisieme element
Vous remarquez qu'il n'y a qu'une seule sélection possible. Après validation du questionnaire, le texte correspondant à l'option sélectionnée est placée dans essai_select1.

Exemple 2 :

Je choisi le(s)
<SELECT NAME="essai_select2" MULTIPLE>
<OPTION>Premier element
<OPTION SELECTED>Deuxieme element
<OPTION>Troisieme element
</SELECT>

Résultat : Je choisi le(s) Premier element Deuxieme element Troisieme element
Vous remarquez cette fois-ci que vous pouvez sélectionner plusieurs éléments, et que la taille du cadre dans lequel ils sont affichés dépend de leur nombre. Après validation du questionnaire, le texte correspondant à chaque option sélectionnée est placé dans essai_select2.

L'attribut size permet de paramétrer le nombre d'éléments à afficher dans la zone de sélection multiple.

Exemple 3 :

Je choisi le(s)
<SELECT NAME="essai_select3" SIZE="3" MULTIPLE>
<OPTION>Premier element
<OPTION>Deuxieme element
<OPTION>Troisieme element
<OPTION>Quatrieme element
<OPTION>Cinquieme element
</SELECT>

Après validation du questionnaire, le texte correspondant à chaque option sélectionnée est placé dans essai_select3.

Résultat : Je choisi le(s) Premier element Deuxieme element Troisieme element Quatrieme element Cinquieme element

Renvoi des coordonnées d'une image : type image

Vous pouvez récupérer les coordonnées du point de l'image sur lequel l'utilisateur a cliqué.

Exemple :

<INPUT TYPE="image" NAME="logo_techhowto" SRC="../../images/tech_how_to.gif">
Après validation du questionnaire, les variables logo_techhowto.x et logo_techhowto.y contiennent les coordonnées du point de l'image sur lequel a cliqué l'utilisateur

Résultat :

Rubriques :

Documentations :

Liens utiles :