HTML en 5 leçons


Partie 4 Formulaires et masques de saisie

Leçon 1 Leçon 2 Leçon 3 Leçon 4 Leçon 5


eric@netline.be

Le langage HTML dispose d'un ensemble de balises destinées à gérer l'interactivité avec l'utilisateur et son programme client. Je pense à tous les boutons et masques de saisie qui permettent à l'utilisateur d'introduire des données dans une page HTML afin de les expédier vers un serveur. Livres d'or, demandes de renseignements, formulaires d'inscription, tous ont recours à une balise particulière <FORM> qui marque dans un document HTML, le début d'une zone de saisie. Entre <FORM> et son </FORM> final, nous placerons ensuite des objets tels que zone de texte, list box, radio button ou check box auxquels nous pourrons attribuer des noms, des valeurs par défaut. Entre <FORM> et </FORM>, le seul élément impératif est un bouton <INPUT> avec comme attribut <INPUT TYPE="submit"> dont l'activation déclenchera l'envoi des données vers le serveur pour traitement ultérieur. Mais voyons tout ceci en détail

Form


<form> . . . </form> sont utilisés pour la création de masques de saisie. Ils délimitent la zone d'entrée de données et fournissent en même temps de l'information sur la méthode à utiliser pour entrer en contact avec un serveur et lui transmettre les données récoltées. Un document peut contenir plusieurs éléments de formulaires à condition qu'ils ne soient pas imbriqués.

Attributs :

action:

location URL ( Universal Resource Locator) du programme qui gérera les données du masque.

method: get ou post :

méthode choisie pour l'échange de données entre client et serveur . Post est souvent préféré. GET est l'action par défaut qui ajoute le contenu du questionnaire à l'URL
Cela donnera un résultat du type action?name=value&name=value&name=value
Prenons l'exemple
<form action="http://www.data.com/program?name=value&name2=value" method="get"><input type="submit"></form>
Une pression sur le bouton "Submit" déclenchera l'exécution du programme "program" sur le serveur www.data.com. Le programme reçoit comme arguments à l'exécution les noms des variables et les valeurs introduites par l'utilisateur. Sous MS-DOS ou Unix, le nom du programme et ses arguments sont séparés par des espaces comme dans
copy *.* c: ou cp /etc/* /usr/bin. A cause de la syntaxe particulière propre aux URL, le nom du programme est séparé de ses arguments par un point d'interrogation tandis que les arguments sont séparés entre eux par des 'et commerciaux'

POST envoie les données sous forme de data et non d'URL
<form action="http://kuhttp.cc.edu/cgi-bin/register" method=post> . . . </form> . Les informations sont codées exactement comme dans la méthode GET mais sont envoyées sous forme de variables d'environnement lors de la transaction HTTP ( Hyper Text Transfer Protocol ) entre client et serveur.

ENCTYPE

est optionnel et dans le cas où la méthode est de type POST spécifie le type d'encodage du document.
La valeur allouée à ENCTYPE spécifie le type de média MIME utilisé pour encoder les paires nom/valeur .
La valeur par défaut est "application/x-www-form-urlencoded", les autres valeurs acceptables étant représentées sous la forme multipart/form-data

Accept-charset

Cet attribut spécifie une liste des jeux de caractères acceptables pour l'encodage des données, une virgule et ou un espace séparant chaque élément de la liste.

Name

Optionnel, cet attribut permet de donner une identification unique à un masque de saisie de manière à le réferncer et le manipuler avec un langage de scripting.

Target

Utilisé conjointement avec des frames, l'attribut target permet de définir le cadre qui accueillera le résultat de la soumission des données après leur traitement par un script.
Les noms de cible commencant par un caractère de soulignement et abordés dans notre précédente leçon sur les frames sont d'application ici:
TARGET="_blank" ( hyperlien sera toujours chargée dans une nouvelle fenêtre vide)
TARGET="_self" ( charger le document dans la fenêtre elle-même où l'hyperlien a été sélectionné. )
TARGET="_parent" (chargement de la page dans le document qui sert de parent au FRAMESET courant)
TARGET="_top" (charger la page HTML dans le corps de la fenêtre principale)

Input

<input> (pas de marqueur de fin)
définit un champ de saisie où l'utilisateur peut encoder des données. A chaque champ d'input est associé une variable, une valeur et un type de donnée.

Attributs :
type

· type="text"
· type="password"
· type="checkbox" sélectionnée ou non
· type="radio" sélection exclusive
· type="submit" bouton envoyant les données au serveur
· type="reset" bouton réinitialisant les données à leurs valeurs initiales
· type = "button"
· type = "hidden"

Accesskey

L'argument AccessKey permet de placer le focus sur un élément HTML au moyen d'un raccourci clavier. Un simple caractère est communiqué comme valeur pour cet attribut.

Disabled

Un simple attribut sans argument utlisé pour signaler qu'un élément HTML est initialement inactif.

Height

Spécifie la hauteur d'un bouton exprimée en pixels

Name

Name est un attribut obligatoire qui associe un nom symbolique à un champ lors de la soumission du formulaire.
Ex <input type="checkbox" name="box1">

Tabindex

La tabulation est une méthode pour donner le focus à un élément HTML en utilisant la touche TAB. L'ordre d'activation des éléments correspond généralement à l'ordre d'apparition à l'écran mais peut être controlé par l'attribut TABINDEX suivi d'une valeur, les valeurs les plus petites correspondant aux éléments recevant le focus en premier lieu.

Width

Attribut spécifiant la largeur d'un bouton exprimée en pixels

value

· pour les types="text" et "password", valeur par défaut de la variable
· pour les types="checkbox" et "radio", valeur sélectionnée
· pour les types="reset" ou "submit", étiquette remplacant les mots "submit" et "reset".

checked

sans argument, si le mot "checked" est présent, le champ est sélectionné

size

taille physique du champ de saisie "text" ou "password"     (défaut = 20)

maxlength

nombre maximal de caractères admis   

Remarques :
Les caractères de type "&", "%", ou "$" sont automatiquement traduits en forme hexadécimale, un pourcent suivi du code ASCII.
"&%$" devient "%26%25%24".


Type = "button"


BUTTON est une valeur de l'attribut TYPE pour la balise INPUT à l'intérieur de l'élément FORM. Il place un bouton dans un formulaire HTML et fait appel à du langage de scripting pour générer une action lors d'un clic sur ce bouton.

Exemple
<html>
<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<p><input type="button" value="My Button" name="B1" onClick="test1(this.form)">></p>
</form>
</body>
</html>
Image1.gif (5418 bytes)


TYPE = "Checkbox"


Checkbox est une valeur pour l'attribut TYPE utilisé pour opérer un choix booléén ou multiple entre différentes valeur. Par défaut, l'état d'un bouton checkbox est OFF c'est-à-dire déselectionné.

Accesskey
Checked
Optionnel, permet d'activer ou désactiver la sélection d'un checkbox. Valeur admise : ON ou OFF
Disabled
Name
Tabindex
Type
Value

Exemple
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<p><input type="checkbox" value="checkbox1" name="C1" checked>Salt<br>
<input type="checkbox" value="checkbox2" name="C1">Pepper</p>
<p><input type="submit" name="submit"> </p>
</form>
</body>
</html>

Image2.gif (5775 bytes)

Notez bien cette adresse URL chez ncsa.uiuc.edu. Elle vous permettra de tester votre formulaire et vérifier les valeurs renvoyées par chacun de ses champs. C'est ainsi que notre exemple génère la réponse suivante lorsque nous sélectionnons à la fois le sel et le poivre
Query Results
You submitted the following name/value pairs:
· C1 = checkbox1
· C1 = checkbox2
· submit = Submit Query


FILE

FILE permet d'encoder un nom de fichier lors de la saisie d'un formulaire. Pour ce faire, l'auteur d'une page HTML doit spécifier un nouvel attribut ENCTYPE pour l'élément FORM ENCTYPE="multipart/form-data"

Accept
Cet attribut spécifie les types MIME que le serveur traitant le formulaire doit gérer correctement
Accesskey
Disabled
Name
Readonly
Annonce au navigateur que le contenu du champ est en lecture seule et ne peut être modifié par l'utilisateur.
Tabindex
Type
Value

Exemple
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query" ENCTYPE="multipart/form-data">
<p>Enter filename <input type="file" name="myfile"></p>
<p><input type="submit" name="submit"> </p>
</form>
</body>
</html>

Image3.gif (7520 bytes)

HIDDEN

HIDDEN désigne un champ de formulaire qui n'apparaît pas à l'écran de l'utilisateur mais qui peut servir à transmettre des informations invariables au serveur.

Name
Type

Exemple
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<input type="hidden" name="Hidden1" value="hiddenvalue1">
<p><input type="submit" name="submit"> </p>
</form>
</body>
</html>

Dans cet exemple, le champ Hidden1 n'apparaît pas dans la fenêtre du navigateur mais permet d'envoyer la valeur "hiddenvalue1" à l'insu de l'utilisateur
Query Results
You submitted the following name/value pairs:
· Hidden1 = hiddenvalue1
· submit = Submit Query

IMAGE

Spécifie le nom d'une image qui peut être sélectionnée pour traiter un script. IMAGE agit un peu comme un champ INPUT TYPE=SUBMIT à l'exception que les coordonnées X et Y du clic dans l'image sont envoyées au serveur avec le reste des données.
Accesskey
A single, case-insensitive alphanumeric character from a browser's character set.
Align
Alignement du texte
Left - Right - Top [DEFAULT] - Texttop - Middle - Absmiddle - Baseline - Bottom - Absbottom
Alt
Text à afficher en remplacement de l'image pour les navigateurs où le mode image a été désactivé
Disabled
Height
Name
Src
Indique le fichier source de l'image en position absolue ou relative
Tabindex
Type
Usemap
Indique si cette image est associée à une "imagemap" où différentes portions de l'image renvoient à différents hyperliens
Value
Width

Example
<html>
<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<p><input src="OEIL.jpg" name="I1" width="227" height="227" alt="OEIL.jpg" type="image"></p>
</form>
</body>
</html>

Image4.gif (45668 bytes)Query Results
You submitted the following name/value pairs:
· I1.x = 76
· I1.y = 127

PASSWORD

PASSWORD désigne un champ de saisie de type TEXT où les données sont masquées par des étoiles pour préserver la confidentialité des données à l'écran.

Accesskey
Disabled
Name
Readonly
Tabindex
Value

Exemple
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<p>Enter password <input TYPE="password" NAME="thepassword" size="20"><br>
<input type="submit"> </p>
</form>
</body>
</html>
Image5.gif (5980 bytes)Query Results
You submitted the following name/value pairs:
· thepassword = 11122222222

RADIO

RADIO est un champ de formulaire permettant d'opérer des choix exclusifs et booléens parmi un groupe d'items dont un seul à la fois est ON
Accesskey
Checked
Disabled
Name
Tabindex
Type
Value

Exemple
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<i><p>Payment:</i> <ul>
<li><input TYPE="radio" NAME="paymethod" VALUE="mastercard"> Mastercard.</li>
<li><input TYPE="radio" NAME="paymethod" VALUE="visa" checked> Visa. </li>
<li><input TYPE="radio" NAME="paymethod" VALUE="americanexpress">American Express. </li>
</ul>
<p><input TYPE="submit">. </p>
</form>
</body>
</html>
Image6.gif (6936 bytes)Query Results
You submitted the following name/value pairs:
· paymethod = visa

RESET

Un bouton particulier qui réinitialise les champs d'un formulaire à leur valeur initiale
Accesskey
Disabled
Height
Tabindex
Value
Width

Exemple
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<p><input TYPE="reset" VALUE="clear the form">
<input TYPE="submit">.
</p>
</form>
</body>
</html>

SUBMIT

Quand il est activé, le bouton SUBMIT envoie l'information contenue dans le formulaire au serveur chargé de traiter le script de traitement
Accesskey
Disabled
Height
Name
Tabindex
Value
Width


TEXT

TEXT désigne le champ de formulaire le plus courant : une simple ligne de texte à saisir
Accesskey
Disabled
Maxlength
Désigne le nombre de caractères maximal qui peuvent être introduits par l'utilisateur. Si l'attribut MAXLENGTH est supérieur à l'attribut SIZE, le texte déroulera dans le champ si nécessaire.
Name
Readonly
Size
Taille du masque de saisie
Tabindex
Value
Exemple
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<p><input TYPE="text" VALUE="Zappa" NAME="text1" SIZE="10" MAXLENGTH="25"> <input TYPE="submit">. </p>
</form>
</body>
</html>

Image7.gif (6125 bytes)Query Results
You submitted the following name/value pairs:
· text1 = Zappa


Textarea

<textarea> . . . texte par defaut . . </textarea>
définit un champ rectangulaire où l'utilisateur peut encoder du texte sur plusieurs lignes

Attributs :
name
nom symbolique de la variable   
rows and cols nombre de lignes et nombre de caractères par ligne
Exemple <TEXTAREA NAME="foo" ROWS=4 COLS=40>texte défaut</TEXTAREA>


<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="POST" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query">
<p><textarea NAME="positive" ROWS="5" COLS="20"></textarea> </p>
<p><input TYPE="submit">. </p>
</form>
</body>
</html>

Image8.gif (6774 bytes)
Query Results
You submitted the following name/value pairs:
· positive = 1st line line 2 line 3 line 4


Select


<select> . . . </select>
Liste d'items optionnels. Requiert un tag <option> pour chaque item de la liste

Accesskey
Align
Spécifie l'alignement horizontal et vertical de la liste de sélection
Left - Right - Top - Middle - Bottom
Disabled
Multiple
Définit si plusieurs options peuvent être sélectionnées en même temps
Name
Size
Hauteur de la liste de sélection exprimée en lignes.
Tabindex

Exemple
<html>

<head>
<title>Form Page</title>
</head>

<body>
<form METHOD="GET" ACTION="http://hoohoo.ncsa.uiuc.edu/htbin/query">
<p><select NAME="list1" SIZE="3" MULTIPLE>
<option VALUE="opt1">option1 </option>
<option VALUE="opt2">option2 </option>
<option SELECTED VALUE="opt3">option3 </option>
</select> <input TYPE="submit">. </p>
</form>
</body>
</html>

Image9.gif (5540 bytes)
Query Results
You submitted the following name/value pairs:
· list1 = opt2
· list1 = opt3

Notez au passage comment le contenu de votre formulaire est transformé en une adresse URL comme suit lorsque vous pressez le bouton submit

http://hoohoo.ncsa.uiuc.edu/htbin/query?list1=opt2&list1=opt3

Vous voyez que votre bouton submit fait appel à l'URL spécifiée dans <FORM ACTION=>. Le nom du script sur le serveur est séparé des autres arguments par un point d'interrogation. Ensuite chaque champ du formulaire est passé sous la forme name=value, chaque champ étant séparé par un et commercial (&)

Option


Disabled
Selected
Option sélectionnée au départ
Value


Où tester ses masques ?


· Pour METHOD="POST", essayez ACTION="http://hoohoo.ncsa.uiuc.edu/htbin-post/post-query"
· Pour METHOD="GET", essayez ACTION="http://hoohoo.ncsa.uiuc.edu/htbin/query"

Tutorials

http://www.ncsa.uiuc.edu/SDG/Software/Mosaic/Docs/fill-out-forms/overview.html
Mosaic for X version 2.0 Fill-Out Form Support

http://hoohoo.ncsa.uiuc.edu/cgi/forms.html
NCSA's "Decoding FORMs with CGI" tutorial

http://ecco.bsee.swin.edu.au/text/form-tut/ft.1.html
Carlos' Forms Tutorial

http://www.webcom.com/~webcom/html/tutor/forms/
WWW Fill-out Forms Tutorial

http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/forms.html
The Information Commons Introduction to HTML: Forms

http://www.research.digital.com/nsl/formtest/
Digital Corp. HTML Form Testing

http://www.yahoo.com/Computers_and_Internet/Internet/World_Wide_Web/Programming/Forms/
Yahoo's HTML Forms section