2.1 La balise <form>
La déclaration de base d'un formulaire se fait par:
-
le tag "form"
-
la spécification des paramètres "action", "method" et parfois "name"
<FORM ACTION="URL" METHOD=GET ou POST>
....
</FORM>
-
L'URL spécifié par le paramètre ACTION désigne la ressource vers laquelle l'information recueillie sera transmise.
-
Si ce paramètre n'est pas spécifié le document courant est utilisé par défaut.
-
La valeur du paramètre METHOD va dépendre du type de traitement que vous utilisez:
-
GET est la méthode par défaut et ajoute le contenu du formulaire à l'URL spécifié dans ACTION comme s'il s'agissait d'un query normal.
-
POST envoie le contenu du formulaire au serveur comme un ensemble de données sans les faire figurer à la suite de l'URL.
Illustrations:
-
Le formulaire est traité par la ressource /cgi-bin/colin:
<form method="post" action="http://tecfa.unige.ch/cgi-bin/colin">
-
Le formulaire ne sera pas envoyé à un programme cgi
(eventuellement, il pourrait être traité par JavaScript):
<form>
-
Le formulaire est traité pas la ressource "mailto:"
<form enctype="application/x-www-form-urlencoded"
action="mailto:Patrick.Jermann@tecfa.unige.ch" method=post>
2.2 Questions ouvertes et fermées: <INPUT>
A. Aperçu des widgets
"
<INPUT>
" sert à poser des questions selon différentes modalités:
<INPUT TYPE="..." NAME="..." VALUE="..." CHECKED="..."
SIZE="..." MAXLENGTH="...">
"TYPE"
spécifie le type de question:
-
"text" est la valeur par défaut et permet de saisir une ligne de texte. (par exemple nom, prénom, adresse etc...)
-
"
password"
fait apparaître le texte entré sous forme d'astérisques. (*)
-
"checkbox"
permet de définir un bouton qui est soit poussé ou relâché.
-
"radio"
définit un ensemble de boutons dont un seul peut être activé à la fois. (par exemple: rouge/bleu/vert)
-
"submit"
définit un bouton qui déclenche l'envoi du contenu du formulaire.
-
"reset"
remet les valeurs des champs du formulaire à leur valeur par défaut.
-
Il existe aussi un type
"button"
qui crée un bouton vide (à utiliser avec JavaScript)
B. L'attribut "NAME"
NAME sert à donner un nom à chaque champ:
-
Il n'apparaît pas à l'affichage
-
Il est est utile pour le traitement des données par le programme qui recevra les données.
-
Il n'est pas nécessaire de spécifier un nom de champ pour les types "submit" et "reset".
-
NAME sert
à regrouper des boutons
"radio" (voir exemple ci-dessous)
-
(Sauf exception) n'utilisez pas le même name pour plusieurs "checkbox"
Illustrations:
Lors du traitement du formulaire, la variable `chiffre1' contiendra le nombre écrit dans la zone de texte.
Entrez un chiffre dans cette zone:
<INPUT TYPE="text" NAME="chiffre1" SIZE=10>
-
Les `radio-boutons' ont le même nom, seul un peut être activé.
-
Lors du traitement du formulaire, la variable `sexe' contiendra soit "m", soit "f".
Sexe:
<input type="radio" name="sexe" value="f">Masculin
<input type="radio" name="sexe" value="m">Féminin
... voir la définition de l'attribut
value
à la page suivante
C. L'attribut "VALUE"
VALUE permet de spécifier les valeurs des réponses:
-
Pour les questions ouvertes (text) value définit la valeur par défaut (si nécessaire)
-
Pour les widgets de type radio et checkbox, il définit la valeur transmise par le formulaire pour le bouton sélectionné.
-
Pour les types "submit", "reset" et "button", la valeur du paramètre value correspond au texte affiché sur le bouton.
<input type="text" name="nom_de_famille" value="Dupuis">
<input type="checkbox" name="doc" value="doc_souhaitee">
<input type="submit" value="enregistrer">
D. L'attribut "CHECKED"
CHECKED permet d'"enfoncer" les boutons par défaut.
-
ne prends pas de valeur
-
s'applique qu'aux types "checkbox" et "radio".
<input type=checkbox name=age value="mineur"> Vous êtes mineur
<input type=checkbox name=age CHECKED value="adulte"> Vous êtes adulte
Sexe:
<INPUT TYPE="radio" NAME="sexe" CHECKED>Masculin
<INPUT TYPE="radio" NAME="sexe">Féminin
E. L'attribut "SIZE"
SIZE spécifie la largeur d'un champs (Nb de caractères)
-
s'applique aux questions ouvertes
<INPUT TYPE=text NAME=nom SIZE="10" VALUE="100">
MAXLENGTH détermine le nombre maximum de caractères pouvant être saisis pour une question ouverte.
-
Si ce paramètre ne figure pas dans la déclaration d'input, le nombre de caractères possibles est infini.
<input type=text name=commentaire maxlength=50>
2.3 Menus déroulants et listes à choix multiples <SELECT>
-
SELECT permet de définir un menu déroulant.
-
Vous pouvez ainsi forcer le choix entre plusieurs possibilités.
-
Celles-ci sont référencées par le tag "option"
Paramètres:
-
NAME est le nom symbolique du champ contenant la réponse.
-
Si SIZE=1 le browser affichera un menu déroulant classique.
Si SIZE=2 ou plus les options apparaîtront dans une liste "scrollable" qui laisse apercevoir le nombre d'items spécifiés par SIZE.
-
MULITIPLE ne prend pas de valeur.
S'il est mentionné il permet le choix de plus d'un item.
Dès lors, même si SIZE=1, le browser affiche une liste "scrollable".
Le tag OPTION:
-
ne requiert pas de fermeture
-
permet d'indiquer le texte d'un élément du menu déroulant.
Exemple:
<select name="pays" size=1>
<option>CH: Suisse
<option>D: Allemagne
<option>F: France
<option>US: Etats-Unis
<option>A: Autriche
<option>I: Italie
</select><p>
<select name="pays" size=6>
<option>CH: Suisse
<option>D: Allemagne
<option>F: France
<option>US: Etats-Unis
<option>A: Autriche
<option>I: Italie
</select>
2.4 Les zones de texte <TEXTAREA>
Permet de définir une entrée qui s'étend sur plus qu'une ligne.:
-
A utiliser par exemple pour permettre à l'utilisateur de donner un commentaire.
-
Comme pour les autres champs il faut spécifier un nom symbolique pour le contenu du champ. (NAME)
-
La largeur et la hauteur (en nombre de lignes) de la fenêtre de saisie est déterminé par les paramètres ROWS et COLS
Exemple:
<TEXTAREA name="comments" rows=4 cols=60>
</textarea>