 |

Formulaires (page1) : Balises
Balises
Les éléments de construction d'un formulaire Web (champs de saisie, boutons radio, cases à cocher, menus déroulants...)
sont ce que l'on appelle communément, en programmation d'interfaces utilisateurs graphiques (GUI), des "widgets" (windows gadgets).
- Début du formulaire :
<form method="post" action="URL script CGI" {target="target name"}{enctype="type encodage"} >
ou
<form method="get" action="URL script CGI" {target="target name"}{enctype="type encodage"} >
(avec l'attribut TARGET, on peut définir le frame ou une nouvelle fenêtre de navigateur
dans lequel le résultat du formulaire doit s'afficher)
- Groupe de champs, permet de regrouper tous les champs :
<fieldset>
- Legende, permet de nommer un formulaire ou un groupe de champs :
<legend>Nom du formulaire</legend>
- Données du formulaire:
- Champ texte :
<input type="text" name="nom champ" size="nb.car." maxlength="nb.max.car."
value="val.prédéf.">
- Champ texte dont le contenu entré sera masqué par des caractères " * " :
<input type="password" name="nom champ" size="nb.car." maxlength="nb.max.car."
value="val.prédéf.">
- Champ de sélection (avec bouton "Browse...") et d'envoi au serveur d'un fichier local (c-à-d. situé sur machine du navigateur) :
<input type="file" name="nom champ" value="path et nom initial fichier">
- Elément qui est transmis au serveur mais qui est invisible au navigateur :
<input type="hidden" name="nom champ" value="texte">
- Bouton radio :
<input type="radio" name="nom champ" value="valeur retournée" {checked="checked"}>
- Case à cocher :
<input type="checkbox" name="nom champ" value="valeur retournée" {checked="checked"}>
- Pour zone de texte de plusieurs lignes :
<textarea name="nom champ" cols="nb.col." rows="nb.lignes" wrap="physical,virtual">
texte par défaut
</textarea>
(avec VIRTUAL, pas d'ascenseur horizontal : le texte passe automatiquement à la ligne)
- Pour un menu :
<select name="nom champ" size="nb.articles" {multiple="multiple"}>
<option {value="valeur retournée"} {selected="selected"}>article menu</option>
......
</select>
- Boutons du formulaire :
- Bouton de soumission :
<input type="submit" value="nom bouton">
- Bouton de reset (remise des champs à leurs valeurs initiales) :
<input type="reset" value="nom bouton">
- Bouton personalisable, utilisable pour déclencher fonction JavaScript :
<input type="button" value="nom bouton" name="nom passé au serveur">
- Bouton personalisable, avec insersion d'image :
<button type="button" name"nom passé au serveur">
<img src="bouton.gif"> Bouton intégrant une image...
</button>
- Bouton image :
<input type="image" name="nom" src="URL image" align="top,middle,bottom">
- Fin du formulaire :
</fieldset>
</form>
Remarques sur la METHOD et le type d'encodage ENCTYPE :
- outre la méthode POST, on peut faire usage de la méthode GET qui est cependant déconseillée en raison de ses limitations (les données du formulaire sont URL-encodées dans la ligne d'en-tête GET de la requête HTTP dans une chaîne de caractère dont la taille est limitée)
- la méthode POST, par laquelle les données du formulaire sont envoyées dans le corps de la requête HTTP), offre en outre le choix du mécanisme d'encodage ENCTYPE :
-
- si rien n'est spécifié, c'est ENCTYPE="application/x-www-form-urlencoded" qui sera utilisé par défaut : les champs du formulaire sont alors URL-encodés sur une longue chaîne de la même manière qu'avec la méthode GET, mais ici sans limitation de taille
- on utilisera ENCTYPE="multipart/form-data" dans le cas d'un formulaire servant à uploader un fichier avec <INPUT TYPE=FILE ...>
- on utilisera ENCTYPE="text/plain" si l'on souhaite se faire envoyer par E-mail les champs du formulaire avec l'action ACTION="mailto:adresse_email?Subject=sujet"
Validation des données d'un formulaire
Pour vérifier la pertinence des données envoyées par l'utilisateur à un serveur via un formulaire (s'assurer que tous les champs nécessaires soient bien remplis, que les types de données soient corrects...), on peut envisager 2 techniques (et il faudrait même les utiliser simultanément) :
- Validation coté client, par des fonctions JavaScript intégrées à la page-formulaire : approche qui convient pour des contrôles simples (l'utilisateur pouvant contourner ces contrôles en fabriquant une requête falsifiée avec un effort de programmation minimum)
- Validation coté serveur, par le script CGI ou le programme PHP auquel ce formulaire est soumis, et renvoi du formulaire à l'utilisateur en cas de données erronées (solution la plus sûre, mais plus lourde car impliquant des allers et retours entre le client et le serveur)
 |

|