Eléments d'un Formulaire
Pour indiquer la variété d'élément dans le formulaire, on utilise entre autre le tag <INPUT> qui avec l’attribut TYPE permet définir la forme de l'élément. Dans le tableau suivant, on va voir les différentes apparences des éléments d'un formulaire ainsi que leurs déclarations (sans mentionner ici la déclaration du formulaire).

Remarque: de façon générale, un élément est référencé par un Nom (NAME) et lors de la soumission du formulaire la valeur (VALUE) est renvoyée sous la forme: NAME=VALUE.

Champ de texte simple: valeur "TEXT"
permet de définir une zone de saisie de chaine de caractères. On peut affecter une valeur de départ avec l’attribut VALUE. L’attribut SIZE permet de fixer la taille de la zone de saisie (en nombre de caractères).
<INPUT TYPE="text" VALUE="Valeur de départ" NAME="nom pour référence" SIZE="30">
Champ de texte "Mot de Passe": valeur "PASSWORD"
permet de définir une zone de saisie de mot de passe (saisie masquée). On peut affecter une valeur de départ (mot de passe par défaut) avec l’attribut VALUE. L’attribut SIZE permet de fixer la taille de la zone de saisie (en nombre de caractères).
<INPUT TYPE="password" VALUE="Valeur de départ" NAME="nom pour référence" SIZE="30">
Les boutons "Radio" : valeur "RADIO"
permet de définir une série de boutons à cocher à choix unique (toutes les valeurs de NAME doivent être identiques pour définir un groupe de boutons). L’ attribut CHECKED permet de fixer le bouton coché par défaut (un seul « bouton » pourra être affecté de l’ attribut CHECKED) VALUE définie la valeur à renvoyer.
Formule du repas:
<INPUT TYPE="radio" NAME= "repas" VALUE="menu1" CHECKED> plat du jour ou <BR>
<INPUT TYPE="radio" NAME= "repas" VALUE="menu2">menu gastronomique ou <BR>
<INPUT TYPE="radio" NAME= "repas" VALUE="carte">choix à la carte
Formule du repas:
plat du jour ou
menu gastronomique ou
choix à la carte
Les boutons "Cases à Cocher" : valeur "CHECKBOX"
permet de définir une case à cocher (on peut ajouter l’attribut CHECKED si l’on souhaite que la case soit cochée à l’apparition de celle-ci).
NAME permet de donner un nom à la case (référence renvoyée).
VALUE définie ici encore les valeurs à renvoyer
Composez votre menu (à volonté)<br>
<INPUT TYPE="checkbox" NAME= "plat1" VALUE="entrée1" >assiette scandinave<br>
<INPUT TYPE="checkbox" NAME= "plat2" VALUE="entrée2" CHECKED> charcuterie<br>
<INPUT TYPE="checkbox" NAME= "plat3" VALUE="plat1">aile de raie<br>
<INPUT TYPE="checkbox" NAME= "plat4" VALUE="plat2">gigot d'agneau<br>
<INPUT TYPE="checkbox" NAME= "plat5" VALUE="fromage" CHECKED> fromage<br>
<INPUT TYPE="checkbox" NAME= "plat6" VALUE="dessert">dessert maison
Composez votre menu (à volonté)
assiette scandinave
charcuterie
aile de raie
gigot d'agneau
fromage
dessert maison
Champ de saisie multilignes: les balises <TEXTAREA> ... </TEXTAREA>
permettent de définir une zone de saisie de texte (comme <INPUT TYPE="text">) avec plusieurs lignes de saisie. On adjoint les attributs: NAME : pour fixer le nom de l'objet de saisie, COLS : fixe le nombre de colonnes de la zone de saisie, ROWS qui fixe le nombre de lignes de la zone de saisie.
<TEXTAREA NAME="Zone" COLS="20" ROWS="5">
texte entré
texte déjà
entré
</TEXTAREA>
Les menus déroulants (et listes): les balises <SELECT> ... </SELECT>
permettent de définir un menu déroulant et d'être une alternative aux boutons "radio" ou "à cocher" (l’attribut NAME permet de donner un nom à la liste). MULTIPLE (facultatif) indique que l'on peut sélectionner plusieurs valeurs. SIZE (facultatif) indique le mode de présentation (menu déroulant par défaut ou liste avec ascenseur)
On défini ensuite les choix du menu avec <OPTION>
On peut y adjoindre l’attribut SELECTED pour faire un choix par défaut
Formule du repas:
<SELECT NAME= "repas" >
<OPTION VALUE="menu1" SELECTED> plat du jour
<OPTION VALUE="menu2">menu gastronomique
<OPTION VALUE="carte">choix à la carte
</SELECT>
<br>
<br>Composez votre menu (à volonté)<br>
<SELECT NAME= "menu" SIZE=4 MULTIPLE>
<OPTION VALUE="entrée1" >assiette scandinave
<OPTION VALUE="entrée2" SELECTED>charcuterie
<OPTION VALUE="plat1">aile de raie
<OPTION VALUE="plat2">gigot d'agneau
<OPTION VALUE="fromage" SELECTED>fromage
<OPTION VALUE="dessert">dessert maison
</SELECT>
Formule du repas:

Composez votre menu (à volonté)
Le bouton simple: valeur "BUTTON"
permet de définir un bouton simple (pas d'envoi d'information, mais peut être utilisé avec javascript (avec par exemple: "onclick")). La valeur affichée dans le bouton est fixée avec l’attribut VALUE..
<INPUT TYPE="Button" VALUE="Appuyez sur le bouton" onClick="fonctionJavaScript()">
Le bouton "effacer" : valeur "RESET"
permet de définir un bouton de ré-initialisation (remet les différents champs du formulaire à l'état "vierge"). La valeur affichée dans le bouton est fixée avec l’attribut VALUE.
<INPUT TYPE="reset" VALUE="texte_du_RESET" >
Bouton "envoyer" (soumission): valeur "SUBMIT"
permet de définir un bouton de « soumission » . La valeur affichée dans le bouton est fixée avec l’attribut VALUE (et sera renvoyée lors de la soumission).
<INPUT TYPE="submit" VALUE="texte_du_bouton" NAME="nom pour référence">
"Bouton" image : valeur "IMAGE"
c'est une autre façon de définir un bouton de « soumission » en utilisant une image qui vous est propre. Dans ce cas NAME sert toujours de référence pour la récupération des informations, les coordonnées X,Y du point clicqué sont renvoyées. On peut aussi renvoyer la valeur fixée avec l’attribut VALUE (optionnelle). Comme pour une image classique, SRC localise l'image, WIDTH et HEITH (optionnels) fixent la taille d'affichage, BORDER l'épaisseur du contour, et ALT donne le texte alternatif en cas d'image manquante. Dans l'exemple suivant le logo de l'UPJV est pris comme bouton de soumission
<INPUT TYPE="image" NAME="nom pour référence" SRC="../elements/LogoUPJV.gif" WIDTH=110 HEIGHT=125 BORDER=3 ALT="Envoyer">

 

Auteur: Philippe Moreau