Les Formulaires

Exemple 1 : La forme suivante

Entrez votre texte

est obtenue par la programmation suivante :

<FORM METHOD="POST">
Entrez votre texte <INPUT NAME="entree">
</FORM>

    Ce premier code HTML très simple, comprend un champ texte, non initialisé. Vu que la commande INPUT est unique, il n'est pas
    nécessaire de mettre un attribut de type submit.
    La méthode GET ne serait pas très différente dans la programmation, on remplacerait le mot POST par GET.

Exemple 2 : la forme suivante
 

Entrez la valeur du champ 1 Entrez la valeur du champ 2 Entrez la valeur du champ 3

est obtenue par la programmation suivante :

<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
Entrez la valeur du champ 1 <INPUT NAME="entry1">
Entrez la valeur du champ 2 <INPUT NAME="entry2">
Entrez la valeur du champ 3 <INPUT NAME="entry3">
<INPUT TYPE="submit" VALUE="Envoyer">
</FORM>

    Les champs 1, 2 et 3 s'appellent entry1, entry2 et entry3
    Le résultat de l'appui sur le bouton Envoyer donnera si vous avez entré toto, titi dans les deux premiers champs et rien dans le
    troisième : "?entry1=toto&entry2=titi&entry3="
    le champ ACTION est le nom de la procédure qui sera exécutée sur le serveur. Nous verrons cela en détail dans le chapitre sur les
    serveurs http.

Exemple 3 : La forme suivante
 

Nom Prénom   1.marié   2.francais Volontaire Oui Non Ne sait pas.

est obtenue par la programmation suivante :

<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
Nom <INPUT NAME="Nom"><P>
Prénom <INPUT NAME="Prenom">
<OL>
<LI> <INPUT TYPE="checkbox" CHECKED NAME="topping1" VALUE="Marie">Marié
<LI> <INPUT TYPE="checkbox" NAME="topping2" VALUE="francais"> francais
</OL>
Volontaire
<DL>
<DD> <INPUT TYPE="radio" NAME="callfirst" VALUE="Oui" CHECKED> <I>Oui</I>
<DD> <INPUT TYPE="radio" NAME="callfirst" VALUE="Non"> <I>Non</I>
<DD> <INPUT TYPE="radio" NAME="callfirst" VALUE="Ne sait pas"> <I>Ne sait pas</I>
</DL>
<INPUT TYPE="submit" VALUE="Ok">
<INPUT TYPE="reset" VALUE="Annuler">
</FORM>

    La valeur CHECKED initialise la valeur on du champ topping1
    La valeur reset du champ INPUT permet de remettre aux valeurs initiales les différents champs
    On remarque l'utilisation d'un même nom callfirst pour indiquer que cet attribut pourra prendre les valeurs Oui, Non ou Ne sait
    pas.

Exemple 4 : La forme suivante
 

Champ 1 (normal): Champ2 (40 caractères affichés) : Champ3 (5 caractères seulement) :

est obtenue par la programmation suivante

<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
Champ 1 (normal): <INPUT NAME="entry1"> <P>
Champ2 (40 caractères affichés) : <INPUT SIZE=40 NAME="entry2"> <P>
Champ3 (5 caractères seulement) : <INPUT SIZE=5 MAXLENGTH=5 NAME="entry3"> <P>
<INPUT TYPE="submit" VALUE="OK"> <INPUT TYPE="reset" VALUE="Annuler">
</FORM>
 

Exemple de fichier à envoyer

Cet exemple est obtenu par la syntaxe suivant :

<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
Exemple de fichier à envoyer <INPUT TYPE=file NAME=fichier> <P>
<INPUT TYPE=submit VALUE="Envoyer le fichier">
</FORM>

SELECT

La commande SELECT permet de donner la liste des champs accessibles pour les menus déroulants.

La commande SELECT est utilisée avec la syntaxe suivante :

<SELECT NAME="a-menu">
<OPTION VALUE=valeur> Option 1
<OPTION VALUE=valeur> Option 2
</SELECT>

Les attributs de la commande SELECT sont les suivants :

NAME est le nom symbolique de l'élément. C'est-à-dire le nom du champ utilisé par l'auteur de la page HTML. Ce nom n'est pas visible
pour les utilisateurs.

SIZE donne le nombre d'éléments qui seront affichés dans le menu. Les autres valeurs seront accessibles au moyen d'un ascenseur.

MULTIPLE indique que la commande SELECT pourra avoir plusieurs sélections.

SELECTED indique que l'option est sélectionnée par défaut.

VALUE est un paramètre optionnel permettant de donner à la variable en regard de NAME la valeur désirée

TEXTAREA

La commande TEXTAREA est utilisée avec la syntaxe suivante :

<TEXTAREA NAME=... ROWS=.. COLS=.. > valeur par défaut</TEXTAREA>

La commande TEXTAREA est utilisée pour les entrées textes et spécifie :

    NAME le nom symbolique de l'entrée
    ROWS nombre de lignes du champ de saisie
    COLS est la longueur de la ligne de saisie du champ texte.

Exemple 5 : la forme suivante
 

Login Mot de passe  Système d'exploitation : Mac OSPC WindowsUnix Logiciels utilisés : ComptabilitéJeuxTraitement de texteInternetCompilateurs <br>Néant <br>

est obtenue par la programmation suivante

<FORM METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
Login <INPUT NAME="name" VALUE="guess"><P>
Mot de passe <INPUT TYPE="password" NAME="passwd" VALUE="guess" ><P>
Système d'exploitation :
<SELECT NAME="system">
      <OPTION>Mac OS
      <OPTION SELECTED>PC Windows
      <OPTION>Unix
</SELECT> <P>
Logiciels utilisés :
<SELECT NAME="software" MULTIPLE SIZE=5>
<OPTION>Comptabilité
<OPTION SELECTED>Jeux
<OPTION>Traitement de texte
<OPTION SELECTED> Internet
<OPTION> Compilateurs
</SELECT> <P>
<TEXTAREA NAME="Commentaires" ROWS=20 COLS=60>
Néant
</TEXTAREA><P>
<INPUT TYPE="submit" VALUE="OK">. <P>
</FORM>
 

Si vous désirez tester votre requête sur un serveur qui vous renvoie simplement la liste des FORM que vous lui envoyez avec une
présentation lisible, vous pouvez vous adresser au serveur http://hoohoo.ncsa.uiuc.edu

    Pour la méthode POST ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query"
    Pour la méthode GET ACTION="http://hoohoo.ncsa.uiuc.edu/htbin/query"