Profession Webmaster -

Le formulaire permet de définir des zones de saisies, pour que l'internaute puisse envoyer des données au serveur.

Attention, tel quel, un formulaire ne sert pas à grand chose. Il faut le coupler à un programme en PHP, ASP, Perl ou autre qui sera en mesure de récupérer les informations pour les traiter.

Notre formulaire possèdera 2 options minimums, ACTION pour spécifier le programme qui récupère les données, et METHOD qui sera GET (données visibles sur la barre d'adresse) ou POST (rien de visible, la taille et le nombre de données peut être plus important).

A l'intérieur du formulaire, au milieu de balises html, nous trouverons des zones de saisies.

Figure 1 - Un formulaire qui ne sert pas à grand chose...
<FORM ACTION="/traitement.php" METHOD="GET">
<p>Entrez votre prénom : <input type="text" name="prenom"></p>
<p><INPUT type="submit" value="Valider le formulaire"></p>
</FORM>

Note : pour tester les exemples de cette page, remplacez /traitement.php par
http://www.profession-webmaster.fr/traitement.php

Validation

On validera notre formulaire à l'aide d'un bouton ou d'une image cliquable. Notez que les coordonnées X et Y de l'images sont transmises également.

Figure 2 - Deux méthodes de validation
<!-- Input de type SUBMIT avec le texte visible sur le bouton... -->
<INPUT type="submit" value="Valider le formulaire">
 
<!-- Input de type IMAGE et les options de la balise IMG... -->
<INPUT type="image" src="valider.gif" width="100" height="50">

Entrer du texte

Le champs INPUT de type text permet la saisie de texte. Avec le type password, le texte ne sera pas visible.

Avec l'option TYPE, l'option NAME est indispensable. Chaque zone de saisie doit posséder son nom.

Figure 3 - Tout ceci prend forme...
<p>
<FORM ACTION="/traitement.php" METHOD="POST">
Nom : <input type="text" name="nom"><br>
Prénom : <input type="text" name="prenom"><br>
Mot de passe : <input type="password" name="secret"><br>
<INPUT type="submit" value="Valider le formulaire"><br>
</FORM>
</p>

Figure 4 - Size pour la largeur, value pour la valeur par défaut,
maxlength pour le nombre maximum de caractères possibles.
<input
   type="text"
   name="nom"
   size="75"
   value="Carlier" 
   maxlength="10"
>

Cases à cocher

Une case peut être cochée ou non cochée. Si vous la voulez pré-cochée, on spécifie checked.

Figure 5 - Souvenez vous qu'il faut expliquer le rôle de la case...
<input name="publicite" type="checkbox">Recevoir de la pub ?

Boutons radio

Les boutons radio fonctionnent en série, c'est à dire qu'ils portent le même NAME, mais avec des VALUE différents.

Figure 6 - Pour en présélectionné un, checked également (ici le jaune)...
<input name="couleur" type="radio" value="Rouge">Rouge<br>
<input name="couleur" type="radio" value="Verte">Verte<br>
<input name="couleur" type="radio" value="Bleue">Bleue<br>
<input name="couleur" type="radio" value="Jaune" checked>Jaune<br>

Zone de texte

Pour permettre de saisir de grosse quantité de texte, incluant des retours à la ligne.

Figure 7 
<textarea name="zone">
La valeur par défaut
</textarea>

L'option WRAP peut être à OFF, HARD (ou physical) ou SOFT (ou virtual). Cela aura des répercussions sur la saisie (apparition ou non d'un ascenseur horizontal) et sur les données reçues (présence ou non des retours à la ligne).

Figure 8 - Les différentes options
<textarea name="zone1" cols="15" rows="7" wrap="virtual">

Liste de saisie

D'un fonctionnement proche des listes à puces, on construit le SELECT et on énumère les différentes OPTIONS possibles (avec leur valeur).

Figure 9 - Avec size="1" vous aurez une liste déroulante
<SELECT name="selection" size="4">
	<OPTION VALUE="r">Rouge</OPTION>
	<OPTION VALUE="v">Vert</OPTION>
	<OPTION VALUE="b">Bleu</OPTION>
	<OPTION VALUE="j">Jaune</OPTION>
</SELECT>

L'option MULTIPLE permet de faire une multi sélection. Attention à préciser un NAME avec des [] pour être récupéré.

Figure 10 - On note selected pour pré sélectionner une valeur
<SELECT name="selection[]" size="4" multiple>
	<OPTION VALUE="r">Rouge</OPTION>
	<OPTION VALUE="v">Vert</OPTION>
	<OPTION VALUE="b" selected>Bleu</OPTION>
	<OPTION VALUE="j">Jaune</OPTION>
</SELECT>

Présentation

Supports de cours

Et aussi...