Formulaires dans une page HTML

Présentation

Jusqu'ici, les pages HTML sont des documents passifs, à consulter.
L'utilisateur parcours des pages, mais ne peut pas écrire, fournir des informations, remplir un formulaire et le transmettre, comme cela se fait couramment par Minitel.
Les seules initiatives attendues de la part de l'utilisateur sont des choix de "navigation" qui lui sont proposés sous forme d'hyperliens cliquables.

Les formulaires HTML (FORMS en anglais) sont des ensembles de composants , appelés aussi champs qui permettent à l'utilisateur d'entrer des informations, d'exprimer ses choix, de saisir du texte ...

Bien sûr les réactions à apporter à ces informations doivent être prévues à l'avance, et donc doivent être programmées.
Les programmes en général placés sur le serveur gérent le dialogue avec le client- utilisateur.
Le langage JavaScript, plus limité, permet l'insertion de petits programmes dans les pages HTML, les rendant ainsi interactives. Il est ainsi possible d'effectuer des traitements à partir des données entrées par l'utilisateur.

La balise FORM

Toute la partie formulaire de la page doit se trouver entre les marqueurs <FORM> ....</FORM>
Cette balise sert de conteneur pour accueillir les éléments ou composants du formulaire, comme par exemple un bouton, une ligne de texte, une liste de choix ..
Chacun de ces composants s'y trouve déclaré et créé individuellement par une balise qui commence généralement par INPUT ou par SELECT
Voici un exemple significatif qui regroupe la plupart des catégories de composants que peut contenir une formulaire HTML.
Chaque composant sera ensuite étudié en détail.

Un exemple complet

<H2><u><CENTER>Fiche de renseignements</CENTER></u></H2>
<FORM  NAME="Fiche_inscription">
Nom : <INPUT TYPE ="text" NAME="Nom" VALUE="" >
Prénom : <INPUT TYPE ="text" NAME="Prenom" VALUE="" >
Mot de passe : < INPUT TYPE="password" NAME="Pass" SIZE=5><P>
Vous êtes en terminale S à dominante : 
<INPUT TYPE="radio" NAME="option" VALUE="math" checked>Mathématiques
<INPUT TYPE="radio" NAME="option" VALUE="pc">Physique-chimie
<INPUT TYPE="radio" NAME="option" VALUE="svt">SVT
<P>

Quelle est votre discipline préférée ? 
<SELECT NAME="disciplines"  MULTIPLE SIZE=3>
  <OPTION>Physique
  <OPTION SELECTED>Informatique
  <OPTION>Philosophie
  <OPTION>Mathématiques
  <OPTION>Langues
  <OPTION>SVT
  <OPTION>Histoire 
  <OPTION>EPS
</SELECT>
<P>

Vous vous êtes inscrit(e)s en : <BR>
<INPUT TYPE="checkbox" CHECKED NAME="DEUG" >DEUG<BR>
<INPUT TYPE="checkbox" NAME="CPGE">CPGE<BR>
<INPUT TYPE="checkbox" NAME="BTS">BTS<BR>
<INPUT TYPE="checkbox" NAME="IUT">IUT<BR>
<INPUT TYPE="checkbox" NAME="AUTRE">AUTRE
<P>
Ecrivez ci-dessous le sujet de votre projet informatique :<BR>
<TEXTAREA NAME="Projet" ROWS=8 COLS=55>
Voici mon projet d'option informatique
</TEXTAREA>
<P>
<INPUT TYPE="RESET" VALUE="Effacer"> Pour recommencer<P>
<INPUT TYPE="SUBMIT" VALUE="Valider" >Pour envoyer ces informations<P>
</FORM >

TP exercice 1

Champs de texte

Ligne de texte

<INPUT TYPE="text" NAME="Nom du champ" VALUE="texte initial" SIZE=longueur>

Les divers paramètres

TYPE="text" est facultatif, car il s'agit du type de champ par défaut (si on ne précise pas).
NAME pour préciser le nom du champ (utile pour la programmation).
VALUE pour donner un texte visible au champ.
SIZE fixe la longueur visible du champ (éventuellement son contenu défile vers la gauche).
MAXLENGTH pour limiter le nombre de caractères pouvant être entrés dans le champ.

Exemples

Tapez votre nom : <INPUT NAME="Nom" VALUE="toto">

Tapez votre nom :

Tapez votre adresse e-mail: <INPUT NAME="e-mail" VALUE="...@.....fr" SIZE=40>
Tapez votre adresse e-mail:

Code Postal: <INPUT NAME="CP" SIZE=5 MAXLENGTH=5 VALUE="">
Code Postal: (taper exactement 5 chiffres)

Champ mot de passe

Quelquefois on ne veut pas que le texte tapé par l'utilisateur apparaisse à l'écran.
En particulier s'il s'agit d'un mot de passe ! Pour cela, on utilise le composant dont le type est TYPE=PASSWORD.

<INPUT TYPE="password" NAME="mot_de_passe" MAXLENGTH=taille maximum>

Exemple

Entrez votre mot de passe : <INPUT TYPE="password" MAXLENGTH=5>

Entrez votre mot de passe :

Zone de texte multiligne

Pour permettre à l'utilisateur de saisir un texte de plusieurs lignes, on utilise le composant <TEXTAREA

<TEXTAREA NAME=".." ROWS=.. COLS= ..> Texte affiché par défaut ...<BR> </TEXTAREA>

Les divers paramètres

ROWS pour préciser le nombre de lignes de la fenêtre de saisie.
COLS pour préciser le nombre de colonnes.
<TEXTAREA>texte </TEXTAREA> le texte inséré est directement affiché tel quel; l'utilisateur peut l'effacer.

Exemple

<TEXTAREA NAME="Demande" ROWS=8 COLS=55>
Bonjour,
J'ai une demande très importante à formuler.
J'espère que vous pourrez me dépanner ...
</TEXTAREA>

Liste de sélection

Pour permettre un choix dans une liste de plusieurs options présentées sous forme de liste déroulante, on utilise la balise <SELECT>

<SELECT NAME="..." SIZE=...> <OPTION SELECTED >option 1 <OPTION>option 2 <OPTION>option 3 </SELECT>

Les divers paramètres

<OPTION> pour introduire chaque option de la liste.
SIZE= ... pour préciser le nombre de lignes visibles.
S'il y a plus d'options, la liste pourra être parcourue à l'aide d'une barre de défilement.
<OPTION SELECTED> pour sélectionner cette option par défaut .
<SELECT MULTIPLE> l'attribut facultatif MULTIPLE autorise à sélectionner plusieurs options dans la liste.

Exemples

Vous êtes inscrit(e) au lycée J-Feyder dans une classe de : 
<SELECT NAME="Niveau"  SIZE=3>
 <OPTION> seconde
 <OPTION> première
 <OPTION SELECTED> terminale
 <OPTION> section BTS
</SELECT>

Vous êtes inscrit(e) au lycée J-Feyder dans une classe de :

<SELECT NAME="pizza" MULTIPLE SIZE=3 MULTIPLE> <OPTION> anchois <OPTION SELECTED>tomate <OPTION>olives <OPTION SELECTED> fromage <OPTION>épices <OPTION>viande hachée <OPTION>câpres </SELECT>

Que désirez vous dans votre pizza ?

Cases à cocher

Afin de répondre à des questions du type Oui/Non ou Vrai/faux, on utilise des boîtes à cocher avec la balise :

<INPUT TYPE="CHECKBOX" NAME= "..." CHECKED>question

Les divers paramètres

<TYPE ="checkbox" > est indispensable pour produire une boite à cocher.
NAME=".." s'il y a plusieurs boites, chacune doit avoir un nom spécifique.
CHECKED pour cocher par défaut la boite (donc répondre Vrai par défaut).

Exemple

<INPUT NAME="Client" TYPE=CHECKBOX> Déjà client ?<BR>
<INPUT NAME="Brochure" TYPE=CHECKBOX CHECKED>Demande d'une brochure

Déjà client ?
Demande d'une brochure.

Boutons de sélection

Le type RADIO vous permet de définir des boutons radio.
Ils sont utilisés lorsque l'utilisateur doit faire un choix entre plusieurs options concurrentes, qui s'excluent mutuellement.
Ils jouent ainsi un rôle analogue aux listes de sélection.
Il faut donc indiquer le groupe des boutons dans lequel ce choix exclusif doit s'exercer, en leur donnant un même nom (la valeur de l'attribut NAME). L'utilisateur ne pourra alors sélectionner qu'un seul bouton radio à la fois dans chaque groupe.

<INPUT TYPE="RADIO" NAME="nom" VALUE=".." CHECKED>option 1<BR> <INPUT TYPE="RADIO" NAME="nom" VALUE=".." >option 2<BR> <INPUT TYPE="RADIO" NAME="nom" VALUE=".." >option 3

Les divers paramètres

<TYPE ="radio" > est indispensable pour produire des bouton radio.
NAME="nom" l'ensemble des boutons doit porter le MEME nom.
VALUE="..." chaque bouton radio doit posséder une valeur spécifique pour différencier les options.
CHECKED pour désigner LE bouton sélectionné par défaut.

Exemple

Vous habitez :<BR>
<INPUT TYPE=RADIO NAME="Ville" VALUE="E" CHECKED >Epinay<BR>
<INPUT TYPE=RADIO NAME="Ville" VALUE="SD"  >Saint-Denis<BR>
<INPUT TYPE=RADIO NAME="Ville" VALUE="V"  >Villetaneuse<BR>
<INPUT TYPE=RADIO NAME="Ville" VALUE="S"  >Stains<BR>

Vous habitez :
Epinay
Saint-Denis
Villetaneuse
Stains

Boutons de commande

Les boutons servent à recevoir des "clics". Leur principale fonction est de permettre à l'utilisateur de déclencher des événements auxquels seront rattachées des fonctions.

Boutons communs

<INPUT TYPE="Button" NAME= ".." VALUE="Cliquez">

La valeur de l'attribut VALUE est le texte gravé sur le bouton.
Un bouton sert essentiellement à déclencher des traitements locaux, par appel d'une fonction écrite en langage JavaScript.

Boutons de validation

Ce bouton sert à valider les informations saisies dans les champs du formulaire. Il provoque l'expédition de ces informations soit sur le serveur pour y être traitée, soit en message électronique ou bien

<INPUT TYPE="SUBMIT" NAME= ".." VALUE="Envoyer">

Boutons de réinitialisation

Ce bouton remet le formulaire dans son état initial, en réinitialisant les valeurs par défaut.

<INPUT TYPE="RESET" VALUE="Effacer>

TP exercice 2

Compléments : transmission des données

La balise FORM possède plusieurs attributs, permettant de spécifier ce qui doit être fait lorsque l'utilisateur veut envoyer les données au serveur.

Attribut action

<FORM ACTION="url"...> permet d'indiquer l'URL (de protocole : http, ftp, gopher, file, mailto, news, telnet, ...) qui va recevoir les informations entrées dans le formulaire, lorsque l'on cliquera sur le bouton de validation.
Plus précisément, l'URL est l'adresse d'un programme (un script) qui va récupérer les données et les traiter. Si le champ ACTION est absent, l'URL sera celle du document courant.

Attribut method

L'attribut METHOD permet d'indiquer la méthode de transmission des données saisies dans le formulaire.
Il y en a deux:

La méthode GET, méthode par défaut, consiste à concaténer les données du formulaire à l'URL spécifiée dans ACTION, après avoir inséré un point d'interrogation.
Ces données sont incluses sous forme d'une liste nom-champ=valeur-champ.
On obtient alors une requête adressée au serveur, du genre :http://serveur/chemin/prog.html?champ1=valeur1&champ2=valeur2&....
La méthode POST génére une requête HTTP spéciale qui envoie les données au serveur (plutôt qu'en l'accolant à l'URL). Il est recommandé d'utiliser la méthode POST

Exemple : l'action MAILTO:

C'est le moyen le plus simple pour faire expédier les informations du formulaire par l'utilisateur.
Il consiste à utiliser automatiquement le courrier électronique.
Il suffit de spécifier l'adresse électronique (e-mail) du destinataire après le nom du protocole MAILTO:
.
Si le serveur de messagerie est accessible, (si l'utilisateur est bien connecté), le corps du message acheminé contiendra la liste des couples champ1=valeur1

Par exemple, pour m'envoyer vos fiches de rensenseignements, il suffirait de remplacer, dans le formulaire du début de ce chapitre, la ligne <FORM NAME="Fiche_inscription"> par

<FORM NAME="Fiche_inscription" ENCTYPE="text/plain" METHOD="post" ACTION="MAILTO:jgourdin@ac-creteil.fr">

Pour expérimenter cette méthode, voir l'exercice 3 du TP

TP exercice 3