Nous allons créer un petit formulaire démonstratif de quelques possibilités offertes par la balise <Form>.
Le code est en vert.
Le rendu est en rouge.
Les explications sont en bleu.
Le corps d'un formulaire est semblable à celui d'une page, vous pouvez tout y mettre mais ce qui donne le coté interactif, ce sont les zones par lesquelles le visiteur peut communiquer avec le WebMaster.
Ces zones sont obtenues grâce aux balises <Input>, <Select> et <TextArea>, on doit pour chaque élément lui fournir un nom qui sera utilisé pour le compte rendu des réponses et pour les manipulations par les scripts.
Commençons donc par demander au visiteur ses nom et prénom grâce à un Input avec Type=Text,
on spécifie également la taille de la zone grâce à Size=30.
<Form Name="MonForm" action="mailto:monNom@monDomaine.fr?subject=explsondage" enctype="text/plain"">
Quel est ton Nom ?<BR>
<B><U>Bienvenue sur cette page</U></B><BR>
<Input type="text" Name="nom" Size=30><BR>
Quel est ton Prénom ?<BR>
<Input type="text" Name="prenom" Size=30><BR>
On va ensuite lui demander son sexe. Pour une question ayant un nombre de réponses limité et dont les réponses ne peuvent être multiples, on utilise généralement des boutons radios. Allons-y.
Quel est ton Sexe ?<BR>
<Input type="radio" Name="sexe" Value="man"> homme
<Input type="radio" Name="sexe" Value="woman"> femme<BR>
Quel est ton Sexe ?
homme
femme
Il faut noter ici que :
Si on veut avoir plusieurs réponses possibles, il faut utiliser les cases à cocher, d'utilisation semblable...
Quel sont tes loisirs préférés<BR>
<Input type="CheckBox" Name="loisirs" Value="lect"> Lecture<BR>
<Input type="CheckBox" Name="loisirs" Value="cine"> Cinéma<BR>
<Input type="CheckBox" Name="loisirs" Value="info"> Informatique<BR>
<Input type="CheckBox" Name="loisirs" Value="autr"> Autres...<BR>
Quel sont tes loisirs préférés
Lecture
Cinéma
Informatique
Autres...
L'utilisation des listes déroulantes peut aussi être utile en cas de nombreuses propositions. Elle permet un gain de place non négligeable. La présentation la plus appropriée est à décider par chacun. Une liste peut être à choix multiples ou non. Elle se déclare à l'aide des balises <Select> et </Select>. C'est entre ces deux balises qu'on placera autant de balises <Option> que nécessaire. On peut également choisir le nombre de choix visibles à l'écran.
| Combien d'heures consacres-tu à ton ordinateur par jour ? | ||
|---|---|---|
| Liste déroulante (Size=1) | Boîte Liste (Size=3) | Boîte Liste, choix multiple (Size=3 et Multiple) |
|
<Select Name="choix1" Size=1> <Option>1 à 4 <Option>5 à 9 <Option>10 à 14 <Option>15 à 19 <Option>20 et + </Select> |
<Select Name="choix3" Size=3> <Option>1 à 4 <Option>5 à 9 <Option>10 à 14 <Option>15 à 19 <Option>20 et + </Select> |
<Select Name="choix3m" Size=3 Multiple> <Option>1 à 4 <Option>5 à 9 <Option>10 à 14 <Option>15 à 19 <Option>20 et + </Select> |
Et enfin, laissons le visiteur s'exprimer librement. (Qui sait, ça peut donner des idées d'amélioration
pour le site...) Ceci se réalise à l'aide de <TextArea>. On choisit la taille de la zone en nombre de
colonnes et de lignes de caractères(Rows=nb et Cols=nb).
Place à la liberté d'expression, dis nous ce que tu veux :<BR>
<TextArea Name="Avis" Rows=5 Cols=40>Préécriture...</TextArea>
Place à la liberté d'expression, dis nous ce que tu veux :
Et, pour ne pas avoir fait ça pour rien, ajoutons les deux boutons miracle :
action.
Il est à noter qu'on peut remplacer ce bouton par une image.
|
<Input Type="Submit" Value="Envoyer" Name="OK"> <Input Type="Reset" Value="Effacer"> </Form> |
OU |
<Input Type="Image" Src="../../Images/envoi.jpg" Value="Envoyer" align=topText height=20 width=70 border=0> <Input Type="Reset" Value="Effacer"> </Form> |
|---|---|---|
|
|
Les réponses sont plus ou moins lisible selon que l'on utilise ou non enctype="text/plain"