Untitled Document

Les formulaires

Ils constituent un élément important du développement Web, puisqu'ils permettent de pouvoir recueillir certaines informations utiles auprès des visiteurs.

Définir la feuille de formulaire :

La feuille de formulaire remplit deux fonctions. La première consiste à délimiter les éléments constituant le formulaire. Ainsi, le navigateur pourra identifier l'endroit où débute le formulaire et où il prend fin, en repérant les balises <FORM> et </FORM>.
La deuxième fonction consiste à spécifier les paramètres du formulaire que sont le nom, l'action, la méthode d'envoi et le type d'encodage. Tous ces paramètres se juxtaposent à l'intérieur de la balise <FORM>.

Un bon formulaire doit être accessible :

- mise en page simple (p. ex., sur une seule colonne) des contrôles et des zones de saisie;
- Explications ou étiquettes claires (significatives) associées aux zones et aux contrôles;
- Vérification et validation côté serveur de la saisie des données;
- Proposition d'autres méthodes pour communiquer avec une personne-ressource et/ou transmettre de l'information.

Balises et attributs :

La balise FORM :

possède plusieurs attributs, permettant de spécifier ce qui doit être fait lorsque l'utilisateur veut envoyer les données au serveur.

Attribut ACTION :

<FORM ACTION="url"...> permet d'indiquer l'URL (de protocole : http, ftp, file, mailto, news, telnet, ...) qui va recevoir les informations entrées dans le formulaire, lorsque l'on cliquera sur le bouton de validation.
Plus précisément, l'URL est l'adresse d'un programme (un script) qui va récupérer les données et les traiter. Si le champ ACTION est absent, l'URL sera celle du document courant.

Attribut METHOD

L'attribut METHOD permet d'indiquer la méthode de transmission des données saisies dans le formulaire.
Il y en a deux :
La méthode GET:
méthode par défaut, consiste à concaténer les données du formulaire à l'URL spécifiée dans ACTION, après avoir inséré un point d'interrogation.
Ces données sont incluses sous forme d'une liste nom-champ=valeur-champ.
On obtient alors une requête adressée au serveur, du genre :http://serveur/chemin/prog.html?champ1=valeur1&champ2=valeur2&....
La méthode POST :
génére une requête HTTP spéciale qui envoie les données au serveur (plutôt qu'en l'accolant à l'URL). Il est recommandé d'utiliser la méthode POST.
l'action MAILTO:
C'est le moyen le plus simple pour faire expédier les informations du formulaire par l'utilisateur.
Il consiste à utiliser automatiquement le courrier électronique.
Il suffit de spécifier l'adresse électronique (e-mail) du destinataire après le nom du protocole MAILTO:
Si le serveur de messagerie est accessible, (si l'utilisateur est bien connecté), le corps du message acheminé contiendra la liste des couples champ1=valeur1.

par exemple : <FORM action="mailto:caroca@test.be" method=post enctype="text/plain" NAME="Fiche_inscription">

Les éléments d'un formulaire :

Les différents élements d'un formulaire sont à insérer à l'interieur des balises <FORM>...</FORM>

1.- La boîte texte :

La boîte texte est l'élément le plus commun. On s'en sert pour recueillir une entrée au clavier de la part de l'utilisateur.

code source :

<FORM>
Nom:
<br>
<INPUT TYPE="text" NAME="Nom" SIZE="40" MAXLENGTH="40" VALUE="voilà une boîte texte">
</p>
</FORM>

Explication de la syntaxe :

INPUT TYPE="text" Cela définit le type de boîte, ici texte en entrée.
NAME="nom idenficateur" Nom de la boîte.
VALUE="valeur" Contenu par défaut ici "voilà une boîte texte".
SIZE= nombre Détermine le nombre de caractères maximal visible à l'écran.
MAXLENGTH=nombre fixe le nombre maximal de caractères permis.

2.- La boîte mot de passe :

La boîte mot de passe constitue une variante de la boîte texte. Toutefois, elle sert principalement à recueillir un mot de passe de la part de l'utilisateur. Les caractères tapés sont représentés par des astérisques.

Exemple :

code source :

<FORM>
Entrez votre mot de passe:
<INPUT TYPE="password" NAME="motdepasse" SIZE="20" MAXLENGTH="20">
</FORM>

Explication de la syntaxe :

INPUT TYPE="password" Cela définit le type de boîte, ici mot de passe en entrée.
NAME="nom idenficateur" Nom de la boîte.
SIZE= nombre Détermine le nombre de caractères maximal visible à l'écran.
MAXLENGTH=nombre fixe le nombre maximal de caractères permis.

3.- Les cases radio :

Les cases radio présentent une liste de choix à l'utilisateur. Cependant, il ne peut effectuer qu'un seul choix parmi la liste.

Exemple : dans quel groupe d'âge se trouve le visiteur

code source :

Explication de la syntaxe :

INPUT TYPE="radio" Cela définit le type de case, ici case radio.
NAME="nom idenficateur" Nom de la case radio, dans notre exemple il est le même mais il peut être différent .
VALUE="valeur" Contenu par défaut ici les tranches d'âge.
CHECKED indique que l'item est sélectionné par défaut au chargement de la page.

4.- Les cases à cocher :

Les cases à cocher présentent une liste d'items à l'utilisateur. Celui-ci peut alors cocher un ou plusieurs items afin d'indiquer ses choix.

code source :

<FORM>
<INPUT TYPE="checkbox" NAME="option1" Value="réalisation">
Réalisation<BR>
<INPUT TYPE="checkbox" NAME="option2" Value="image">
Image<BR>
<INPUT TYPE="checkbox" NAME="option3" Value="son">
Son<BR>
<INPUT TYPE="checkbox" NAME="option4" Value="montage scripte" >
Montage scripte<BR>
<INPUT TYPE="checkbox" NAME="option5" Value="multimédia">
Multimédia<br>
<INPUT TYPE="checkbox" NAME="option6" Value="théâtre">
Théâtre
</FORM>

Explication de la syntaxe :

INPUT TYPE="radio" Cela définit le type de case, ici case à cocher.
NAME="nom idenficateur" Nom de la case à cocher.
VALUE="valeur" Contenu par défaut ici les options.

5.- La boîte liste :

La boîte liste constitue une autre façon de présenter une liste d'items. Celle-ci est utile dans le cas où le nombre d'éléments est plus important. De plus, elle permet de sélectionner plus d'un items à l'aide de la touche SHIFT ou CTRL.

Exemple : une liste de livres parmi lesquels l'utilisateur peut choisir:

code source :

<FORM>
<SELECT NAME="Livres" SIZE="5" MULTIPLE>
<OPTION VALUE="HTML"> Apprendre le HTML
<OPTION VALUE="DREAMWEAVER" SELECTED> Créez vos pages pour le Web
<OPTION VALUE="FLASH"> La bible du flash
<OPTION VALUE="DIRECTOR"> Le livre sur Director
<OPTION VALUE="JAVA"> Programmer en Java
</SELECT>
</FORM>

Explication de la syntaxe :

<SELECT NAME="nom de la liste" SIZE="nombre" MULTIPLE> L'attribut SIZE indique le nombre de lignes qui seront visibles dans la liste. L'attribut MULTIPLE, s'il est présent, permet à l'utilisateur d'effectuer plus d'une sélection.
<OPTION VALUE="Texte à définir par le concepteur"> Les entrées de la liste sont décrites par l'attribut OPTION, VALUE sert à définir la valeur qui doit être retournée dans le courrier électronique.
<OPTION VALUE="Texte à définir par le concepteur" SELECTED> SELECTED, lorsque présent, indique que l'item est sélectionné par défaut au chargement de la page.

6.-La boîte liste déroulante :

La boîte liste déroulante, tout comme la boîte liste, permet à l'utilisateur de faire un choix parmi une liste d'items. Cependant, un seul choix est possible pour ce type de liste.

exemple :

code source :

<FORM>
<SELECT NAME="Pays">
<option value="Question" selected>Quel est votre pays d'origine </option>
<option value="Allemagne">Allemagne </option>
<option value="Chili">Chili </option>
<option value="Belgique">Belgique </option>
<option value="Canada">Canada </option>
<option value="Argentine">Argentine </option>
<option value="France">France </option>
<option value="Grande-Bretagne">Grande-Bretagne </option>
<option value="Suisse">Suisse </option>
</SELECT>
</FORM>

Explication de la syntaxe :

NAME= nom de la liste
<OPTION VALUE="Texte à définir par le concepteur"> Les entrées de la liste sont décrites par l'attribut OPTION, VALUE sert à définir la valeur qui doit être retournée dans le courrier électronique.
<OPTION VALUE="Texte à définir par le concepteur" SELECTED> SELECTED, lorsque présent, indique que l'item est sélectionné par défaut au chargement de la page.

7.- La boîte texte multilignes :

La boîte texte multilignes, à l'instar de la boîte texte, permet à l'utilisateur d'inscrire plus d'une ligne de texte.

exemple :

code source :

<FORM>
Donnez-nous vos commentaires:<BR>
<TEXTAREA NAME="Commentaires" COLS=30 ROWS=5 WRAP=virtual>
Veuillez écrire ici...
</TEXTAREA>
</FORM>

Explication de la syntaxe :

NAME="nom identificateur"
COLS=nb colonnes .
ROWS=nb rangées.
WRAP détermine la façon dont les lignes sont traitées lors d'un changement de ligne. La liste ci-dessous donne une description des différentes possibilités :
- OFF : aucun changement de ligne.
- VIRTUAL :les changements de lignes sont effectués automatiquement dans la boîte texte multilignes. Cependant, le tout est soumis en une seule ligne au serveur.
- PHYSICAL : les changements de lignes sont effectués automatiquement dans la boîte texte multilignes. Les changements de lignes sont également communiqués au serveur.

8.- Les boutons envoyer et recommencer :

Un formulaire n'est transmis au serveur que lorsque l'utilisateur clique sur le bouton soumettre à l'aide de la souris. La plupart du temps, il est accompagné du bouton recommencer, permettant ainsi à l'utilisateur d'effacer toutes les entrées du formulaire d'un seul coup.

code source :

<FORM>

ICI tous les élements de votre formulaire, cases à cocher, boîte de texte, boutons radio ...

Le bouton Envoyer est celui dont l'attribut TYPE est submit, tandis que le bouton Recommencer est reset.

9.- Exemple complet :

Nom : Prénom :

Mot de passe :

- Vous êtes à l' IAD au :

Type long Type court Théâtre (Type long)

- Quelle est votre discipline préférée ?

- Vous voulez des renseignements sur les options :

Réalisation
Image
Son
Montage scripte
Multimédia
Théâtre

Ecrivez ci-dessous le sujet de votre demande de renseignements :

Voici ma demande concernant...

Envoyer les informations

Pour récommencer

code source :

<FORM action="mailto:caroca@test.be" method=post enctype="text/plain" NAME="Fiche_inscription">
<strong><font color="#996600">Nom :</font></strong>
<INPUT TYPE ="text" NAME="Nom" VALUE="" >
<strong><font color="#996600">Prénom :</font></strong>
<INPUT TYPE ="text" NAME="Prenom" VALUE="" >
<strong><font color="#996600"><br><br>Mot de passe :</font></strong>
<INPUT TYPE="password" NAME="Pass" SIZE=5>
<p> - Vous êtes à l' IAD au :<br>
<br><INPUT TYPE="radio" NAME="option" VALUE="Type long" checked>
Type long
<INPUT TYPE="radio" NAME="option" VALUE="Type court">
Type court
<INPUT TYPE="radio" NAME="option" VALUE="Théâtre">
Théâtre (Type long)</p>
<p> - Quelle est votre discipline préférée ?<br>
<br>
<SELECT NAME="disciplines" MULTIPLE SIZE=3>
<OPTION>acoustique
<OPTION SELECTED>Informatique
<OPTION>Histoire du cinéma
<OPTION>Mathématiques
<OPTION>Anglais
<OPTION>Ecriture de scénario
<OPTION>Histoire de l'art
<OPTION>sociologie
</SELECT>
</p>
<p> - Vous voulez des renseignements sur les options :<br>
<BR>
<INPUT TYPE="checkbox" NAME="réalisation" >
<strong><font color="#996600">Réalisation</font></strong><BR>
<INPUT TYPE="checkbox" NAME="image">
<strong><font color="#996600">Image</font></strong><BR>
<INPUT TYPE="checkbox" NAME="son">
<strong><font color="#996600"> Son<BR>
<INPUT TYPE="checkbox" NAME="montage scripte">
Montage scripte<BR>
<INPUT TYPE="checkbox" NAME="multimédia">
Multimédia<br>
<INPUT TYPE="checkbox" NAME="théâtre">
Théâtre</font></strong> </p>
<p> <strong><font color="#990000">Ecrivez ci-dessous le sujet de votre
demande de renseignements :</font></strong><br>
<BR>
<TEXTAREA NAME="demande" ROWS=8 COLS=55>
Voici ma demande concernant...
</TEXTAREA>
</p>
<table width="100%" border="0">
<tr>
<td width="50%" height="39" align="left" valign="top"><input name="SUBMIT" type="SUBMIT" value="Envoyer" >
<br>
<font size="1">Envoyer les informations </font></td>
<td width="50%" align="left" valign="top"><input name="RESET" type="RESET" value="Effacer">
<br>
<font size="1">Pour récommencer</font></td>
</tr>
</table>
</FORM >