Formulaire

Dr. Manel KOLLI

 1. Fonctionnement général
• Dans les premiers temps du Web, l'information ne circulait
quasiment que dans un seul sens : du serveur vers
l'internaute.
• Il n'existait alors aucun retour de l'utilisateur vers le serveur :
l'arrivée des formulaires a comblé cette lacune. Un
formulaire doit recueillir des informations de l'utilisateur,
puis les transférer au serveur, qui à son tour doit les traiter.
• Or le traitement de cette information sur le serveur est
effectué par des scripts (comprendre "petit programme
généralement interprété") écrits en langage C, Perl ou ASP.
• Nous sortons ici du cadre de notre cours HTML statique :
nous ne traiterons pas ici le côté traitement-serveur, cette
partie est prévue plus tard dans l'année.
 II. La balise <form>
1. Où se place-t-elle?

• Un formulaire débute par la balise <form> (et

finit donc par </form>).
• Ce conteneur contient toutes les autres
balises du formulaire.
• Il peut contenir aussi d'autres balises : <p>,
<table>, etc., permettant la présentation du
formulaire.
 2. Fonction

• Elle est destinée, essentiellement, à préciser

où envoyer les données recueillies par le
formulaire.

• Elle permet aussi d'indiquer au serveur la

forme sous laquelle ces données lui seront
transmises (mode de codification).
 3. Attributs
Attributs Effet Valeur(s)
URL du script
URL, 2 types possibles :
CGI (ou autre,
fourni par le
 http : pour un traitement immédiat.
action serveur), qui  mailto : dans le cas d'un envoi à un
traite les données
courrier électronique, en vue d'un traitement
recueillies. Cet
différé.
attribut est
obligatoire.
 get : valeur par défaut. Les données sont
adressées sous la forme d'une liste de valeurs
accolées à l'URL avec interposition d'un
séparateur particulier (point d'interrogation). Le
nombre de caractères doit rester inférieur à 256.
De plus elle ne permet pas d'envoyer les
Indique sous
données à une boîte de courrier électronique. Il
quelle forme vont
est donc préférable d'utiliser la seconde
method être codées les
méthode.
informations
 post : les données sont adressées sous la
envoyées.
forme d'une liste nom/valeur accolées à l'URL
mais ici, le script doit lire les données par défaut
afin d'atteindre les véritables données du
formulaires. La forme de cette liste dépend de
l'attribut enctype.

 application/x-www-form-urlencoded :
Précise la l'envoi se présente comme une chaîne de
méthode MIME de caractères formées de couples nom=valeur
codification de sépararés par un &,
l'envoi. Permet au
nom1=valeur1&nom2=valeur2&nom3=valeur3 (c'est
serveur
enctyp la valeur par défaut).
d'anticiper sur
e  text/plain : le séparateur précédent est
l'objet à recevoir
remplacé par un retour chariot. C'est la forme à
et de prévoir le
utiliser pour l'envoi au courrier électronique.
protocole
 multipart/form-data : lorsqu'un fichier est
d'échange (Pour
plus de détails). attaché à l'envoi (<input type="file" ...>).

Précise la
méthode MIME de
codification de
accept l'envoi pour un Chaîne de caractères donnant un code MIME
fichier. Permet au reconnu.
serveur
d'anticiper sur le
fichier à recevoir
 4. Exemples

• Exemple pour un formulaire d'envoi de courrier

électronique sur le serveur de Multimania :
<form method="get" action="/cgi-
bin/mailer">.

• Exemple pour un formulaire classique sans

l'aide de script CGI : <forum
action="mailto:webmaster@allhtml.com"
method="post" enctype="text/plain">.
 III. la balise <input>
a. Fonction
• Cette balise sert à spécifier comment s'effectue la saisie du formulaire : par
cases à cocher, boutons radio, texte libre, etc. Tous ces éléments de saisie
sont décrits à l'aide d'une seule balise : la balise <input>. C'est son attribut
type qui permet de préciser s'il s'agit de cases à cocher, boutons radio,
texte libre...
• L'attribut type peut prendre les valeurs suivantes :

o text
o password
o chekbox
o radio
o submit
o reset
o image
o button
o hidden
o file
 b. Attributs généraux
Attributs Effet Valeur(s)
Une chaîne
name Le nom du champ.
de caractères.
Une chaîne
alt Une courte description.
de caractères.
disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen.
Définit une touche du clavier permettant d'accéder
Touche du
accesskey au champ de formulaire. La combinaison "ALT+touche"
clavier
a le même effet que l'activation du champ.
Valeur
Fixe la position de l'élément dans l'ordre séquentiel
tabindex numérique
des tabulations.
entière
onfocus, Un script à exécuter quand le curseur est positionné Une chaîne
onblur sur le champ (onfocus), ou bien qu'il le quitte (onblur). de caractères.

onchange Un script à exécuter quand contenu du champ a été Une chaîne

changé. de caractères.
 2. Types de balises <input>
a. Champ de saisie

• L'attribut type vaut type="text". La balise permet alors à

l'utilisateur de saisir une ligne de texte. Les attributs utiles pour ce
type sont :
• size : un nombre entier, qui définit la taille visible du champ en
nombre de caractères.
• maxlength : un nombre entier, qui définit le nombre maximum de
caractères autorisés.
• value : une chaîne de caractères, qui permet d'afficher un texte par
défaut dans la zone de saisie.
• readonly : un booléen. La modification du contenu n'est pas
permise.
• L'attribut name est obligatoire pour ce type de champ.
 b. Case à cocher

 L'attribut type vaut type="checkbox". Les

attributs utiles pour ce type sont :
value : une chaîne de caractères, obligatoire,
valeur passée au serveur (couple nom="valeur")
(a plus de sens dans le cas radio suivant).
checked : un booléen (s'utilise sous la forme
checked="checked"). S'il est activée, la case est
cochée par défaut.
 c. Bouton radio

• L'attribut type vaut type="radio". Outre la présentation (les

cases sont rondes et non plus carrées), il existe une grande
différence entre les cases à cocher et les boutons radio :
• les boutons radio qui portent le même name s'excluent
mutuellement, le cochage de l'un décoche les autres. Les
attributs utiles pour ce type sont :

o value : une chaîne de caractères, obligatoire, valeur passée au

serveur (couple nom="valeur").
o checked : un booléen (s'utilise sous la forme checked="checked").
S'il est activée, la case est cochée par défaut.
d. Attacher un fichier
• L'attribut type vaut type="file". Il s'agit de donner la possibilité
à l'utilisateur du formulaire de joindre un fichier à son envoi.
L'attribut utile pour ce type est value , une chaîne de caractères,
qui indique le lom du fichier à attacher par défaut.

e. Cacher des données

• L'attribut type vaut type="hidden". Pourquoi cacher des
données ? Il s'agit plutôt de faciliter le traitement des données
recueillies par le serveur en fournissant le nom du formulaire,
l'URL du formulaire, et d'autres indices inutiles à l'utilisateur
mais très utiles au classement des données. Ces données
deviennent obligatoires lorsque vous faîtes héberger vos pages
Web.
 Les attributs utiles pour ce type sont :

• value : une chaîne de caractères. Valeur cachée à envoyer au serveur,

obligatoire.
• Par exemple, avec le script CGI chargé de la gestion de l'envoi de courrier
électronique sur Multimania :
• <input type="hidden" name="TO" value="login@multimania.com"> :
cette valeur indique sur quelle adresse électronique le formulaire sera
envoyé.
• <input type="hidden" name="FROM" value="login@multimania.com"> :
cette valeur indique la provenance du formulaire.
• <input type="hidden" name="SUBJECT" value="FORMULAIRE">  : Cette
valeur indique le nom du formulaire (le sujet du courrier), utile si vous avez
plusieurs formulaires, cela permet de trier son courrier.
• <input type="hidden" name="GOTOURL"
value="http://www.multimania.com/login/reponse.html">  : cette valeur
indique l'URL complète de la page HTML à afficher après l'envoi du
formulaire.
 f. Mot de passe
• L'attribut type vaut type="password". A l'identique que le
type text, mais les caractères tapés sont affichés sous forme
d'astérisques. Mais attention : le mot de passe est envoyé en
clair dans le message final. Aucune méthode de chiffrement
n'est appliquée : la confidentialité ne se limite qu'à l'instant de
la saisie.
• Les attributs utiles pour ce type sont les mêmes que ceux du
type text :
o size : un nombre entier, qui définit la taille visible du champ en
nombre de caractères.
o maxlength : un nombre entier, qui définit le nombre maximum de
caractères autorisés.
o value : une chaîne de caractères, qui permet d'afficher un texte par
défaut dans la zone de saisie.
 3. Soumettre et mettre à zéro des données
a. Soumission de données
L'attribut type vaut type="submit". Les attributs utiles pour ce
type sont :
value : une chaîne de caractères. Légende du bouton, par défaut
Submit.
Une variante est possible en utilisant le type image : type="image".
Le bouton d'envoi est alors... une image. Les attributs utiles pour ce
type sont :
src : une chaîne de caractères. URL de l'image à utiliser.

b. Réinitialisation d'un formulaire

L'attribut type vaut type="reset". Il s'agit d'un bouton qui, cliqué,
remet à leurs valeurs par défaut l'ensemble des champs du
formulaire. L'attribut utile pour ce type est value , une chaîne de
caractères qui indique la légende du bouton, valant par défaut Reset.
 IV. la balise <textarea>
1. Fonction
• Elle permet aux utilisateurs de votre site de
laisser un commentaire ou de taper un texte
quelconque.
 2. Attributs
Attribut Effet Valeur(s)
Une chaîne de
name Nom de l'élément.
caractères.
rows et Nombre de lignes et de colonnes de la zone de Un nombre
cols texte. Ces attributs sont obligatoires. entier.
readonly La modification du contenu n'est pas permise. Un booléen.
disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen.
Définit une touche du clavier. La combinaison "ALT
accesskey + touche" a le même effet que l'activation du
Touche du
clavier
champ.
Valeur
Fixe la position de l'élément dans l'ordre
tabindex numérique
séquentiel des tabulations.
entière
Un script à exécuter quand le curseur est
onfocus, Une chaîne de
positionné sur le champ (onfocus), ou bien qu'il le
onblur caractères.
quitte (onblur).

onchange
Un script à exécuter quand contenu du champ a Une chaîne de
été changé. caractères.
 V. Liste de choix, la balise <select>
1. Fonctionnement
• Il s'agit d'une liste de propositions ou d'options
parmi lesquelles l'utilisateur doit opérer un choix.
• Ce choix peut être unique ou multiple. Les
options possibles sont décrites pour chacunes
d'entre-elles dans un conteneur <option> ( la
balise fermante </option> est obligatoire).
• Il y a autant de balises <option> que d'options.
2. Attributs de la balise <select>
Attribut Effet Valeur(s)
name Nom de l'élément. Une chaîne de caractères.
size Le nombre d'options accessibles. Un nombre.
Un booléen. Par défaut,
Permet à plusieurs options d'être
multiple une seule option peut être
simultanément sélectionnées.
sélectionnée.
Désactive l'élément, qui apparaît dès
disabled Un booléen.
lors en grisé.
Fixe la position de l'élément dans
tabindex Valeur numérique entière
l'ordre séquentiel des tabulations.
Un script à exécuter quand le curseur
onfocus,
est positionné sur le champ (onfocus), ou Une chaîne de caractères.
onblur
bien qu'il le quitte (onblur).
Un script à exécuter quand contenu du
onchange Une chaîne de caractères.
champ a été changé.
 3. Balises <optgroup> et <option>
a. Introduction
• La balise <select> admet deux balises-enfants... <optgroup> permet de rassembler des éléments
<option>.

b. Balise <option>
• Chaque "option" est une possibilité de choix dans le menu select. Cette balise possède les
attributs suivants :

Attribut Effet Valeur(s)

Ce qui apparaît dans la liste d'options du menu. Si
Une chaîne
value cet attribut n'est pas présent, c'est le contenu de
de caractères.
l'élément <option> lui-même qui est affiché.
Selected Spécifie l'option sélectionnée par défaut. Un booléen.
Disabled Désactive l'élément, qui apparaît dès lors en grisé. Un booléen.

label
Une étiquette désignant l'option choisie dans le Une chaîne
menu. de caractères.
 c. Balise <optgroup>

• Cette balise permet de rassembler en catégories les

éléments <option>, pour les faire apparaître de manière
ordonnée dans le menu.

Attribut Effet Valeur(s)

label
Une étiquette désignant le groupe d'options Une chaîne de
choisies dans le menu. caractères.
Désactive l'élément, qui apparaît dès lors en
disabled Un booléen.
grisé.
 VI. Autres éléments de formulaire
• Les balises présentées dans cette partie sont très
peu utilisées. Nous allons nous limiter aux balises
<label> et surtout <button>, mais il existe aussi
<fieldset> et <legend>.

1. La balise <label> a. Fonction

• Cette balise permet d'associer à un élément de
formulaire des informations relatives à son
contenu ; cette information est utile notamment
pour les navigateurs destinés aux mal-voyants.
 b. Attributs

Attribut Effet Valeur(s)

for
Renvoie à l'élément de formulaire spécifié par le Une chaîne de
même attribut id. caractères.
Définit une touche du clavier. La combinaison "ALT
accesskey + touche" a le même effet que l'activation du
Touche du
clavier
champ.
Un script à exécuter quand le curseur est
onfocus, Une chaîne de
positionné sur le champ (onfocus), ou bien qu'il le
onblur caractères.
quitte (onblur).
 c. Exemple
• L'exemple suivant donne plusieurs possibilités
d'utilisation de cet élément...
<table summary="">
<tr>
<td><label for="user" accesskey="u">utilisateur</label></td>
<td>
<select name="user" id="user">
<option>Jean</option>
<option>Paul</option>
<option>Jacques</option>
</select>
</td>
</tr>
<tr>
<td><label for="passwd" accesskey="p">mot de passe</label></td>
<td><input type="password" id="passwd" passwd=""></input></td>
</tr>
</table>
<p><label accesskey="s">Sauver le nom d'utilisateur et le mot de passe
dans un cookie?</label><input type="checkbox" name="save"
value="oui"></input>
</p>
<p><label for="comments" accesskey="c">Commentaires?</label><textarea
name="comments" id="comments" rows="8" cols="50"></textarea> </p>
 2. La balise <button>
a. Fonction
• Cet élément permet d'insérer un bouton dans
un formulaire.
• Cela est également possible avec la balise
<input> , mais <button> permet un plus large
choix d'options.
• Il est malheureusement moins bien accepté
par les "vieux" navigateurs.
 b. Attributs
Attribut Effet Valeur(s)
Une chaîne de
name Le nom du bouton.
caractères.
Une chaîne de
value Valeur envoyée au serveur.
caractères.
 submit
(valeur par défaut)
type Type de bouton.  button
 reset

Désactive l'élément, qui apparaît dès lors

disabled Un booléen.
en grisé.

tabindex
Fixe la position de l'élément dans l'ordre Valeur numérique
séquentiel des tabulations. entière
Définit un raccourci clavier. La
accesske
y combinaison "ALT + touche" a le même effet Touche du clavier
que l'activation du champ.
Un script à exécuter quand le curseur est
onfocus, Une chaîne de
positionné sur le champ (onfocus), ou bien
onblur caractères.
qu'il le quitte (onblur).
 c. Exemple
<button name="soumet" value="modifier">Modifier l'information</button>
<button name="continue" value="continuer">Continuer
l'application</button>
<button><img src="checkmark.gif" alt="✔"></img>Sauvegarder</button>
<button type="reset"><img src="x.gif" alt="✘"></img>Remettre à
zéro</button>
<button type="button" id="toggler" onclick="toggle()">Cacher les
attributs<em>non stricts</em>.</button>