Ircam - Centre Georges-Pompidou
IRCAM - Centre PompidouServeur © IRCAM - CENTRE POMPIDOU 1996-2005.
Tous droits réservés pour tous pays. All rights reserved.

Introduction au langage HTML:
comment composer des pages pour un serveur WWW

4. Les formulaires

Michel Fingerhut
2e édition, © Ircam 1995, 1996
Les éléments du langage HTML que nous avons vus jusqu'ici n'offrent qu'un moyen d'interaction très limité pour l'utilisateur: la sélection d'un lien hypertextuel (ou d'une partie d'image) explicite, menant vers un autre document.

Le mécanisme des formulaires est destiné à fournir un mode d'interaction beaucoup plus vaste: choix sur listes, boutons d'activation/désactivation, saisie libre de texte... Par exemple:

Bibliothèque
ou base de données:
Auteur: sauf
Titre: sauf
Type de doc.: tout   monographie   périodique   photo   enregistrement   CD-Rom
Dans cette exemple on peut: Les «réponses» à un tel mode d'interrogation ne sont plus forcément des documents prêts d'avance, mais construits à la volée, à partir des éléments fournis par l'utilisateur. Par exemple, dans le cas de l'interrogation d'un catalogue ou d'une base de données, il faudra fournir en réponse un document contenant les références correspondant à la requête. Un tel document ne peut être préparé par avance -- il doit donc être construit à la volée, par un programme (une application), résidant sur le serveur qui est interrogé.

Les formulaires offrent donc:

Tous les choix de l'utilisateur parviendront à l'application. Celle-ci doit pouvoir établir quelle option a été choisie pour chacun des choix proposés. Il faut donc: Nous allons prodécer comme suit:
ChampOptions
A l'écranNom choisiA l'écranNom choisi
Bibliothèque
ou base de données:		biblioBibliothèque nationale de Francebnf
Bibliothèque publique d'informationbpi
Library of Congressloc
Auteur:auteur(valeur libre)
sauf (auteur)sauf-auteur(si sélectionné)oui
Titre:titre(valeur libre)
sauf (titre)sauf-titre(si sélectionné)oui
Type de doc:typetouttout
monographielivre
périodiquerevue
photophoto
enregistrementaudio
CD-Romcdrom
Les noms sont choisis pour être utilisés dans des applications, donc concis (pour éviter d'avoir à écrire de longues chaînes de caractères) mais suggestifs.

Une fois la sélection faite et l'interrogation lancée, l'application résidant sur le serveur et chargée de la prendre en compte sera lancée avec des paramètres (ou arguments) de la forme 

biblio = bpi
auteur = Lévi-Strauss, Claude
titre = Histoire de Lynx
sauf-titre = oui
type = livre
On voit que l'option "sauf" pour l'auteur n'a pas été sélectionnée, et que les choix libres sont tels que l'utilisateur les a saisies (majuscules, minuscules, diacritiques, espaces, ...).

Il est hors de propos de cette introduction de parler de programmation. Nous ne verrons donc que la façon de concevoir l'interface (le formulaire d'interrogation).

Structure générale d'un formulaire

Un "formulaire" fait partie d'un document HTML, et est délimité par une directive à champ d'action: 
<FORM METHOD=POST ACTION="adresse de l'application">
    ...
    champs d'interrogation
    ...
</FORM>
L'option METHOD indique la façon dont les choix de l'utilisateur seront envoyés à l'application chargée de les traîter et d'y répondre (POST est la méthode la plus commune), tandis que le champ ACTION sert à indiquer l'URL (l'adresse) de cette application.

Un document HTML peut comporter plusieurs formulaires 

...
<FORM METHOD=POST ACTION="application1">
    premier formulaire
</FORM>
...
...
...
<FORM METHOD=POST ACTION="application2">
    second formulaire
</FORM>
...

Champs de saisie

Comme l'exemple ci-dessus le montre, il y a plusieurs façons de présenter des choix, libres ou non, dans un formulaire. Nous allons en voir les principales.

Choix sur liste

Cette fonctionnalité permet d'offrir des menus à l'écran avec des options prédéterminées, l'utilisateur en choisissant une ou plusieurs. Dans l'exemple ci-dessus, le champ «Bibliothèque:» offre ce type de choix. Les options présentées sont précédées et suivies de la directive: 
<SELECT NAME="nom du champ">
    options
    ...
    options
</SELECT>
L'option NAME sert à identifier ce champ (cf. tableau ci-dessus). Dans notre exemple, nous aurons donc: 
<SELECT NAME="biblio">
    options
    ...
    options
</SELECT>
Chacune des trois options a un intitulé qui apparaît à l'écran, ainsi qu'un identifiant qui sera envoyé au programme chargé de répondre à l'interrogation. La syntaxe en est: 
<SELECT NAME="biblio">
    <OPTION VALUE="bnf">Bibliothèque nationale de France
    <OPTION VALUE="bpi">Bibliothèque publique d'information
    <OPTION VALUE="loc">Library of Congress
</SELECT>
La directive OPTION introduit un des choix du menu, dont l'identifiant (bnf, bpi, loc) apparaît dans l'option VALUE, tandis que l'intitulé (le texte qui apparaît dans le menu à l'écran de l'utilisateur) suit la directive.

Enfin, l'intitulé «Bibliothèque:» ne fait pas partie de la directive, c'est du texte libre que l'on peut mettre avant ou après, selon les choix de mise en page.

On remarquera que, dans l'exemple ci-dessus, le menu est positionné par défaut sur le choix «Bibliothèque publique d'information». On l'obtient à l'aide de l'utilisation du mot-clé SELECTED comme suit: 

<SELECT NAME="biblio">
    <OPTION VALUE="bnf">Bibliothèque nationale de France
    <OPTION VALUE="bpi" SELECTED>Bibliothèque publique d'information
    <OPTION VALUE="loc">Library of Congress
</SELECT>

Enfin, on remarquera que l'on ne peut effectuer qu'un seul choix dans cette liste; la sélection d'un choix en efface un autre. Il est possible de construire des listes à choix multiples, en le spécifiant dans la directive de tête: 

<SELECT NAME="nom du champ" MULTIPLE>
    options
    ...
    options
</SELECT>

Choix par boutons

Nous avons dans l'exemple ci-dessus deux choix de ce type: un bouton individuel qui peut être sélectionné ou non (le bouton «sauf»); un ensemble de boutons dans lesquels un choix en remplace un autre («Type de doc.»).

Le bouton à choix simple

Il est réalisé de la façon suivante: 
<INPUT TYPE=CHECKBOX NAME="nom du champ" VALUE="nom du choix"> intitulé à l'écran
En se référant au tableau ci-dessus indiquant les noms choisis, on aura donc, pour chacun des boutons «sauf»: 
<INPUT TYPE=CHECKBOX NAME="sauf-auteur" VALUE="oui">sauf
...
<INPUT TYPE=CHECKBOX NAME="sauf-titre" VALUE="oui">sauf
Si l'utilisateur sélectionne, comme dans notre exemple, la seconde option uniquement, le programme d'interrogation recevra comme paramètre: 
sauf-titre = oui
et ne recevra pas d'information à propos de l'option sauf-auteur. Si les deux avaient été choisies (ce qui dans notre cas donnerait des résultats étranges...), on aurait eu: 
sauf-auteur = oui
sauf-titre = oui
Il est possible de positionner un bouton dans l'état présélectionné en utilisant le mot-clé CHECKED (en tant que suggestion, par exemple). Ceci n'empèche pas l'utilisateur de le désélectionner.

Les boutons à choix multiples

Ils sont réalisés ainsi: 
<INPUT TYPE=RADIO NAME="nom du champ" VALUE="nom du choix1"> intitulé1 à l'écran
<INPUT TYPE=RADIO NAME="nom du champ" VALUE="nom du choix2"> intitulé2 à l'écran
<INPUT TYPE=RADIO NAME="nom du champ" VALUE="nom du choix3"> intitulé3 à l'écran
...
Toutes les directives ont le même nom de champ, mais des identifiants et intitulés différents pour les choix. Ainsi, dans notre exemple, on a: 

<INPUT TYPE=RADIO NAME="type" VALUE="tout"> tout
<INPUT TYPE=RADIO NAME="type" VALUE="monographie CHECKED"> monographie
<INPUT TYPE=RADIO NAME="type" VALUE="periodique"> périodique
<INPUT TYPE=RADIO NAME="type" VALUE="photo"> photo
<INPUT TYPE=RADIO NAME="type" VALUE="enregistrement"> enregistrement
<INPUT TYPE=RADIO NAME="type" VALUE="cdrom"> CD-Rom
où on a utilisé l'option CHECKED pour les monographies, ce qui la présélectionne dans le formulaire (mais l'utilisateur peut changer).

La saisie de texte (monoligne)

Les deux champs «auteur» et «titre» permettent de saisir une chaîne arbitraire de caractères. La réalisation en est simple: 
 <INPUT TYPE=TEXT NAME="nom du champ">
Dans notre exemple, nous avons donc: 
 <INPUT TYPE=TEXT NAME="auteur">
En fait, on peut, comme dans le cas des boutons, prépositionner la case de saisie du texte, comme il l'a été fait ci-dessus. Cette fonctionnalité s'obtient par l'utilisation de l'option VALUE; 
 <INPUT TYPE=TEXT NAME="auteur" VALUE="Lévi-Strauss, Claude">
Cette valeur peut évidemment être modifiée par l'utilisateur. Enfin, on peut contrôler la largeur de la fenêtre de saisie du texte: 
 <INPUT TYPE=TEXT NAME="auteur" SIZE=40 VALUE="Lévi-Strauss, Claude">

La saisie de texte multiligne

L'exemple ci-dessus n'offre que des fenêtres de saisie de texte sur une ligne. Il est des cas où l'on veut pouvoir offrir plusieurs lignes de saisie pour une option. Exemple: la saisie d'un abstract dans un formulaire pour le catalogage d'articles scientifiques; la saisie d'une lettre, dans un formulaire pour l'expédition d'un courrier électronique; la saisie de commentaires, dans un formulaire permettant au lecteur d'exprimer ses remarques sur un service, etc. Exemple:

Vos commentaires sur l'exemple:
Dans cet exemple-ci, la fenêtre a une taille prédéfinie et son contenu est préinitialisé (ce que l'utilisateur peut changer). La directive pour le faire est: 
<TEXTAREA NAME="nom du champ" ROWS=rangées COLS=colonnes>
texte de préinitialisation
</TEXTAREA>
où l'on spécifie aussi le nombre de rangées (ROWS) et de colonnes (COLS). Dans notre exemple, on a donc fait: 
<TEXTAREA NAME="comments" ROWS=4 COLS=40>
(tapez ici)
</TEXTAREA>
L'application chargée de traîter le formulaire recevra, une fois le texte saisi et envoyé avec le formulaire, 
comments = le contenu du texte

Boutons de réinitialisation et d'expédition du formulaire

Ces deux boutons (cf. l'exemple) sont simples à réaliser:
<INPUT TYPE=RESET VALUE="intitulé"> (pour le bouton de réinitialisation)
<INPUT TYPE=SUBMIT VALUE="intitulé"> (pour le bouton d'expédition)
L'intitulé est le texte qui s'affiche dans le bouton. Ainsi, pour le bouton INTERROGER, nous avons fait:
<INPUT TYPE=SUBMIT VALUE="INTERROGER">

____________________________
Serveur © IRCAM-CGP, 1996-2008 - document mis à jour le 04/01/1999 à 10h32m00s.