les formulaires

Publié le 22 juin 2010 par e-commerce

L'inclusion de formulaires dans les documents HTML permettant aux utilisateurs de rentrer des informations dans les documents est la grande différence entre la deuxiéme spécification du HTML et les précédentes. Il s'agit de champs d'entrée placés dans des paragraphes, dans du texte et même des listes. Cela confére aux documents une grande flexibilité. Voici les différents types :

<FORM> ... </FORM> : Un formulaire dans un document.
<INPUT ...> ... </INPUT> : Un champ d'entrée simple.
<OPTION> : Une option dans un formulaire.
<SELECT> ... <SELECT> : Une option par défaut dans un ensemble d'options.
<TEXTAREA ...> ... </TEXTAREA> : Un champ d'entrée sur plusieurs lignes.

Chaque variable de champ est définie par une entrée( Input ), une zone de texte ( Textarea ), ou une option ( Option ) et doit avoir un nom pour être identifié dans les données transmises à l'application serveur. Voyons un exemple :

<H1>Demande de documentation<HR></H1>
<BR><BR>
<FORM METHOD=POST action="inscr.cgi">
<TABLE border=0 cellpadding=5 cellspacing=3 border=1 COLSPEC="L20 L20" >
<tr><td>Nom:</td>
<td><INPUT NAME="Nom" TYPE="TEXT" ROWS=1 COLS=1 SIZE="40"></td></tr>
<tr><td>Prénom:</td>
<td><INPUT NAME="prenom" TYPE="TEXT" ROWS=1 COLS=1 SIZE="40"></td></tr>
<tr><td>Date de naissance(JJ/MM/AA):</td>
<td><INPUT NAME="date" TYPE="TEXT" SIZE="10"></td></tr>
<tr><td>Adresse:</td>
<td><INPUT NAME="adresse1" TYPE="TEXT" ROWS=1 COLS=1 SIZE="60"></td></tr>
<tr><td></td><td><INPUT NAME="adresse2" TYPE="TEXT" ROWS=1 COLS=1 SIZE="60"></td></tr>
<tr><td>Téléphone:</td>
<td><INPUT NAME="tel" TYPE="TEXT" ROWS=1 COLS=1 SIZE="10"></td></tr>
<tr><td> </td><td> </td></tr>
<tr><td>Etudes précédemment faites:</td>
<td><INPUT NAME="etude" TYPE="TEXT" ROWS=1 COLS=1 SIZE="60"></td></tr>
</table>
<BR><HR><BR>
Choix de l'établissement (cocher la case correspondante):<P>
<table border=0 cellpadding=5 cellspacing=3 border=1 COLSPEC="L20 L20">
<tr><td>1er choix:</td></tr>
<tr><td>ESIEA Paris</td><td><INPUT NAME="premier" TYPE="RADIO" VALUE="Paris" ROWS=1 COLS=1 SIZE="40"></td>
<td>ESIEA Laval</td><td><INPUT NAME="premier" TYPE="RADIO" VALUE="Laval" ROWS=1 COLS=1 SIZE="40"></td></tr>
<tr><td>2ème choix:</td></tr>
<tr><td>ESIEA Paris</td><td><INPUT NAME="deuxieme" TYPE="RADIO" VALUE="Paris" ROWS=1 COLS=1 SIZE="40"></td>
<td>ESIEA Laval</td><td><INPUT NAME="deuxieme" TYPE="RADIO"
VALUE="Laval" ROWS=1 COLS=1 SIZE="40"></td></tr>
</table>
Que désirez vous?<P>
<table>
<tr><td align=right><INPUT NAME="brochure" TYPE="CHECKBOX" ALIGN=middle></td><td> Une brochure</td></tr>
<tr><td align=right><INPUT NAME="inscri" TYPE="CHECKBOX" ALIGN=middle></td><td> Un dossier d'inscription en 1ère année préparatoire</td></tr>
</table>
<BR><BR>
<table width=100%>
<tr><td><INPUT value="Transmettre les informations" TYPE="SUBMIT"></td>
<td align=middle><INPUT value="Effacer" TYPE="reset"></td></tr>
</table>
</FORM></H3>

Dans l'exemple, RESET réinitialise les formulaires, et SUBMIT transmet les informations. Il existe un grand nombre de méthodes pour entrer du texte, l'un de ceux-là est de permettre d'entrer du texte sur plusieurs lignes, comme avec le Textarea.