|
 |
|
 |
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.
Les formulaires sont délimités par la balise <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">
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:
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=valeur3Dans 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=val1&champ2=val2
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 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 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:
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 VALUE="enseignant">Enseignant</OPTION>
<OPTION VALUE="etudiant">Etudiant</OPTION>
<OPTION VALUE="ingenieur">Ingénieur</OPTION>
<OPTION VALUE="retraite">Retraité</OPTION>
<OPTION VALUE="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
|
