Les formulaires

Les formulaires sont utiles, voire nécessaires, dès lors que vous souhaitez dialoguer avec l'utilisateur distant. Cela peut aller du simple clic sur "OUI" pour approuver quelque chose jusqu'à la demande de renseignements très complets comme le nom, l'adresse et le numéro de carte bleue de votre client.

Un formulaire est en général composé de champs dans lesquels l'utilisateur peut cocher des cases, sélectionner des options, dérouler des menus, écrire des remarques, et doit se terminer par deux boutons : un bouton d'annulation pour corriger les erreurs et un bouton d'envoi des données.

Le début et la fin d'un formulaire

L'ensemble d'un formulaire doit être délimité par les balises <FORM> et </FORM>.
La balise <FORM> possède deux attributs : ACTION et METHOD.

METHOD indique sous quelle forme les données doivent être envoyées au serveur. Il existe deux solutions : POST, de loin la plus utilisée, qui envoie les données séparément, et GET, à éviter, qui joint les données à l'URL.
ACTION pointe vers un URL destiné à traiter les informations ; il s'agit généralement d'un script de traitement écrit en CGI ou en PERL.

Si vous n'avez pas écrit de script de traitement, ce qui sera généralement le cas si vous êtes non confirmé, il est inutile de préciser l'attribut ACTION.
Exemple : <FORM METHOD="POST">. . . </FORM>.

Créer une boite de saisie

Une boite de saisie est un cadre dans lequel l'utilisateur va pouvoir écrire du texte, quel qu'il soit. La déclaration se fait par la balise <TEXTAREA>...</TEXTAREA>. Cette balise possède 3 attributs :

NAME attribut obligatoire qui précise le nom des données ;
ROWS attribut facultatif qui précise le nombre de lignes de la boîte ;
COLS attribut facultatif qui précise le nombre de colonnes de la boîte.

Si l'on insère du texte entre les deux balises d'ouverture et de fermeture, ce texte apparaitra dans la boîte de saisie.

L'exemple Le code source

Entrez votre texte ici

<FORM ACTION="" METHOD="POST"> <TEXTAREA NAME="fenêtre de saisie" ROWS=5 COLS=25> Entrez votre texte ici </TEXTAREA> </FORM>

L'exemple	Le code source
Entrez votre texte ici	<FORM ACTION="" METHOD="POST"> <TEXTAREA NAME="fenêtre de saisie" ROWS=5 COLS=25> Entrez votre texte ici </TEXTAREA> </FORM>

Créer un menu déroulant

Un menu déroulant est une boite offrant un certain nombre de choix possibles lorsque l'on clique dessus. Vous en utilisez sans cesse lorsque vous accédez aux commandes de la "barre des menus" située en haut de votre écran.
Le menu déroulant est défini par les balises <SELECT> et </SELECT>.Cette balise possède 3 attributs :

NAME attribut obligatoire qui précise le nom des données ;
SIZE attribut facultatif qui précise le nombre de choix possibles. S'il est omis, il vaut 1 ;
MULTIPLE attribut facultatif qui autorise les choix multiples.

A l'intérieur de la balise <SELECT>, les choix sont listés à l'aide de la balise <OPTION> ; cette balise ne se ferme pas ! Elle possède deux attributs obligatoires :

VALUE contient la valeur qui sera transmise si ce choix est sélectionné ;
SELECTED contient la valeur qui sera transmise par défaut.

Voici deux exemples :

L'exemple Le code source

<FORM ACTION="" METHOD="POST"> <SELECT NAME="premier" SIZE=1> <OPTION VALUE="choix1">choix 1 <OPTION SELECTED VALUE="choix2">choix 2 <OPTION VALUE="choix3">choix 3 <OPTION VALUE="choix4">choix 4 </SELECT> </FORM>

<FORM ACTION="" METHOD="POST"> <SELECT MULTIPLE NAME="second" SIZE=4> <OPTION VALUE="choix1">choix 1 <OPTION VALUE="choix2">choix 2 <OPTION SELECTED VALUE="choix3">choix 3 <OPTION VALUE="choix4">choix 4 </SELECT> </FORM>

L'exemple	Le code source
	<FORM ACTION="" METHOD="POST"> <SELECT NAME="premier" SIZE=1> <OPTION VALUE="choix1">choix 1 <OPTION SELECTED VALUE="choix2">choix 2 <OPTION VALUE="choix3">choix 3 <OPTION VALUE="choix4">choix 4 </SELECT> </FORM>
	<FORM ACTION="" METHOD="POST"> <SELECT MULTIPLE NAME="second" SIZE=4> <OPTION VALUE="choix1">choix 1 <OPTION VALUE="choix2">choix 2 <OPTION SELECTED VALUE="choix3">choix 3 <OPTION VALUE="choix4">choix 4 </SELECT> </FORM>

La balise INPUT

Cette balise est un marqueur qu'on doit utiliser dès lors qu'il n'y a qu'un seul champ à renseigner. Elle permet de faire entrer une ligne de texte, un mot de passe, de cocher une case, de sélectionner un bouton, d'afficher un bouton d'effacement ou de validation. Cette balise ne se ferme pas.

Les attributs possibles sont :

NAME : attribut obligatoire pour indiquer le nom de l'information tapée ;
TYPE : attribut obligatoire qui indique le typede boite à afficher ;
SIZE : attribut facultatif pour indiquer la taille maximale de la boite en caractères ;
MAXLENGTH : attribut facultatif pour indiquer la taille maximale du champ en caractères ;
VALUE : valeur par défaut de la balise ; il est préférable de la préciser ;
CHECKED : attribut facultatif qui permet de sélectionner une option.

L'attribut TYPE est très important car c'est lui qui définit le genre de boite de dialogue qui sera affichée. Voyons quelles en sont les différentes possibilités.

TYPE=TEXT: Affiche une simple ligne ; c'est le type d'entrée par défaut. Les attributs SIZE, VALUE et MAXLENGTH sont facultatifs.
TYPE=PASSWORD: Permet de saisir un mot de passe : les caractères saisis par l'utilisateur ne sont pas affichés en clair. Les attributs SIZE, VALUE et MAXLENGTH sont facultatifs.
TYPE=CHECKBOX: Ceci permet d'afficher une case à cocher. Les attributs SIZE, VALUE, CHECKED et MAXLENGTH sont facultatifs.
TYPE=RADIO: Permet de créer des boutons radio. Les boutons radios sont moins simples à manipuler car il faut bien comprendre qu'ils permettent de choisir un élément unique exclusivement parmi plusieurs. Les attributs SIZE, VALUE, CHECKED et MAXLENGTH sont facultatifs.
TYPE=RESET: Crée un bouton permettant à l'utilisateur de revenir en arrière s'il a commis une erreur.
TYPE=SUBMIT: Crée u bouton permettant à l'utilisateur de valider et ainsi d'envoyer les informations qu'il vient de saisir.

Voici quelques exemples :

Les exemples	Les codes sources
	<FORM action="" method="POST"> <INPUT TYPE="text" NAME="ligne" VALUE="Tapez votre NOM" SIZE=40 MAXLENGTH=50> </FORM>
mot de passe :	mot de passe : <FORM action="" method="POST"> <INPUT TYPE="password" NAME="confidentiel" VALUE="" SIZE=15 MAXLENGTH=20> </FORM>
Voulez-vous travailler ? OUI NON	Voulez-vous travailler ? <FORM action="" method="POST"> <INPUT TYPE="checkbox" NAME="yes" VALUE="OUI" CHECKED>OUI <INPUT TYPE="checkbox" NAME="no" VALUE="NON">NON </FORM>
Je veux faire : du Pascal du HTML des jeux ou encore : du graphisme du traitement de texte	Je veux faire : <FORM action="" method="POST"> <INPUT TYPE="radio" NAME="info1" VALUE="Pascal"> du Pascal <INPUT TYPE="radio" NAME="info1" VALUE="HTML"> du HTML <INPUT TYPE="radio" NAME="info1" VALUE="jeux">des jeux <BR> ou encore : <INPUT TYPE="radio" NAME="info2" VALUE="graphisme"> du graphisme <INPUT TYPE="radio" NAME="info2" VALUE="texte" CHECKED> du traitement de texte </FORM>
	<FORM action="" method="POST"> <INPUT TYPE="reset" VALUE="Je me suis trompé(e) !"> </FORM>
	<FORM action="" method="POST"> <INPUT TYPE="submit" NAME="Envoi" VALUE="J'envoi mes données"> </FORM>

Exercice

Reproduisez le formulaire ci-dessous (sans tenir compte des couleurs). Ne trichez pas ! N'allez voir la réponse que si vous êtes totalement coincé.

Qui êtes-vous ?

Merci de bien vouloir renseigner ce petit formulaire. Les informations récoltées me permettront de mieux vous connaître et d'améliorer mon site.

Vos NOM et prénom : Votre âge : ans
Votre adresse eMail :
Vous êtes :
Vous travaillez sur :
Comment avez-vous connu ce site ?
Quel est le navigateur que vous utilisez ? (Netscape^TM, Mosaic^TM...)

Pour m'envoyer vos réponses, cliquez maintenant sur le bouton ci-dessous.

PS : si vous désirez voir la réponse, demandez simplement à votre navigateur d'afficher le source !

Retourner à la page précédente