Introduction au langage HTML© 2005 Vatteville ingénierie
Sommaire Page précédente : Javascript Suite : Listes
11. Formulaires
<FORM …>
<FORM action="">
…
</FORM>
La balise <FORM …> ne possède pas par elle-même de représentation particulière dans la page HTML. Mais elle permet d’introduire une ou plusieurs zones de saisie (textes, menus, boutons) modifiables par le visiteur de la page, et de spécifier le traitement à appliquer aux données saisies.

Un clic sur un bouton de validation, appelé SUBMIT, permet d’appeler (comme avec la balise <A …>) un document web en lui passant la liste des valeurs saisies. Ce document, défini par le paramètre action="…" peut être une page HTML[1], un programme (en langage PHP, PERL ou même un exécutable .exe) exécuté sur un serveur Web, généralement sur la même machine que celle qui héberge la page contenant le formulaire, ou bien encore un programme d’envoi de courrier (Outlook par exemple) pour expédier les données par mail.

<FORM action="">
<INPUT type=SUBMIT value="Envoyez">
</FORM>
Cliquer sur le bouton SUBMIT recharge la page en cours.
Le libellé du bouton est défini par le paramètre value="…" ;
par défaut : "Submit Query".

<FORM action="cible.html">
…
Cliquer sur le bouton SUBMIT charge la page cible.html.

<FORM action="mailto:webmaster@vatteville-ingenierie.fr" …>
…
Les données seront envoyées au webmaster du site, à condition que votre programme de courrier soit correctement configuré.

<FORM action="cible.html">
<INPUT name="nom" type=TEXT>
…

Saisissez votre nom dans la zone ci-dessus, puis cliquez sur le bouton SUBMIT.
Le type TEXT est le type par défaut. Les autres attributs de cette balise sont :
<INPUT name="variable" …
le texte saisi dans le champ sera passé sous la forme variable=texte

<INPUT value="valeur initiale" …
<INPUT READONLY …
La valeur initiale n’est pas modifiable
<INPUT DISABLED …
La valeur initiale n’est ni modifiable, ni même transmise
<INPUT type=PASSWORD name="pass">
Comme type=TEXT, mais le texte saisi reste masqué[2]
Attributs communs aux champs de saisie de type TEXT et PASSWORD :
<INPUT size=8 …
Taille approximative[3] du champ de saisie, en caractères (par défaut, 20)
<INPUT maxlength=8 …
Nombre maximum de caractères possibles
Envoi des données
<FORM action="cible.php">
<INPUT type=SUBMIT value="Envoyez">
Prénom<INPUT name="prenom" value="Honoré">
Nom<INPUT name="nom" value="d'Estienne d'Orves">
</FORM>
Prénom
Nom
En cliquant sur le bouton "Envoyez", on constate que la chaîne transmise, précédée par un point d’interrogation, est
prenom=Honor%E9&nom=d%27Estienne+d%27Orves
  • les différents champs saisis sont transmis chacun sous la forme name=value, séparés par le caractère & ;
  • le é et l’apostrophe simple ' sont remplacés par leurs codes (Unicode ou Ascii) en représentation hexadécimale, respectivement %E9 et %27 ;
  • l’espace est remplacée[4] par le caractère +.
Cet encodage particulier est celui de la norme d’encodage des caractères qui composent l’adresse URI (Uniform Resource Ident) d’une page web http://…. Le programme (dans le document défini par le paramètre action="…") devra restaurer les caractères d’origine.
Cette façon de transmettre les données, visibles à la suite de l’adresse du document cible, s’appelle la méthode GET. C’est la méthode par défaut d’envoi des données d’un formulaire. Le clic sur le bouton SUBMIT provoque l’envoi, vers le serveur qui héberge le document cible, d’une requête qui contient l’adresse de ce document concaténée à la chaîne des données saisies, encodées de manière appropriée. Il existe une autre méthode, appelée POST, dans laquelle les données sont ajoutées à la fin de la requête. Il en résulte deux importantes conséquences :
  • les données saisies n’apparaissent pas à la suite de l’adresse ;
  • leur volume n’est pas limité[5] comme pour la méthode GET.
<FORM action="cible.php" method=POST>
<INPUT type=SUBMIT value="Envoyez">
Prénom<INPUT name="prenom" value="Honoré">
Nom<INPUT name="nom" value="d'Estienne d'Orves">
</FORM>
Prénom
Nom

Une autre conséquence de l’envoi par la méthode POST est que les données saisies n’étant pas renvoyées vers l’ordinateur du visiteur, elles doivent nécessairement être traitées sur le serveur où est hébergé le document cible, par un programme, en PERL, PHP ou autre, exécuté côté serveur.

Autres types de balise INPUT :
Donnée cachée : HIDDEN
<INPUT type=HIDDEN name="pi" value="3.14">
La donnée est transmise sous la forme "pi=3.14", mais rien n’apparaît sur la page du formulaire.

  
Transfert de fichier : FILE
<FORM action="cible.php" enctype="multipart/form-data" method=POST>
<INPUT type=FILE name="cv">
</FORM>
  
Le fichier choisi sera copié de votre machine vers le serveur. Le type d’encodage (attribut enctype) diffère de l’encodage par défaut, c’est pourquoi il doit être spécifié. Pour une donnée de type FILE, la methode POST est obligatoire.
Boîte à cocher (carrée) : CHECKBOX
Secteurs d’activité :
<INPUT type=CHECKBOX name="info" CHECKED>Informatique
<INPUT type=CHECKBOX name="auto">Automobile
<INPUT type=CHECKBOX name="tour">Tourisme



Secteurs d’activité :
Informatique
Automobile
Tourisme
  • possibilité de choix multiple 
  • Par défaut, aucune case n’est cochée. L’attribut CHECKED permet de présélectionner un item 
  • seuls les items cochés sont transmis, sous la forme name=on.
Bouton rond à enclencher : RADIO
Civilité :
<INPUT type=RADIO name="civ" value="Mr">M.
<INPUT type=RADIO name="civ" value="Mme">Mme
<INPUT type=RADIO name="civ" value="Melle">Melle



Civilité :
M.
Mme
Melle
  • les boutons qui ont le même nom sont exclusifs les uns des autres 
  • par défaut, aucun item n’est sélectionné[6]. L’attribut CHECKED permet de présélectionner un item 
  • seul l’item coché est transmis, sous la forme name=value.


Remise à zéro : RESET


<INPUT type=RESET value="RAZ">
Cliquer sur le bouton RESET restaure les valeurs initiales du formulaire.
Le libellé du bouton est défini par le paramètre value="…" (par défaut : "Reset")

Dans le cas d’un formulaire unique dans une page, ce bouton a le même effet qu’un rafraîchissement de la page.

Bouton à usage général : BUTTON

<INPUT type=BUTTON value="Cliquez ici"
onClick="alert('C\u2019est ça')">
Ce bouton a pour fonction l’appel d’un script, par le gestionnaire d’événements onClick.
Le libellé du bouton est défini par le paramètre value="…"


Image à cliquer : IMAGE

<INPUT type=IMAGE name="palette"
src="palette.jpg" alt="Palette de couleurs">

Cliquez dans l’image pour sélectionner une couleur
Cette image a la fonction du bouton SUBMIT. Mais en plus des différents champs du formulaire, les coordonnées du point cliqué, en pixels par rapport au coin supérieur gauche de l’image, sont transmis sous la forme palette.x=###&palette.y=###, à charge pour le programme cible d’en faire l’usage approprié.

Autres champs de saisie :
Texte de plusieurs lignes
<TEXTAREA name="texte" rows=2 cols=20>
Texte
initial
</TEXTAREA>
Le champ de saisie <TEXTAREA …> ressemble au champ de saisie de texte simple <INPUT type=TEXT …>. Il en diffère par sa syntaxe et par la possibilité de saisir plusieurs lignes[7] de texte. Sur les systèmes Windows, les fins de ligne sont encodées comme "%0A%0D".

Menu déroulant
<SELECT name="choix">
<OPTION value="beaujolais" SELECTED>Beaujolais
<OPTION value="beaujsuperieur">Beaujolais supérieur
<OPTION value="beaujvillages">Beaujolais-Villages
</OPTION>
<OPTGROUP label="Crus Beaujolais">
<OPTION value="saintamour">Saint-Amour
<OPTION value="julienas">Juliénas
<OPTION value="chenas">Chénas
<OPTION value="moulinavent">Moulin-à-Vent
<OPTION value="fleurie">Fleurie
<OPTION value="chiroubles">Chiroubles
<OPTION value="morgon">Morgon
<OPTION value="brouilly">Brouilly
<OPTION value="cotedebrouilly">Côte de Brouilly
</OPTGROUP>
</SELECT>

Par défaut, un seul choix est possible.
L’attribut MULTIPLE permet des choix multiples. Dans ce cas, tous les items sont affichés (à défaut de l’emploi de l’attribut size=1) et l’utilisateur, pour sélectionner plusieurs items à la fois, doit cliquer avec le bouton gauche de la souris tout en enfonçant la touche [Ctrl] du clavier.
L’attribut size permet de choisir le nombre d’items affichés ; par défaut, 1 pour les choix simples, tous pour les choix multiples.
L’attribut SELECTED permet de présélectionner un item (ou plusieurs, avec l’attribut MULTIPLE).
<OPTGROUP label="…"> définit des sous-groupes au sein du menu. En l’état actuel de la norme, tous les sous-groupes doivent être au même niveau (pas de sous-groupes imbriqués).
<OPTION …> est une des balises qu’il n’est pas nécessaire de refermer explicitement. L’item qu’elle définit se termine par une nouvelle balise OPTION ou par la balise de fermeture du menu, </SELECT> ou du groupe d’items </OPTGROUP>. En revanche, la balise de fermeture </OPTION> est obligatoire avant la balise <OPTGROUP>, si l’item en cours n’est pas lui-même dans un sous-groupe.

Groupement de champs de saisie
<FIELDSET>
<LEGEND>Exemple</LEGEND>
…
</FIELDSET>
Exemple
Des champs de saisie peuvent apparaître entourés d’un cadre qui indique au visiteur leur apparentement. Ce cadre, défini par la balise </FIELDSET>, peut être pourvu d’un titre au moyen de la balise </LEGEND>. Ces balises n’entraînent pas de transmission de données particulières à la cible du formulaire.

Interface avec javascript
Méthodes spécifiques
Dans la zone de définition d’un formulaire (c’est à dire entre les balises <FORM …> et </FORM>) deux méthodes javascript, submit() et reset() permettent de simuler un click sur un bouton SUBMIT ou RESET, respectivement.
Deux gestionnaires d’événements, onSubmit et onReset sont associés à la balise <FORM …>. Ils sont invoqués, respectivement, avant la soumission ou la remise aux valeurs initiales du formulaire. Si la fonction javascript appelée retourne false, l’opération (soumission ou remise à zéro) est annulée.

Gestionnaires d’événements
   FORM   INPUT  TEXTAREA SELECT  
onSubmitOk   
Quand le visiteur clique sur un bouton SUBMIT ou quand un script appelle la méthode submit()
onResetOk   
Quand le visiteur clique sur un bouton RESET ou quand un script appelle la méthode reset()
onClick Ok  
Quand le visiteur clique sur un élément
onSelect OkOk 
Quand le visiteur sélectionne tout ou partie du texte
onChange OkOkOk
Quand un élément perd le focus et que sa valeur a été modifiée
onFocus OkOkOk
Quand un élément acquiert le focus
onBlur OkOkOk
Quand un élément perd le focus
onKeyPress OkOkOk
Quand une touche est enfoncée, puis relachée, avec le même élément actif
onKeyDown OkOkOk
Quand une touche est enfoncée
onKeyUp OkOkOk
Quand une touche est relachée

Envoi au moyen de la touche [Entrée]
Cette touche[8] est normalement sans effet dans un formulaire, sauf pour le champ multiligne TEXTAREA, où elle marque le saut de ligne.
Si l’on souhaite que la touche [Entrée] déclenche l’envoi du formulaire, comme si le visiteur avait cliqué sur le bouton SUBMIT, il faut piéger l’événement keypress, pour chaque champ de saisie concerné.
<INPUT … onKeyPress="if(event && event.keyCode == 13){this.form.submit();return false;}else return true">

Notes
[1] dans ce cas, il faudra utiliser des instructions javascript pour récupèrer les données.
[2] le texte saisi n’est masqué que sur l’écran. Il est transmis en clair, et n’offre aucune garantie de confidentialité sur le Web.
[3] Est prise en compte la largeur moyenne des caractères. Le paramètre size n’est exact qu’avec les polices de largeur fixe.
[4] Le mot "espace" est féminin quand il désigne la séparation entre deux mots.
[5] La taille maximale autorisée pour une adresse URI dépend des serveurs et des routeurs intermédiaires. Elle ne peut excéder, tout compris, c’est à dire adresse + données, 2 083 caractères.
[6] Avec les navigateurs courants. Certains navigateurs peuvent sélectionner le premier item, par défaut.
[7] Les navigateurs imposent une limite sur le nombre total de caractères transmis.
[8] Dont le code Ascii est 13.

Lexique
box=boîte, check=cocher, form=formulaire, hidden=caché, reset=réinitialiser, server-side=côté serveur, submit=soumettre

Sommaire Page précédente : Javascript Suite : Listes
Introduction au langage HTML© 2005 Vatteville ingénierie