manuel10.html

10. Formulaires

10.1 La commande FORM

Des formulaires peuvent être préparés afin de saisir des données et les traiter au niveau du serveur.

Pour rédiger un questionnaire, il faut:

Établir une zone d'édition (appelée FORM) en utilisant les commandes <FORM></FORM>.
Définir la méthode à employer pour transmettre au serveur l'information recueillie dans les champs du formulaire.
Identifier l'emplacement et le nom du programme qui devra traiter l'information recueillie.
Fournir, s'il y a lieu, les arguments au programme de traitement des données.

Toute cette information se retrouve dans la commande suivante:


<FORM  METHOD="POST" ACTION="/cgi-bin/questionnaire.cmd?xxx">

La méthode utilisée est POST, le programme de traitement se nomme questionnaire.cmd et se retrouve dans le dossier cgi-bin, un seul argument est fourni au programme soit xxx.

Il est à noter que le programme de traitement des données (questionnaire.cmd en l'occurrence) doit être fourni par l'administrateur du serveur et créé en fonction de l'application à supporter.

10.2 Les commandes INPUT

Voici un exemple complet de formulaire. Veuillez noter que les commandes de formatage (caractères gras, centrer, insertion d'une image, etc.) que l'on a décrites jusqu'ici sont toutes valables et utilisables.

La commande INPUT="TEXT"

Parmi les choix disponibles en HTML, un des types d'entrée de données est le champ input type="text". Dans ce cas, il faut inscrire le type de champ, le nom du champ et ses dimensions à l'écran.

Ainsi, dans la question ci-dessous, le code à utilisé pour entrer le nom de la personne est:


NOM: <input type="text" name="name" size=30>.

Le type text est un champ ou l'usager entre de l'information sur son clavier, dans une zone définie à l'écran par la commande size.

Ainsi, une commande size=30 est un champ d'une longueur de 30 espacements de largeur. Pour un champ plus long, entrez une valeur de 50 ou 70, selon l'espace requis pour couvrir toutes les possibilités.

La commande name="name" précise que l'on désire enregistrer le contenu du champ dans la rubrique "name".

Voici quelques exemples de champs text:

VEUILLEZ ENTRER LES INFORMATIONS
DANS LES CHAMPS CI-DESSOUS



	NOM:                    

	
ADRESSE:                

	
VILLE:                  

	
PROVINCE:               

	
CODE POSTAL:            

	
PAYS:                   

	
TELEPHONE:              

	COURRIER ELECTRONIQUE:

Copie du code HTML utilisé pour générer ce formulaire.

La commande INPUT="RADIO"

Un autre type de champ est le type "input type=radio" qui permet d'afficher une série de boutons radio comme choix de réponses.

Il suffit d'abord de poser la question puis de positionner la commande suivante:


<input type="radio" name="info" value="OUI">OUI   

<input type="radio" name="info" value="NON">NON

Dans l'exemple ci-dessous, deux choix sont offerts Oui ou Non. Lorsque l'usager répond, il n'a d'autre choix que l'une ou l'autre réponse. Il ne peut pas choisir les deux.

1.Etes-vous officiellement inscrit au cours sur HTML?
OUI NON

A la question 2 ci-dessous, on remarque que les choix de réponses sont offerts comme des définitions (DT).

Les choix peuvent alors s'écrire comme ceci:


<dl>


<dt>A.<input type="radio" name="refer" value="par_hasard"> 

Tout à fait par hasard en naviguant sur internet.


<dt>B.  <input type="radio" name="refer" value="pointeur."> 

On m'avait donné le pointeur pour m'y rendre.


</dl>

Le résultat donne:

2. Si "non", comment avez-vous abouti dans ce manuel HTML?

A. Tout à fait par hasard en naviguant sur internet.
B. On m'avait donné le pointeur pour m'y rendre.

Dans l'exemple qui suit, on remarque que le nombre de choix de réponses n'est pas limité à deux.

Ainsi, lorsque plusieurs choix (six dans l'exemple ci-dessous) sont fournis, l'usager ne peut en sélectionner qu'un seul quand même.

Une commande doit être inscrite comme ceci:


<input type="radio" name="temps"

value="-10"> moins de 10 minutes

Le premier segment indique qu'il s'agit bien d'un type de bouton radio, le champ s'appelle "temps" et la valeur proposée est -10.
Il faut ensuite répéter le choix de réponse pour que celui-ci soit visible à l'écran.
Voici le résultat offert à l'écran des six choix de réponses.

3. Combien de temps avez-vous passé dans le manuel HTML?

moins de 10 minutes
entre 10 et 15 minutes
entre 15 et 30 minutes
entre 30 et 60 minutes
entre 1 et 2 heures
plus de 2 heures

La commande INPUT=CHECKBOX

La commande input Type=checkbox permet d'afficher une liste ou plusieurs choix sont possibles en même temps. La commande s'écrit:
- Kent, England <input name="city" TYPE=checkbox VALUE="Kent"><BR>
ou
-<input name="city" TYPE=checkbox VALUE="Kent"> Kent, England <BR>
selon que vous voulez afficher le bouton avant ou après la réponse.

4a. Veuillez indiquer la ou les villes que vous avez déjà visité?

- Kent, England
- Toronto, Canada
- Dublin, Ireland

4b. Veuillez indiquer la ou les villes que vous avez déjà visité?

- Kent, England
- Toronto, Canada
- Dublin, Ireland

La commande SELECT NAME et OPTION

La commande select name et Option permet d'afficher une liste ou un seul choix est possible et qui s'affichent sous la forme d'un menu "pop-up". La commande s'écrit:
<select name><option selected>Kent, England<option>Toronto, Canada<option>Dublin, Ireland</select>

5. Veuillez indiquer la ou les villes que vous avez déjà visité?

Dans l'exemple de la question 6 qui suit, on utilise un sixième type de mode d'entrée de données, soit celui du TEXTAREA.
La commande HTML utilisée ci-dessus est: <TEXTAREA name="logiciels?" rows=3 cols=56></TEXTAREA>

Dans ce type, on spécifie d'abord le type soit textarea, ensuite le nom de la rubrique soit name="logiciels?".

En troisième, il faut définir les paramètres d'affichage de la zone de dialogue en rangées et en colonnes. Les rangées dans ce cas sont de trois et les colonnes sont de 56.

Faites des essais vous-même en faisant varier ces deux nombres.

Enfin, il faut fermer la commande par un </TEXTAREA>.

6. Quels logiciels utilisez-vous pour naviguer l'Internet?

Les formulaires doivent être complétés avant fermeture par une commande permettant d'envoyer le contenu des champs remplis au serveur HTTP.

Cette commande s'écrit:


<input type="submit" value="Soumettre">

Essayez-la ici:

On ajoute également une deuxième commande qui permet à l'usager de reprendre le questionnaire s'il s'est trompé.
La commande en question s'écrit:
<input type="reset" value="effacer et recommencer">