Les formulaires


Insertion de formulaires selon HTML 3.2
FORM -- %body.content - (FORM)
action %URL #IMPLIED
method (%HTTP-Method) GET
enctype %Content-Type; "application/x-www-form-urlencoded"
INPUT -O EMPTY
type %InputType TEXT
name CDATA #IMPLIED
value CDATA #IMPLIED
checked (checked) #IMPLIED
size CDATA #IMPLIED
maxlength NUMBER #IMPLIED
src %URL #IMPLIED
align (top | middle | bottom | left | right) top
%InputType "(TEXT | PASSWORD | CHECKBOX | RADIO | SUBMIT | RESET | FILE | HIDDEN | IMAGE)"
SELECT -- (OPTION+)
name CDATA #REQUIRED
size NUMBER #IMPLIED
multiple (multiple) #IMPLIED
OPTION -O (#PCDATA)*
selected (selected) #IMPLIED
value CDATA #IMPLIED
TEXTAREA -- (#PCDATA)*
names CDATA #REQUIRED
rows NUMBER #REQUIRED
cols NUMBER #REQUIRED

<FORM ACTION="url" METHOD=post|get [ENCTYPE=encrypt] [SCRIPT="url"] [TARGET="cible"] [NAME="ident"]> HTML 2.0
'Formular'. Insère un formulaire de saisie. FORM sert de container aux champs de saisie des données introduits par les balises INPUT, OPTION ou TEXTAREA. Il est possible d'insérer plusieurs formulaires dans un document HTML. Texte, images, tableaux et liens peuvent figurer à l'intérieur d'un container FORM. Doit finir avec </FORM>.

ACTION="url" HTML 2.0
URL d'un script CGI, d'une adresse e-mail, ou d'une page à laquelle les données doivent être envoyées. URL du document courant par défaut.
METHOD=post|get HTML 2.0
Méthode d'accés HTTP pour l'acheminement des données vers le serveur désigné par l'attribut 'ACTION'. Vous avez le choix entre 'GET' ou 'POST'.
Avec la méthode GET, le formulaire retourné sera traité dans une variable QUERY_STRING, le programme CGI effectuant les évaluations.
La méthode POST interprète le formulaire comme une suite de commandes correspondant aux saisies ou choix de l'utilisateur. Il n'existe à ce propos pas de EndOfFile (EOF), mais le programme CGI utilise une variable d'environnement (CONTENT_LENGTH).
La méthode GET s'est imposée comme système de lien, mais ne permet de transférer qu'une assez faible quantité de données. Dans le cas d'un retour e-mail, c'est plutôt la méthode POST qui est privilégiée.
[ENCTYPE=encrypt] HTML 2.0, /IE 3.0
Méthode d'encription. cet attribut est peu utilisé. Par défaut "application/x-www-form-urlencoded".
[TARGET=cible] NS 3.0, IE 3.0
Affiche le document renvoyé par le serveur en réponse à la saisie dans une frame ou fenêtre nommé 'cible'. Voir le chapitre "frames" pour plus de détails.
[NAME="ident"] NS 3.0, IE 3.0
Identificateur du formulaire utilisé par des languages externes comme JavaScript.
[SCRIPT="url"]
URL d'un script coté client.
[ONRESET=Event-Handler]
Evénement JavaScript appelé dés que l'utilisateur active le bouton RESET du formulaire.
[ONSUBMIT=Event-Handler]
Evénement JavaScript appelé dés que l'utilisateur active le bouton SUBMIT du formulaire.
Note:Si ACTION n'est pas définit, Netscape ouvrira une fenêtre d'e-mail avec son sujet.

<INPUT [...]> HTML 2.0
Insère un objet de formulaire comme un champ de saisie, une case à cocher, un bouton radio... La valeur de l'attribut TYPE déterminent les paramètres pouvant être utilisés.

TYPE=champ HTML 2.0
Définit le type de champ de saisie souhaité. 'champ' peut prendre une des constantes prédéfinies suivantes.
'TEXT'. Champ de texte d'une ligne dont la largeur est déterminé par l'attribut SIZE et la capacité d'admission par MAXLENGTH. Valeur par défaut.
'PASSWORD'. Champ de mot de passe. Se présentes comme 'TEXT à la différence que les caractères saisies sont masquées par des puces. Attention: la saisie dans ce champ est transmise en clair au serveur sauf si la liaison est sécurisé (protocole HTTPS). La raison de ce champ est d'empécher votre voisin de voir par dessus votre épaule ce que vous avez saisie.
'CHECKBOX'. Case à cocher à 2 états. La valeur renvoyé est le texte de l'attribut VALUE.
'RADIO'. Bouton d'option à 2 états appelé bouton radio. Ils permettent de faire une sélection parmi plusieurs champs, dont chacun est représenté par un texte, une valeur propre et un bouton d'option. Seul l'un de ces boutons peut être selectionné en même temps, de sorte que le navigateur doit désélectionner le bouton précédent lors de la sélection d'un nouveau bouton. Pour cela, le programme doit pouvoir identifier les différents champs RADIO d'un groupe, ce qui s'effectue par l'indication d'un nom identique dans l'attribut NAME. Plusieurs groupes peuvent être défini dans chaque formulaire. Une fois la saisie terminée, la sélection est transmise au serveur par le biais d'une paire de clés associant le nom du champ à la valeur de l'attribut VALUE du champ RADIO sélectionné.
'SUBMIT'. Bouton pour envoyer le formulaire. Il est indispensable pour valider la saisie et la transmettre au serveur. Sans ce bouton, un formulaire n'a pas de sens. On peut définir une inscription différente de SUBMIT en saisissant le texte souhaité dans l'attribut VALUE.
'RESET'. Bouton pour initialiser tous les champs de saisie à leur valeur par défaut. On peut définir une inscription différente de RESET en saisissant le texte souhaité dans l'attribut VALUE.
'FILE'. Un bouton pour télécharger un fichier. Nécessite un script CGI sur le serveur. Voir RFC1867 pour plus d'informations.
'HIDDEN'. Champ de saisie caché dont la valeur est toutefois transmise au serveur. Donne la possibilité de transmettre au serveur des informations d'états cachées.
'IMAGE'. Affiche l'image désigné par l'attribut SRC. Lorsque l'utilisateur clique sur un point de l'image, cela équivaut à la conclusion de la saisie du formulaire par SUBMIT. Les coordonnées du point cliqué sont transmises au serveur en compagnies des contenues des autres champs. La coordonnée X est transmise en tant que valeur d'un champ dont le nom est formé par le navigateur à partir du nom du champ graphique (attribut NAME) et du suffixe ".X". Par exemple : 3IMGChamp.X=32". La coordonnée Y est communiquée selon le même schéma par ajout de la syllabe ".Y" au nom du champ.
'INT'. Champ numérique.
'BUTTON'. Seulement sous Netscape : bouton comprtant une inscription définie par l'attribut VALUE, dont l'activation déclenche le code JavaScript de l'attribut ONCLICK.
Un formulaire doit avoir au moins un bouton SUBMIT ou une IMAGE
NAME=ident HTML 2.0
Identificateur du champ de saisie. Le résultat sera envoyé au serveur de la manière 'ident=value'.
VALUE=texte HTML 2.0
'texte' spécifie le valeur par défaut du champ de saisie. Si TYPE est RADIO ou CHECK, VALUE est retourné seulement si le bouton radio ou la case à cocher est activé. Peut être utilisé avec tous les objets. L'information apporté par VALUE est utilisé lorsque que l'on clique sur le bouton RESET.
[CHECKED] HTML 2.0
Utilisé avec 'CHECKBOX' ou 'RADIO', il permet d'activer un bouton radio ou une case à cocher par défaut. N'est pas utilisé par les autres objets.
[SIZE=n] HTML 2.0
Définit la largeur d'un champ de texte en pixels. Lorsque que la saisie est plus grande que la largeur du champ, le texte défile automatiquement. Certains objets n'ont pas besoin de cet attribut. C'est le cas des cases à cocher ou des boutons radio.
[MAXLENGTH=n] HTML 2.0
Définit la longueur maximum de la valeur pouvant être saisie, par exemple 3 (caractères). Nécessaire aux mêmes objets qui utilise SIZE.
[SRC="url"] HTML 2.0
URL d'une image nécessaire au champ TYPE=IMAGE seulement. Fonctionne comme la balise IMG.
[ALIGN=top|middle|bottom|right|center|left] HTML 2.0
Paramètre optionnel utilisé avec TYPE=IMAGE. Fonctionne comme dans la balise IMG.
[ONCLICK=Event-Handler] NS 3.0
Evénement JavaScript exécuté lors de la sélection des champs de saisie suivants : 'BUTTON', 'RADIO', 'CHECKBOX' et 'RESET'.
[ONBLUR=Event-Handler] NS 3.0
Evénement JavaScript exécuté dés qu'un champ 'TEXT' perd le focus. Cet événement n'est pas déclenché dans le cadre d'autres champs de saisie.
[ONCHANGE=Event-Handler] NS 3.0
Evénement JavaScript exécuté uniquement dans le cadre de champs de saisie 'TEXT' dés lors que ces derniers perdent le focus, et que le contenu du champ a été modifié par la saisie de l'utilisateur.
[ONFOCUS=Event-Handler] NS 3.0
Evénement JavaScript exécuté uniquement dans le cadre de champs de saisie 'TEXT' dés lors que ces derniers reçoivent le focus.
[ONSELECT=Event-Handler] NS 3.0
Evénement JavaScript exécuté lorsque l'utilisateur sélectionne le texte d'un champ de saisie 'TEXT' ou 'PASSWORD'.

<SELECT NAME="ident" [SIZE=n] [MULTIPLE] [...]> HTML 2.0
Insère une liste ou un menu déroulant pouvant offrir un choix multiple à l'utilisateur. SELECT sert de container aux entrée de la liste qui doivent être définies avec la balise OPTION. Doit finir avec </SELECT>.

NAME=ident HTML 2;0
Identificateur du champ renvoyé au serveur avec la sélection de l'utilisateur aprés confirmation de la saisie du formulaire.
[SIZE=n] HTML 2;0
Taille de la liste en nombre de ligne visible. Lorsque cet attribut n'est pas specifié ou que sa valeur est 1, une liste déroulante est générée à la place d'une zone de liste. Par ailleurs, lorsqu'il y a plus d'éléments que de ligne visible, le navigateur insére un ascenseur afin de pouvoir tout visualiser.
[MULTIPLE] HTML 2;0
Indique que l'utilisateur peut sélectionner plusieurs entrées à la fois. Dans ce cas une zone de liste déroulante est crée même si SIZE=1. Si cet attribut n'est pas spécifié, on ne peut sélectionné qu'un élément à la fois.
[ONBLUR=Event-Handler] NS 3.0
Evénement JavaScript exécuté dés que le champ perd le focus.
[ONCHANGE=Event-Handler] NS 3.0
Evénement JavaScript exécuté dés que le champ perd le focus et que la sélection courante a été modifié par la saisie de l'utilisateur.
[ONFOCUS=Event-Handler] NS 3.0
Evénement JavaScript exécuté dés que le champ reçoit le focus.

<OPTION [VALUE=valeur] [SELECTED]>texte HTML 2.0
Insére un élément à l'intérieur d'un container SELECT. 'texte' suit le tag OPTION et est affiché par le navigateur. Toutes les balises de formatage sont interprétées. La balise OPTION n'a pas besoin d'être refermé car elle l'est autmatiquement par l'entrée de liste suivante ou par /SELECT.

[VALUE=valeur] HTML 2.0
Valeur de l'élément devant être transmise au serveur avec le nom de la zone de liste définit par l'attribut 'NAME' de la balise SELECT.
[SELECTED] HTML 2.0
Définit l'élément sélectionné par défaut dans la liste. Lorsque qu'il n'est pas indiqué, c'est généralement le premier élément de la liste qui est sélectionné par défaut.

<TEXTAREA NAME=ident [ROWS=n] [COLS=n] [WRAP=virtual|physical|off|soft|hard] [...]>[...texte...]</TEXTAREA> HTML 2.0
Insère un champ de saisie de texte composé de plusieurs lignes à l'intérieur d'un container FORM. Doit finir avec </TEXTAREA> même si vous ne souhaité pas de texte par défaut.

NAME=ident HTML 2.0
Identificateur du champ retourné au serveur avec la saisie de l'utilisateur aprés confirmation du formulaire.
[ROWS=n] HTML 2.0
Indique le nombre de ligne de texte que doit afficher la zone de texte.
[COLS=n] HTML 2.0
Indique le nombre de caractères que doit affiché la zone de texte sur une ligne.
[WRAP=virtual|physical|off|soft|hard] NS 2.0
Définit la césure du texte.
'OFF'. Pas de césure automatique. Le navigateur insére un ascenseur horizontal dans le champ. Valeur par défaut.
'PHYSICAL' ou 'HARD'. Insèrera automatiquement un retour à la ligne lorsque le texte atteindra l'extrémité droite de la zone de texte et enverra au serveur le texte saisi + les retours à la ligne ainsi générés lors de la confirmation du formulaire.
'VIRTUAL' ou 'SOFT'. Insèrera automatiquement un retour à la ligne lorsque le texte atteindra l'extrémité droite de la zone de texte mais n'enverra au serveur que le texte saisi sans les retours à la ligne ainsi générés.
[ONFOCUS=Event-Handler] NS 3.0
Evénement JavaScript exécuté dés que le champ reçoit le focus.
[ONSELECT=Event-Handler] NS 3.0
Evénement JavaScript exécuté dés que l'utilisateur sélectionne du texte à l'intérieur du champ.
[ONCHANGE=Event-Handler] NS 3.0
Evénement JavaScript exécuté dés que le champ perd le focus et que le contenu a été modifié par la saisie de l'utilisateur.

Exemple

Créons deux formulaires simples qui se contentent d'ouvrir une page web en local et sur Internet.
<FORM method=GET action="../merlet/merlet.html">
<INPUT type=submit value="la vie de TAG dans son jeune &acirc;ge">
</FORM>
<FORM method=GET action="http://www.AmbrosiaSW.com/sharethemac/STN.html">
<INPUT type=submit value="ShareTheMac Station">
</FORM>

Documents de référence


Christophe Merlet
redfox@redfoxcenter.org
©Tous droits réservés
11 août 1997