présente
Le petit guide HTML
Les formulaires
Chaque zone de saisie est définie par son nom (paramètre NAME=), sa valeur (VALUE=) correspondant à l'information saisie par l'utilisateur et divers autres paramètres, selon le type de zone de saisie.
Les éléments d'un formulaire peuvent être utilisés conjointement, ce qui permet de créer des formulaires très complexes.
| ACTION= | Définit l'URL ou l'URI qui doit recevoir les informations. L'action peut consister en un lien vers un programme CGI ou JAVA, ou ecore vers une boîte à lettres électronique. Si rien n'est indiqué, c'est l'URL du document courant qui sera utilisé. |
| METHOD= | C'est la méthode (fonction) à utiliser pour le formulaire, principalement METHOD=GET (pour des recherches dans une base de données) ou METHOD=POST (pour récupérer des informations à utiliser dans un Livre d'Or, par exemple). |
| ENCTYPE= | Précise le type de média utilisé pour l'encodage. |
| TYPE=TEXT | Définit une zone de texte (pour une seule ligne). C'est le type utilisé par défaut. Le paramètres NAME= (nom de la zone) est le seul paramètre requis. Le paramètre VALUE= permet d'afficher un texte par défaut dans la zone de saisie. Il est possible d'indiquer un nombre maximum de caractères autorisé (MAXLENGTH=) et définir la largeur de la zone (SIZE=). Pour utiliser une zone de saisie pouvant recevoir plusieurs lignes de texte, utiliser l'élément TEXTAREA. |
| TYPE=RADIO | Définit un bouton radio. Les paramètres suivants sont requis : NAME= (nom du bouton, identique pour tous les boutons radio car seul un bouton peut être actif à la fois), VALUE= (la valeur à renvoyer, spécifique à chaque bouton). Si on veut que l'une des cases soit cochée par défaut, utiliser le paramètre CHECKED. |
| TYPE=CHECKBOX | Définit une case à cocher. Les paramètres suivants sont requis : NAME= (nom de la case à cocher), VALUE= (la valeur à renvoyer). Si on veut que l'une des cases soit cochée par défaut, utiliser le paramètre CHECKED. |
| TYPE=PASSWORD | Une balise <INPUT> avec la paramètre TYPE=PASSWORD affichera des astérisques à la place du texte. Mais c'est bien le texte qui sera renvoyé par le formulaire. |
| TYPE=HIDDEN | Ce type de zone ne s'affiche pas dans la page Web, mais sa valeur est renvoyée quand l'action du formulaire est déclenchée. Uiliser les paramètres NAME= (pour nommer la zone d'action) et VALUE= (pour définir le message caché à renvoyer). |
| TYPE=SUBMIT | Ce type de zone permet d'afficher un bouton en relief, cliquable, qui déclenche l'action du formulaire. Le paramètre NAME= n'est pas utilisé ici. Vous pouvez utiliser les paramètres VALUE= pour définir le texte à afficher dans le bouton (par défaut, le bouton indique SUBMIT). |
| TYPE=RESET | Ce type de zone permet d'afficher un bouton en relief, cliquable, qui restaure l'état initial du formulaire. Le paramètre NAME= n'est pas utilisé ici. Vous pouvez utiliser les paramètres VALUE= pour définir le texte à afficher dans le bouton (par défaut, le bouton indique RESET). |
| TYPE=IMAGE | Ce type de zone permet d'afficher une image à la place d'une zone de saisie. Cette image a la même fonction qu'un bouton SUBMIT : elle déclenche l'action prévue pour le formulaire. Ce type utilise les paramètres NAME= (pour nommer la zone d'action) et SRC= (pour indiquer le nom du fichier image). Le paramètre ALIGN= peut aussi être utilisé, mais son utilisation est facultative. |
| NAME= | Nom de la zone (champ), qui permettra de traiter les informations collectées. Il est judicieux d'indiquer le nom entre guillemets, bien que ce ne soit pas indispensable. |
| MAXLENGTH= | Nombre de caractères autorisés dans la zone de texte. Si aucun paramètre n'est spécifié, le nombre de caractères autorisé est illimité. |
| SIZE= | Taille de la zone de texte. Si la valeur de MAXLENGTH est plus importante que la valeur de SIZE, le texte peut défiler dans la zone. |
| VALUE= | Permet d'afficher un texte par défaut dans la zone de texte. |
| ROWS= COLS= |
Définissent la taille de la zone de commentaire. Une barre de défilement apparaît si la texte saisi ne tient pas dans la zone. ROWS= définit le nombre de lignes de texte. COLS= définit le nombre de caractères d'une ligne (sur la base d'une police standard non proportionnelle). |
Un exemple de zones de saisie suivi de sa source illustrera ces différents paramètres.
Adresse :
Source des zones de saisie ci-dessus :
Exemple :
Ville :
Code postal :
Mot de passe :
Vous aimez les glaces. Quel est votre parfum préféré ?
Vanille
Fraise
Chocolat
Vous aimez les glaces. Quels sont vos parfums préférés ?
Vanille
Fraise
Chocolat
Votre avis :
Adresse : <input name=adresse1><br>
Pour aligner les zones de saisie à votre guise, utilisez les nombreuses possibilités offertes par les tableaux, ou bien faites appel aux balises <PRE> et </PRE>, qui encadrent une zone où la mise en page est figée : les espaces, les sauts de ligne et de paragraphe seront pris en compte par le visualiseur, mais le texte s'affichera dans une police non proportionnelle (de type Courier).
Ville : <input name=city size=20 maxlength=20><br>
Code postal : <input name=code postal size=10 maxlength=10><p>
Mot de passe : <input type=password name=pwrd><br>
<input type=hidden name=glaces><br>
Vous aimez les glaces. Quels sont vos parfums préférés ?><br>
<input type=checkbox name=parfum value=vanille>Vanille><br>
<input type=checkbox name=parfum value=fraise>Fraise><br>
<input type=checkbox name=parfum value=chocolat>Chocolat><br>
Votre avis :<br>
<input type=textarea name=commentaire rows=5 cols=50>
Sera transmis à Daniel Bédo Communication
</textarea><p>
<input type=image name=courrier src="Mail.gif"><br>
<input type=submit value="Envoyer"> <input type=reset value="Annuler"><br>
Adresse :
Ville :
Code postal :
Mot de passe :
Définissez une zone de liste avec les balises <SELECT> et </SELECT>. Ajoutez le paramètre NAME= pour identifier la zone, et utiliser la balise <OPTION> pour définir chaque élément de la liste. Vous pouvez aussi utiliser les paramètres VALUE= (pour définir une valeur à renvoyer différente de celle affichée dans la liste) et SELECTED (pour définir un élément sélectionné par défaut.
Si vous ajoutez, dans la balise <SELECT>, le paramètre MULTIPLE, vous permettez à l'utilisateur de sélectionner plusieurs éléments dans la liste.
Le paramètre SIZE vous permet de définir un nombre maximum d'éléments à afficher dans la liste, une barre de défilement verticale permettant d'accéder aux éléments masqués. Si SIZE= n'est pas spécifié, la zone de liste se comporte comme une liste déroulante.
Exemples de listes, avec leur source :
<SELECT NAME="parfum"><br> |
<SELECT NAME="parfum" SIZE=4><br> |
L'encodage remplace les espaces par le signe +, et les caractères non alphanumériques sont remplacés par leur code ASCII hexadécimal (de type %HH). Les caractères de saut de ligne ou de paragraphe sont définis par les codes CRLF, qui seront transmis sous la form %0D%0A).
Les divers champs apparaissent grâce au nom qui les définit (paramètre NAME=), et sont séparés par le signe &. Les champs vides sont ignorés.
Une programme CGI ou une applet JAVA pourra traiter ces données immédiatement. Le message pourra être reçu dans une boîte à lettres électronique, récupéré dans une base de données et traité automatiquement grâce à diverses commandes de conversion.
Si vous souhaitez que le formulaire renvoie des informations, mais que vous ne souhaitez pas garder trace de l'opération, utilisez la méthode METHOD=GET. Par exemple, pour renvoyer à l'utilisateur le résultat d'une recherche.
Mais si vous souhaitez garder les informations collectées pour les traiter à votre guise, utilisez la méthode METHOD=POST. Par exemple, pour recevoir les données du formulaire sous la forme d'un message dans votre boîte à lettres électroniques.
Voici la source de ce formulaire, qui transmet les données dans la boîte à lettres électroniques.
nom=Daniel+Dupont&sexe=h&famille=4&pays=France&Autres=J'habite+en%0D
%0AAlsace&surnom=P'tit+Loup
Il n'est pas difficile de reconnaire dans ce message les données suivantes :
Il est possible de faire bien d'autres choses avec les formulaires, quand l'on maîtrise les langages de programmation spécifiques au Web (CGI, JAVA, PEARL...).
<FORM METHOD="POST" ACTION="mailto:dbcom@newel.net"><p>
Ce formulaire renvoie des informations du type :
Votre nom : <INPUT NAME="nom" size="48"><p>
<INPUT NAME="sexe" TYPE=RADIO VALUE="h">Homme<p>
<INPUT NAME="sexe" TYPE=RADIO VALUE="f">Femme<p>
Nombre de personnes dans la famille : <INPUT NAME="famille" TYPE=text><p>
Domicile (pays) :<br>
<INPUT NAME="pays" TYPE=checkbox VALUE="France">France<br>
<INPUT NAME="pays" TYPE=checkbox VALUE="Suisse">Suisse<br>
<INPUT NAME="pays" TYPE=checkbox VALUE="Belgique">Belgique<p>
<INPUT NAME="pays" TYPE=checkbox VALUE="Divers">Autres :<br>
<TEXTAREA NAME="autres" cols=48 rows=2>Donnez ici toutes les indications utiles : autre pays, ville, culture...</textarea><p>
Surnom : <INPUT NAME="surnom" SIZE="42"><p>
Merci d'avoir bien voulu remplir ce questionnaire.<p>
<INPUT TYPE=SUBMIT VALUE="Envoyer"> <INPUT TYPE=RESET VALUE="Annuler"><p>
</FORM>
Nom = Daniel Dupont
Sexe = h
Famille = 4
Pays = France
Autres = J'habite en Alsace
Surnom = P'tit Loup
La diffusion de ce document sur Internet ou des serveurs BBS est autorisée, à condition qu'il le soit dans son intégralité et sans aucune modification. La diffusion sur des services en lignes commerciaux doit faire l'objet d'une autorisation de la part de l'auteur.
Les marques citées sont déposées par leurs propriétaires respectifs.
L'auteur dégage toute responsabilité en cas de dommages directs, indirects, accidentels ou consécutifs provenant d'informations erronées, et ce, même si l'auteur a été prévenu de la possibilité de tels dommages.
|
|
