2. Eléments HTML les plus importants

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.5 Formulaires HTML et e-mail

Exemple 2-1: Envoyer le contenu d'un formulaire avec email

Voir aussi le manuel HTML: http://tecfa.unige.ch/guides/htmlman/exo6.html

Principe:

Au lieu d'appeler un script CGI-BIN avec le formulaire, la commande mailto est directement invoquée.
Notez l'utilisation de "enctype=....."

Ce qui change par rapport à l'option CGI :

Le traitement du formulaire est pris en charge par le client WWW qui envoie un e-mail contenant les réponses au formulaire.
Cette solution est la plus simple pour une interaction unidirectionnelle (vous voulez recevoir de l'info sans donner de feed-back)
Toutefois, le résultat n'est pas très joli à regarder.

Code source:

<form enctype="application/x-www-form-urlencoded" 
  action="mailto:Patrick.Jermann@tecfa.unige.ch" method=post>
Votre Nom <input type="text" name="nom" size=15> <p>
Votre email <input type="text" name="email" size=15> <p>
Votre commentaire <textarea name="comment" rows=5 cols=30></textarea> <p>
<input type="submit" value="Envoyer">
<input type="reset" value="Effacer">
</form>