![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Intérêt d'un formulaire |
Les formulaires interactifs permettent aux auteurs de pages Web de dialoguer avec leurs lecteurs, un peu comme les coupons-réponse que l'on trouve dans les magazines.
Le lecteur saisit des informations en remplissant des champs ou en cliquant sur des boutons, puis appuie sur un bouton de soumission (submit) pour l'envoyer soit à un URL, c'est-à-dire de façon générale à une adresse e-mail ou à un script CGI (Common Gateway Interface, traduisez "Interface de passerelle généralisée") stocké sur un serveur et écrit dans un langage de programmation comme un shell UNIX, PERL, TCL, Applescript, etc.
La balise FORM |
Les formulaires sont délimités par le marqueur <FORM> ... </FORM>, une balise qui permet de regrouper plusieurs éléments de formulaire (boutons,champs de saisie,...) et qui possède les attributs obligatoires suivants:
Voici la syntaxe de la balise FORM:
<FORM METHOD="POST" ou "GET" ACTION="url" ENCTYPE="x-www-form-urlencoded">
...
</FORM>
Voici quelques exemples de balises FORM:
<FORM METHOD=POST ACTION="mailto:webmaster@commentcamarche.net"> <FORM METHOD=GET ACTION="http://www.commentcamarche.net/cgi-bin/script.cgi">
A l'intérieur de la balise FORM... |
La balise FORM constitue en quelque sorte un conteneur permettant de regrouper des éléments qui vont permettre à l'utilisateur de choisir ou de saisir des données, ensemble de données qui seront envoyées à l'URL indiqué dans l'attribut ACTION de la balise FORM par la méthode indiquée par l'attribut METHOD.
Il est possible d'insérer n'importe quel élément HTML de base dans une balise FORM (textes,boutons,tableaux,liens,...) mais il est surtout intéressant d'insérer des éléments interactifs. Ces éléments interactifs sont:
Envoi des données |
Lorsqu'un formulaire est soumis (appui sur le bouton de soumission), les données présentes dans le formulaire sont envoyées au script CGI sous forme de paires nom/valeur, c'est-à-dire un ensemble de données représentées par le nom de l'élément de formulaire, le caractère "=", puis la valeur associée. L'ensemble de ces paires nom/valeur étant séparées entre elles par des esperluettes (caractère &). Les données envoyées ressembleront donc à ceci:
champ1=valeur1&champ2=valeur2&champ3=valeur3
Dans le cas de la méthode GET (envoi des données à travers l'URL),
l'URL ressemblera à une chaîne du genre:
http://www.commentcamarche.net/cgi-bin/script.cgi?champ1=valeur1&champ2=valeur2&champ3=valeur3
La balise INPUT |
La balise INPUT est la balise essentielle des formulaires, car elle permet de créer un bon nombre d'éléments "interactifs". La syntaxe de cette balise est la suivante:
<INPUT type="Nom du champ" value="Valeur par défaut" name="Nom de l'élément">
L'attribut name est essentiel car il permettra au script CGI de connaître le
champ associé à la paire nom/valeur, c'est-à-dire que le nom du champ
sera suivi du caractère "=" puis de la valeur entrée par l'utilisateur,
ou dans le cas contraire de la valeur par défaut repéré par l'attribut value.
L'attribut type permet de préciser le type d'élément que
représente la balise INPUT, voici les valeurs que ce champ peut prendre:
La balise TEXTAREA |
La balise TEXTAREA permet de définir une zone de saisie plus vaste par rapport à la simple ligne de saisie que propose la balise INPUT. Cette balise possède les attributs suivants:
La balise SELECT |
La balise SELECT permet de créer une liste déroulante d'éléments (précisés par des balises OPTION à l'intérieur de celle-ci). Les attributs de cette balise sont:
Un exemple de formulaire |
Les formulaires peuvent être mis en page à l'aide de tableaux (cela est même conseillé pour avoir une mise en page soignée). Voici un exemple récapitulant les points ci-dessus et montrant comment mettre en page un formulaire à l'aide d'un tableau:
<FORM method=post action="cgi-bin/script.pl">
Enregistrement d'un utilisateur
<TABLE BORDER=0>
<TR>
<TD>Nom</TD>
<TD>
<INPUT type=text name="nom">
</TD>
</TR>
<TR>
<TD>Prénom</TD>
<TD>
<INPUT type=text name="prenom">
</TD>
</TR>
<TR>
<TD>Sexe</TD>
<TD>
Homme : <INPUT type=radio name="sexe" value="M">
<br>Femme : <INPUT type=radio name="sexe" value="F">
</TD>
</TR>
<TR>
<TD>Fonction</TD>
<TD>
<SELECT name="fonction">
<OPTION NAME="enseignant">Enseignant</OPTION>
<OPTION NAME="etudiant">Etudiant</OPTION>
<OPTION NAME="ingenieur">Ingénieur</OPTION>
<OPTION NAME="retraite">Retraité</OPTION>
<OPTION NAME="autre">Autre</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD>Commentaires</TD>
<TD>
<TEXTAREA rows="3" name="commentaires">Tapez ici vos commentaires</TEXTAREA>
</TD>
</TR>
<TR>
<TD COLSPAN=2>
<INPUT type="submit" value="Envoyer">
</TD>
</TR>
</TABLE>
</FORM>
Voici le résultat de ce code HTML
Attributs de la balise FORM et types d'entrées |
Balise | Attribut | Valeur | Résultat | Effet Visuel |
---|---|---|---|---|
<FORM> ... </FORM> | METHOD | POST GET |
||
ACTION | envoie à l'adresse indiquée | |||
ENCTYPE | spécifie le type de codage utilisé | |||
<INPUT> | TYPE | submit | effectue l'ACTION dans le marqueur <FORM> | |
text | simple ligne de texte dont la longueur est donnée par l'attribut size |
|||
reset | efface le contenu du formulaire | |||
radio | bouton radio | |||
checkbox | case à cocher | |||
NAME | Nom | |||
SIZE | Taille du texte | |||
<TEXTAREA> ... </TEXTAREA> | NAME | Zone de texte | ||
ROWS | ||||
COLS | ||||
<SELECT>
</SELECT> |
NAME | |||
MULTIPLE | Plusieurs choix possibles | |||
<OPTION> ... </OPTION> | SELECTED | Option par défaut | ||
VALUE | Valeur forcée |