Le
conteneur <FORM> </FORM> sert à intégrer un
formulaire: Il contiendra toutes les balises du formulaire ainsi que le
texte qui les accompagne et tous les éléments de mise en
page. On peut donc retrouver dans ce conteneur, tous les éléments
HTML à l'exception d'un autre conteneur <FORM> </FORM>.
En revanche, un même document HTML peut contenir plusieurs formulaires
successifs.
1) L'attribut
ACTION: (obligatoire pour envoyer
les données saisies dans le formulaire sur le serveur)
Il précise
l'URL du programme de traitement. Deux formes sont possibles:
a) Une URL du
type HTTP: Pointant sur un script spécialisé
situé sur un serveur externe (généralement le
même que celui qui héberge la page contenant le formulaire).
Ce script est généralement situé dans un répertoire
particulier.
Rq:
Cela pose des problèmes dans le domaine de la
sécurisation.
b) Une URL du
type MAILTO: Envoyant les éléments
saisis par l'utilisateur sous forme de courrier éléctronique
(en vue d'un traitement différé).
EX:
ACTION="mailto:mon.nom@monserveur.fr"
Rq:
Si
on ne veut pas envoyer les données vers le serveur on peut ignorer
cet attribut. C'est le cas, par exemple, quand on utilise des formulaires
en vue d'intégrer du Javascript.
2) L'attribut
METHOD:
Il indique
sous quelle forme vont être codées les informations envoyées
pour traitement.Deux valeurs sont admises:
a) Valeur POST:
Envoyant
les couples NOM/VALEUR sur l'entrée standart du système
serveur. Seule valeur admise quand l'attribut ACTION comporte le mot
clé MAILTO.
b) Valeur GET:
Les couples NOM/VALEUR sont envoyés accolés
à l'URL qui figure à la suite de l'attribut ACTION.
Rq:
Cette méthode présente un inconvénient car la
longueur totale du message ainsi constitué ne peut dépasser,
en général, 256 caractères.
3) L'attribut
ENCTYPE:
Précise
la méthode MIME de codification qui va être utilisée
pour l'envoi quand METHOd=POST. Voici les valeurs les plus courantes:
a) Valeur APPLICATION/X-WWW-FORM-URLENCODED:
C'est la valeur par défaut.
b) Valeur MULTIPART/FORM-DATA:
Valeur utilisée si des fichiers doivent accompagner
les données envoyées par le formulaire.
c) Valeur TEXT/PLAIN:
Valeur utilisée quand les informations sont
envoyées par courrier éléctronique.
4) L'attribut
ACCEPT-CHARSET:
Indique
la liste des systèmes de codification de caractères utilisés
pour les informations transmises et que le serveur doit être capable
de reconnaître: Suite de mots clés séparés
par des virgules. La valeur par défaut est UNKNOWN (inconnu).
5) L'attribut
ACCEPT:
C'est une
liste de types MIME séparés par des virgules que devra
pouvoir reconnaître le programme de traitement.
A propos des types MIME, cliquez
ici pour en savoir plus !
Le marqueur <INPUT> sert à intégrer
un élément de formulaire simple (zone de saisie, bouton
radio, case à cocher...etc.). Les diffèrentes formes sont
précisées à l'aide de l'attribut TYPE et identifiées
par l'attribut NAME. Certains des attributs du marqueur <INPUT>
n'ont de sens que pour certaines formes.
1) L'attribut
TYPE:
Précise
la forme de l'élément de formulaire que l'on veut intégrer.
a) Valeur TEST:
Crée une boite de saisie d'une seule ligne (champ
simple).
EX:
<INPUT TYPE="TEST" NAME="champ1" VALUE="">
( Voir les attributs
NAME et VALUE )
Résultat
>
Champ simple:
b) Valeur PASSWORD:
Même chose que TEST (champ simple) mais destiné,
en principe, à recevoir un mot de passe: Les caractères
saisis par l'utilisateur sont affichés en astérisques.
EX:
<INPUT TYPE="PASSWORD" NAME="champ2">
Résultat > Champ pour mot de passe:
Rq:
Le mot de passe est envoyé en clair dans le
message final, aucune méthode de cryptologie n'est utilisée.
c) Valeur CHECKBOX:
Crée une case à cocher qui peut prendre
deux valeurs: cochée ou non cochée. Elles sont utilisées
le plus souvent par groupe et ne sont pas exclusives.
Rq:On
peut définir une case cochée par défaut à
l'aide de l'attribut CHECKED. Dans l'exemple ci-dessus, si l'utlisateur
ne décoche pas la case1, la valeur qui lui est associée
sera envoyée au serveur si ce dernier valide le formulaire.
d) Valeur RADIO:
Crée un bouton radio. Les boutons radio d'un
même groupe (valeur pour NAME identique) sont mutuellement exclusifs.
Rq:
On peut également désigner un bouton
radio coché par défaut grâce à l'attribut
CHECKED.
e) Valeur SUBMIT:
Crée un bouton de soumission (au sens de requête),
quand l'utilisateur clique sur le bouton, les éléments
recueillis dans le formulaire (tous les éléments du
formulaire) sont expédiés à l'URL indiquée
dans <FORM ACTION="URL">. On peut écrire ce
que l'on veut sur ce bouton au moyen de l'attribut VALUE (voir l'exemple).
Rq:
Il peut y avoir plusieurs boutons de ce type dans un même formulaire.
Mais le plus judicieux est de n'en mettre qu'un, situé à
la fin du formulaire.
f) Valeur RESET:
Crée un bouton de remise à l'état
initial du formulaire. Les valeurs qui s'affichent dans les champs
du formulaire redeviennent alors celles spécifiées par
l'attribut VALUE. Aucune transmission n'a lieu. De même que
pour le bouton SUBMIT, on peut écrire ce que l'on souhaite
sur le bouton au moyen de l'attribut VALUE.
g) Valeur IMAGE: Crée
un bouton de type SUBMIT illustré au moyen d'une image dont
l'URL est spécifiée au moyen de l'attribut SRC.
EX:
<INPUT TYPE="IMAGE" SRC="../../images/atome3.gif"
NAME="monimage" WIDTH="17" HEIGHT="17"
ALT="Cliquez sur cette image pour Valider" ALIGN="middle">
Résultat > Bouton image (submit):
Rq1:
Comme
pour une image on peut spécifier les attributs suivants: BORDER=0,
WIDTH="", HEIGHT="", ALT="", ALIGN=""
Rq2:
Les
coordonnées du point de l'image sur lesquelles l'utilisateur
a cliqué sont transmises sous forme "nom.x" et "nom.y"
(nom étant la valeur donnée à l'attribut NAME).
D'après notre exemple on aurait:
monimage.x=40
monimage.y=24 Rq3:
Cette remarque est valable également pour le bouton de type
SUBMIT(vu précédemment), on peut remplacer ces boutons
par un simple lien textuel grâce à un script en language
Javascript (Cliquez ici pour voir l'exemple).
h) Valeur BUTTON: Crée
un bouton auquel n'est affecté aucune action de type général,
c'est à dire qu'il ne peut pas valider un formulaire. on lui
associe une action spécifique au moyen d'une condition (Evènement
Javascript).
EX:
<INPUT TYPE="BUTTON" NAME="button"
VALUE="Lire le message" onclick="alert('Voici le
message')">
Résultat > Bouton normal:
i) Valeur HIDDEN:
Crée un élément non affiché par le navigateur,
ce qui n'empêche pas son nom et sa valeur (NAME/VALUE) d'être
envoyé au serveur quand l'utilisateur clique sur le bouton
SUBMIT.
j) Valeur FILE:
Crée une boîte de saisie flanquée
à sa droite d'un bouton marqué "Naviguer",
"Parcourir" ou Browse" selon le navigateur et sa nationalité.
En cliquant sur ce bouton, l'utilisateur fait afficher une boîte
de séléction permettant de sélectionner un fichier
à envoyer. Il peut aussi saisir lui-même le chemin d'accès
et le nom du fichier dans la boîte de saisie.
EX:
<INPUT TYPE="FILE" NAME="joindrefichier">
Résultat > Bouton pour séléctionner
le fichier à envoyé:
!
Rq: Pour que l'envoi du fichier se fasse correctement,
l'attribut ENCTYPE du conteneur <FORM> doit avoir pour
valeur " MULTIPART/FORM-DATA ".
2) L'attribut
NAME:
C'est grâce
à lui qu'un élément peut recevoir un nom: Il permet
d'identifier les valeurs reçues parmis les informations envoyées
au serveur. Il permet également d'identifier les éléments
d'un formulaire. Un formulaire peut également recevoir un nom,
par exemple; <FORM NAME="formulaire1"...etc> et ainsi
être identifié. Dans le cas de boutons radio appartenant
à un même groupe (mutuellement exclusifs), NAME doit avoir
la même valeur (comme nous l'avons vu précédemment).
Bien qu'au niveau de la syntaxe la présence de cet attribut ne
soit pas exigée, il faut rappeler qu'il n'y a pas d'autre moyen
d'identifier les valeurs que recevra le serveur (couples NOM/VALEUR
c'est à dire valeur de NAME/valeur de VALUE).
3) L'attribut
VALUE:
Il définit
la valeur initiale (par défaut) du contrôle. Sa présence
n'est pas indispensable, sauf pour les contrôles de type RADIO.
EX:
un champ simple où l'utilisateur dispose d'une ligne de saisie.
Ce champ peut être initialement vide ou comporter déjà
une chaîne de caractères: Avec <INPUT TYPE="TEST"
NAME="champsimple" VALUE="Votre nom ici !">
on obtient à l'affichage le champ suivant:
Rq:
L'utilisateur peut saisir ce qu'il souhaite dans ce champ (Attention
à la largeur du champ, voir l'attribut SIZE),
quand il aura cliqué sur le bouton SUBMIT, l'information (ce
qu'il aura saisi) sera envoyé conjointement avec le nom du champ.
Si il n'avait rien saisi dans ce champ, ce qui était inscrit
par défaut ("Votre nom ici !") serait envoyé
au serveur.
4) L'attribut
CHECKED:
Il permet
de définir la position initiale d'un bouton radio ou d'une case
à cocher. L'utilisateur peut modifier cet état comme pour
l'attribut VALUE sinon c'est la valeur par défaut qui sera envoyée.
5) L'attribut
DISABLED:
Permet
de désactiver un élément (affichage en grisé).
Le seul moyen de réactiver un contrôle (élément)
ainsi marqué est l'utilisation d'un script. Lorsque l'utilisateur
passe d'un champ à l'autre au moyen de la touche <TAB>,
les contrôles ainsi marqués sont sautés. Si on clique
sur le bouton SUBMIT, la valeur d'un champ marqué DISABLED ne
sera pas envoyé. Cet attribut est admis pour les éléments
suivants: BUTTON, INPUT, LABEL, OBJECT, OPTION, SELECT et TEXTAREA.
6) L'attribut
READONLY:
C'est une
variante de l'attribut HIDDEN: L'élément ainsi marqué
est affiché normalement, mais il est impossible à l'utilisateur
de la modifier. Il joue donc le même rôle que DISABLED mais
n'est pas affiché en grisé. Il est admis pour INPUT, TEXT,
PASSWORD et TEXTAREA. Le seul moyen de réactiver un élément
ainsi marqué en l'emploi d'un script.
7) L'attribut
SIZE:
Il définit
la largeur initiale de l'élément. Il est exprimé
en pixels, sauf pour les boîtes de saisie de type TEXT ou PASSWORD
où il représente le nombre de caractères pouvant
être tapés par l'utilisateur et qui restent visibles.
Rq:
Attention,
l'utilisateur peut taper beaucoup plus de caractères que spécifié
dans l'attribut SIZE, mais le nombre de caractères visibles dans
le champ, du fait de sa largeur, correspond à ce chiffre.
8) L'attribut
MAXLENGTH:
Utilisé
conjointement à TEXT et PASSWORD pour préciser le nombre
de caractères qui seront pris en compte parmis ceux saisis par
l'utilisateur.
Rq:
Dans
ce cas, l'utilisateur ne peut pas taper plus de 15 caractères.
9) L'attribut
ACCESSKEY:
10) L'attribut
TABINDEX:
11) L'attribut
ACCEPT:
Permet
de recevoir une liste des seuls types MIME acceptés par le serveur
afin de permettre au navigateur de refuser les fichiers non conformes.
Eventuellement indiqué dans un élément INPUT de
type FILE. Chaque élément de la liste doit être
séparé du suivant par une virgule.
12) Les attributs
SRC, ALT,
USEMAP et ALIGN:
Utilisés
uniquement pour les éléments INPUT de type IMAGE (vus
précédemment).
13) Les attributs
de gestion d'évènements:
Voici la
liste des évènements acceptés par le marqueur INPUT:
onsubmit, onreset, onclick, ondoubleclick, onmousedown; onmouseup, onmouseover,
onmouseout, onkeypress, onkeydown, onkeyup. Grâce à eux,
un formulaire peut passer le contrôle à un script (Javascript
par exemple).
Le conteneur
<select> propose une liste d'option (prédéfinis par
le marqueur OPTION), parmis lesquelles l'utilisateur doit choisir. La
sélection peut être unique ou multiple et on peut spécifier
des choix par défaut. L'élément se présente
à l'affichage sous forme d'un menu déroulant appelé
également menu popup.
1) L'attribut
NAME: (Obligatoire)
Il permet
de nommer l'élément SELECT.
2) L'attribut
SIZE:
Il définit
le nombre de choix proposés qui seront affichés dans la
boîte de la liste déroulante.
C'est un
attribut booléen (ne reçoit aucune valeur). Il permet
à l'utilisateur de sélectionner plusieurs valeurs proposées.
Sous windows, pour choisir:
- Des valeurs consécutives, après avoir appuyé
sur la touche <Maj>, on clique sur la première puis sur
la dernière valeur du groupe élu.
- Des valeurs disparates, on clique sur chacunes d'elles en appuyant
sur la touche <Ctrl>.
4) Les attributs
TABINDEX et DISABLED:
Même
rôle qu'avec le marqueur INPUT.
5) L'attribut
STYLE:
Cet attribut
fonctionne suivant le principe des feuilles de styles, il permet notament
de donner une couleur de fond particulière à la liste
déroulante ainsi qu'une autre aux caractères qui s'y trouvent.
C'est un
complément indispensable de l'élément SELECT,
c'est lui qui permet de définir la suite de valeurs qui figurent
dans la liste déroulante. Le conteneur <OPTION> se place
donc dans le conteneur <SELECT></SELECT> qui doit contenir
au moins deux éléments OPTION.
Rq1:
Le texte placé dans le conteneur OPTION est affiché
dans la liste déroulante, si il n'y a pas d'attribut VALUE, c'est
lui qui sera envoyé au serveur quand l'utilisateur cliquera sur
le bouton SUBMIT.
Rq2: Contrairement à tous les autres éléments
de formulaire, OPTION n'a pas d'attribut NAME.
1) L'attribut
VALUE:
Sa présence
n'est pas obligatoire. Si il est absent, la valeur qui sera envoyé
au serveur sera le texte placé dans le conteneur.
C'est un
attribut booléen (ne reçoit aucune valeur). Sa présence
signifie un choix par défaut. Il peut y avoir plusieurs choix
par défaut à condition que le conteneur <SELECT>
comporte l'attribut MULTIPLE.
EX1
(un choix sélectioné):
<SELECT NAME="menuderoulant3">
<OPTION> Choix1</OPTION>
<OPTION SELECTED> Choix2</OPTION>
<OPTION> Choix3</OPTION>
<OPTION> Choix4</OPTION>
</SELECT>
Résultat > Menu déroulant:
Rq:
C'est
le choix sélectionné (dans notre exemple ci-dessus, il
s'agit du choix2) qui est ainsi visible au premier abord.
Rq:
Si SIZE n'était pas spécifié (dans
le conteneur SELECT), La boîte de la liste déroulante s'aggrandirait
de telle façon qu'on verrait tous les choix (Suivant notre exemple
ci-dessus, les 4 lignes seraient visibles). En spécifiant SIZE="3",
on limite la hauteur de la boîte au 3 premières lignes,
on ne voit pas le choix 4 qui est pourtant sélectioné.
3) Les autres
attributs:
L'élément
OPTION accepte les attributs ID, CLASS, LANG, DIR, TITLE, STYLE, DISABLED
et TABINDEX ainsi que les mêmes attributs de gestion d'évènements
intrinsèques que l'élément INPUT, décrits
précédemment.
4) Les autres
attributs:
L'élément
TEXTAREA accepte les attributs ID, CLASS, LANG, DIR, TITLE, STYLE, DISABLED,
TABINDEX et READONLY ainsi que les attributs de gestion d'évènements
intrinsèques décrits précédemment.
Rq1:
Si
on veut afficher un texte trop long pour tenir en entier dans la page
on peut utiliser un élément TEXTAREA accompagné
de l'attribut READONLY (il faut également un conteneur FORM qui
n'envoie pas les données au serveur). L'utilisateur peut donc
lire ce texte en le faisant défiler dans le champ sans qu'il
puisse le modifier (voir exemple ci-dessous).
Le conteneur
<BUTTON> </BUTTON> est un élément purement décoratif
et peut contenir du texte, des images ou des objets multimédia.
Actuellement, il ne marche que sous Explorer, son utilisation est donc
à déconseiller. Il en existe trois type, suivant la valeur
donnée à l'attribut TYPE (Voir plus bas):
- Bouton ordinaire
- Bouton SUBMIT
- Bouton RESET
1) L'attribut
NAME:
Il permet
de donner un nom à l'élément TEXTAREA ainsi créé
(obligatoire dans ce cas).
EX:
<BUTTON TYPE="BUTTON" NAME="texte_bouton" VALUE="texte1">
Voici mon texte.<br>
Il se trouve affiché dans l' élément BUTTON.<br>
Ce texte peut être enrichi<br>
par des éléments HTML<br>
(exemple une image) <IMG SRC="../../images/atome1.gif"><br>
et des rêgles de style (Voir l'attribut STYLE traité
plus loin).</BUTTON>
Résultat
>
Zone de texte:
2) L'attribut
TYPE:
Permet
de définir la forme que va prendre l'élément BUTTON.
Trois valeurs possibles:
a) Valeur BUTTON:
Pour un bouton ordinaire. Son rôle principal est de lancer un
script, généralement au moyen d'une condition onClick().
Il peut éventuellement remplacer une case à cocher.
b) Valeur SUBMIT:
Pour un bouton valider. C'est la valeur par défaut.
c) Valeur RESET:
Pour un bouton effacer.
3) L'attribut
STYLE:
Cet attribut
va permettre d'enrichir le texte situé dans l'élément
BUTTON.
EX1:
<BUTTON TYPE="BUTTON" NAME="texte_bouton2"
VALUE="texte2" STYLE="FONT-FAMILY: Verdana, Arial,
Helvetica, sans-serif; FONT-SIZE: 10pt; WIDTH: 450; color: #ffffff;
background-color: #98a300 ">
Voici un autre texte dans un élément BUTTON<br>
enrichi cette fois grâce à des rêgles de style.<br>
</BUTTON>
Résultat > Zone de texte:
Rq:
Dans l'exemple ci-dessus, les rêgles de style affectent
tout le texte inclus dans l'élément BUTTON. Grâce
à l'élément SPAN accompagné de l'attribut
STYLE on peut affecter des rêgles de style qu'à certaines
portions du texte situé dans l'élément BUTTON (Voir
exemple ci-dessous).
EX2:
<BUTTON TYPE="BUTTON" NAME="texte_bouton3"
VALUE="texte3">
<SPAN STYLE="COLOR: red; FONT-FAMILY: courier new"; font-weight:
bold>Voici un troisième texte situé dans un élément
BUTTON<br></SPAN> <SPAN
STYLE="COLOR: blue; FONT-FAMILY: Verdana,
Arial, Helvetica, sans-serif">avec
des rêgles de style diffèrentes<br></SPAN> <SPAN
STYLE="COLOR: green; FONT-FAMILY: Comic Sans MS">suivant
les portions de texte.</SPAN>
</BUTTON>
Résultat > Zone de texte:
4) Les autres
attributs:
- DISABLED
et ACCESSKEY
- USEMAP pour jouer le rôle d'une image réactive.
- ONBLUR, ONCLICK, ONDBCLICK, ONFOCUS, ONMOUSEDOWN, ONMOUSEUP, ONMOUSEOVER,
ONMOUSEMOVE, ONMOUSEOUT, ONKEYPRESS, ONKEYDOWN, ONKEYUP (appels de fonctions
de scripts).
5) L'attribut
VALUE:
N'a d'utilité
réelle que pour les éléments du type BUTTON dans
la mesure où il y en a plusieurs, identifiant le bouton sur lequel
l'utilisateur a cliqué.
Le conteneur
<LABEL> </LABEL> permet d'attacher des informations à
d'autres éléments de formulaire. Lorsqu'il reçoit
le contrôle, il passe le Focus à l'élément
qui lui est associé. L'association se fair au moyen de l'attribut
FOR. Actuellement, cet élément n'est reconnu ni par Explorer
ni par Nestcape.
1) L'attribut
FOR:
C'est lui
qui permet l'association entre le LABEL défini et un autre élément.
L'élément
LABEL accepte les attributs suivants: ID, CLASS, LANG, DIR, TITTLE,
STYLE, DISABLED, TABINDEX, READONLY (décrits précédemment)
ainsi que les mêmes attributs de gestion d'évènements
intrinsèques que l'élément BUTTON.
L' élément
FIELDSET permet de reggrouper visuellement des éléments
de formulaire. Le document de travail W3C précise qu'il permet
d'augmenter l'accessibilité aux documents au moyen de synthétiseurs
de parole. Son rôle est complèté par l'élément
LEGEND qui est à FIELDSET ce que CAPTION est à TABLE c'est
à dire un moyen pour afficher un titre.
EX:
<FIELDSET> <LEGEND>Renseignements</LEGEND>
Nom: <INPUT TYPE="TEXT"
NAME="nom" SIZE="20">
Prénom: <INPUT TYPE="TEXT" NAME="prenom"
SIZE="20"><br>
Date de naissance: <INPUT TYPE="TEXT" NAME="date"
SIZE="10"><br>
Lieu de naissance: <INPUT TYPE="TEXT" NAME="lieu"
SIZE="20">
Code postal: <INPUT TYPE="TEXT" NAME="cp" SIZE="6">
</FIELDSET>
Résultat
>
Reggroupement d'éléments de formulaire:
Rq:
Le conteneur LEGEND peut encadrer également une
image (pratique pour mettre un logo).
1) L'attribut
ALIGN:
Cet attribut
de LEGEND permet d'améliorer la présentation en prenant
les valeurs suivantes:
a) Valeur TOP:
La légende sera située juste au dessus
de l'encadrement. C'est la valeur par défaut pour le sens vertical.
b) Valeur BOTTOM:
La légende sera située juste en dessous
de l'encadrement.
c) Valeur LEFT:
La légende sera située à gauche.
C'est la valeur par défaut pour le sens horizontal.
d) Valeur RIGHT:
La légende sera située à droite.
2) Les autres
attributs:
Ces 2 éléments
acceptent les attributs suivants: ID, CLASS, LANG, DIR, TITTLE, STYLE
et ACCESSKEY ainsi que les mêmes attributs de gestion d'évènements
intrinsèques que l'élément BUTTON.