Utilisation des marqueurs <FORM>

Nous introduisons, ici, l'utilisation des marqueurs <FORM>. Les scripts Perls associés seront décrits dans la suite. Les marqueurs <FORM> se placent n'importe où dans le corps d'un document HTML, avec ses éléments inclus entre <FORM> et </FORM>.
L'usage de l'attribut ACTION du marqueur <FORM> est obligatoire.

L'attribut ACTION

L'attribut ACTION prend pour valeur l'URL de l'application visée. Voici un exemple typique de son utilisation :

<FORM ACTION="http://www.brunette.brucity.be/cgi_bin/perl.exe?stest.pl">
...
</FORM>.

L'attribut METHOD

L'attribut METHOD peut prendre 2 valeurs : GET et POST. Avec POST, le navigateur transmet ses données au serveur en 2 temps : premièrement le navigateur active le processus CGI et le configure de manière à être prêt à recevoir les données sous le format attendu (à l'entrée standard); deuxièmement le navigateur transmet les données. Il y a 2 transmissions. Avec GET tout ce passe en 1 temps, les données sont codées dans la variable d'environnement QUERY_STRING.

Si la quantité de données et le nombre de champ à remplir sont restreints, il est plus performant d'utiliser GET. Si le nombre de champ à remplir est important ainsi que la quantité de donnée POST peut s'imposer du fait de limitations internes du serveur.

Les éléments d'un formulaire

Le marqueur <INPUT>

L'utilisation du marqueur <INPUT> permet de créer des formulaires sous des formes incluant des champs de texte, des listes à choix multiple, et des boutons de soumission. Bien que ce marqueur possède de nombreux attributs, seul 2 sont indispensables : TYPE et NAME (TYPE suffit pour un bouton).

L'attribut TYPE permet de déterminer le type de formulaire créé et NAME le nom du champ associé. Il est recommandé de ne pas utiliser de caractères spéciaux, de ponctuations, ou de blancs, dans les noms de champ.

Champ de texte

Pour créer un champ de texte à l'intérieur d'un formulaire, il faut donner à TYPE la valeur TEXT, et un nom via l'attribut NAME. Il est utile de fixer une taille au champ ainsi qu'une longueur maximale possible au texte à entrer dans le champ. Ceci se fait respectivement à l'aide des 2 paramètres suivants : SIZE et MAXLENGTH.

Voici un exemple d'utilisation du marqueur FORM illustrant ce que nous venons d'indiquer plus haut :

<FORM ACTION=http://www.brunette.brucity.be/cgi_bin/text.bat>
Entrez votre nom : <INPUT TYPE=TEXT NAME=nom1><BR>
Entrez votre prénom: <INPUT TYPE=TEXT NAME=nom2 SIZE=10 MAXLENGTH=10><BR>
Entrez vos couleurs préférées : <INPUT TYPE=TEXT NAME=nom3 SIZE=20 MAXLENGTH=100><BR>
<INPUT TYPE=SUBMIT VALUE="Cliquez moi">
</FORM>,

ce qui donne :

Le champ de texte masqué

Il peut être utile de protéger l'accès à certaine informations par un mot de passe. Le TYPE PASSWORD est particulièrement approprié à cela.

Voici un exemple d'utilisation d'un champ de texte masqué :

<FORM ACTION=http://www.brunette.brucity.be/cgi-bin/pass.bat>
Entrez le mot de passe (blabla) : <INPUT TYPE=PASSWORD NAME=pass SIZE=10 MAXLENGTH=10 ><BR>
<INPUT TYPE=SUBMIT VALUE="Cliquez moi">
</FORM>,

ce qui donne

Les boîtes de contrôle

Les boîtes de contrôle permettent de sélectionner et de désélectionner aisément un élément d'une liste.

Voici un exemple d'utilisation de boîtes de contrôle :

<FORM ACTION="http://www.brunette.brucity.be/cgi-bin/box.bat" >
<P>
<INPUT TYPE=CHECKBOX NAME=couleur1 >ROUGE
<P>
<INPUT TYPE=CHECKBOX NAME=couleur2 >VERT
<P>
<INPUT TYPE=CHECKBOX NAME=couleur3 >BLEU
<P>
<INPUT TYPE=SUBMIT VALUE="En avant">
<P>
</FORM>,

ce qui donne

Remarquons que l'attribut CHECKED sans valeur désigne la couleur préférée par défaut.

Les boutons de radio

Les boutons de radio se comporte comme les boîtes de contrôle sauf qu'il n'y a qu'un seul choix possible.

Voici un exemple d'utilisation de boutons de radio :

<FORM ACTION="http://www.brunette.brucity.be/cgi-bin/couleur.bat" >
<P>
<INPUT TYPE=RADIO NAME=couleur VALUE="VERT"> VERT
<P>
<INPUT TYPE=RADIO NAME=couleur VALUE="ROUGE">ROUGE
<P>
<INPUT TYPE=RADIO NAME=couleur VALUE="BLEU">BLEU
<P>
<INPUT TYPE=SUBMIT VALUE="En avant">
<P>
<INPUT TYPE=RESET VALUE="Non je refais mon choix">
<P>
</FORM>,

ce qui donne

suite -index