les formulaires

Les formulaires

Intoduction

Les formulaires ou forms sont le moyen offert par le language HTML pour générer à l'écran des zones de dialogues avec le visiteur. Comme dans un formulaire papier, on réalise des zones dans lesquelles on entre un texte, des cases à cocher, des listes de choix.
Un formulaire n'est qu'une interface de saisie : il a besoin d'éléments pour traiter l'information qui est collectée. Le lecteur saisit des informations en remplissant des champs ou en cliquant sur des boutons, puis appuie sur un bouton de soumission (submit) pour l'envoyer soit à un URL, c'est-à-dire de façon générale à une adresse e-mail ou à un script de page web dynamique tel que PHP, ASP ou un script CGI (Common Gateway Interface).
À l'aide de balises HTML, on décrit les zones dans lesquelles l'utilisateur va remplir son formulaire. Chacune de ces zones sera identifiée par un nom symbolique. Lorsque le formulaire est envoyé au programme d'exploitation, celui-ci vérifie l'identificateur de chaque zone et la valeur saisie.

Le formulaire est un objet qui se décompose en trois étapes :

L'affichage sur le navigateur du visiteur
La saisie des valeurs par le visiteur, qui se termine par la soumission du formulaire
Le traitement du formulaire

Les différentes balises des formulaires

<form></form> : délimite le début et la fin du formulaire
<fieldset></fieldset> : délimite un champ de données de même nature au sein d'un formulaire
<legend></legend> : la légende d'un fieldset
<input/> : une entrée d'objet (texte, case à cocher, fichier) ou un déclenchement d'action (button, submit)
<textarea></textarea> : zone de texte pouvant contenir plusieurs lignes
<label></label> : légende d'un item de formulaire.
<select></select> : un menu déroulant

Les attributs des formulaires

Voici les différents attributs que l'on peut ajouter à différentes balises des formulaires.

action="..." : c'est la destination du formulaire : page (ou script) appelé lorsqu'on soumet le formulaire. C'est cette page qui recevra toutes les données du formulaire. Si vide : le formulaire sera envoyé à la page qui l'a affiché.
method="..." : method="post" ou method="get". La méthode "post" signifie que les valeur transmises seront cachées. Utiliser method="get" signifie que le contenu passera dans l'URL de la page : ?champ=valeur&champ2=valeur2 ... Beaucoup moins esthétique, surtout lorsqu'il y a des champs texte, des boutons, etc.

Le formulaire contient des balises qui permettent de délimiter des objets à envoyer : case de texte, case à cocher, bouton ... et chaque balise contient au moins 2 paramètres.

name="..." : c'est le nom de la variable à qui sera associée la valeur enregistrée par le visiteur
value="..." : la valeur qui peut être précisée par défaut. Il y a toujours une value, sauf dans une zone de texte.

La balise <form></form>

Les formulaires sont délimités par la balise <form> </form>, une balise qui permet de regrouper plusieurs éléments de formulaire (boutons,champs de saisie,...) et qui possède plusieurs attributs :

Voici la syntaxe de la balise form :

<form id="form1" method="post" action="url">
... 
</form>

La balise <fieldset> </fieldset>

Cette balise sert à encadrer un ensemble de champs pour regrouper des objets de même connotation. Exemple : utiliser un fieldset pour les coordonnées personnelles (nom, prénom, adresse), un autre pour les coordonnées bancaires (banque, compte, rib) et un autre pour le choix du produit (quantité, couleur, taille ...). Cette délimitation n'est pas obligatoire mais apporte un plus sur l'aspect ergonomique, simplement parce que lorsqu'on est dans le fieldset des coordonnées, on ne trouvera pas de données relatives au compte bancaire.

La balise <imput/>

La balise input est la balise essentielle des formulaires, car elle permet de créer un bon nombre d'éléments "interactifs". La syntaxe de cette balise est la suivante :

<INPUT type="Nom du champ" value="Valeur par défaut" name="Nom de l'élément"/>

L'attribut name est essentiel car il permettra au script CGI de connaître le champ associé à la paire nom/valeur, c'est-à-dire que le nom du champ sera suivi du caractère "=" puis de la valeur entrée par l'utilisateur, ou dans le cas contraire de la valeur par défaut repéré par l'attribut value.
L'attribut type permet de préciser le type d'élément que représente la balise INPUT, voici les valeurs que ce champ peut prendre :

checkbox : il s'agit de cases à cocher pouvant admettre deux états : checked (coché) et unchecked (non coché). Lorsque la case est coché la paire nom/valeur est envoyée au CGI. <form><input type="checkbox" name="C1" /></form>
hidden: il s'agit d'un champ caché. Ce champ non visible sur le formulaire permet de préciser un paramètre fixe qui sera envoyé au CGI sous forme de paire nom/valeur
file : il s'agit d'un champ permettant à l'utilisateur de préciser l'emplacement d'un fichier qui sera envoyé avec le formulaire. Il faut dans ce cas préciser le type de données pouvant être envoyées grâce à l'attribut accept de la balise form
image : il s'agit d'un bouton de soumission personnalisé, dont l'apparence est l'image situé à l'emplacement précisé par son attribut src
password: il s'agit d'un champ de saisie, dans lequel les caractères saisis apparaissent sous forme d'astérisques afin de camoufler la saisie de l'utilisateur
radio : il s'agit d'un bouton permettant un choix parmi plusieurs proposés (l'ensemble des boutons radios devant porter le même attribut name. La paire nom/valeur du bouton radio sélectionné sera envoyé au CGI. Un attribut checked pour un des boutons permet de préciser le bouton sélectionné par défaut <form><input type="radio" checked="checked" name="R1" value="V1" /></form></li>
reset : il s'agit d'un bouton de remise à zéro permettant uniquement de rétablir l'ensemble des éléments du formulaire à leurs valeurs par défaut <form><input type="reset" name="B2" value="Rétablir" /></form>
submit : il s'agit du bouton de soumission permettant l'envoi du formulaire. Le texte du bouton peut être précisé grâce à l'attribut value <form><input type="submit" name="B1" value="Envoyer" /></form>
text : il s'agit d'un champ de saisie permettant la saisie d'une ligne de texte. La taille du champ peut être définie à l'aide de l'attribut size et la taille maximale du texte saisi grâce à l'attributmaxlength. <form><input type="text" size="20" name="T1" /></form>

Cette balise input possède d'autres attributs :

id : c'est un attribut qui sert à identifier, de manière unique, chaque élément de page. Il peut avoir la même valeur que le "name" ou pas.
name : c'est le nom de la future variable qui sera envoyée au traitement
value : valeur par défaut, que l'utilisateur peut changer
checked="checked" : pour cocher un input uniquement lorsqu'il est de type radio ou checkbox
tabindex="..." : l'ordre de sélection des champs par la touche tabulation

La balise <textarea> </textarea>

La balise <textaera> permet de définir une zone de saisie plus vaste par rapport à la simple ligne de saisie que propose la balise <input/>. Cette balise possède les attributs suivants :

cols : représente le nombre de caractères que peut contenir une ligne
rows: représente le nombre de lignes
name: représente le nom associé au champ, c'est le nom qui permettra d'identifier le champ dans la paire nom/valeur
readonly="readonly": permet d'empêcher l'utilisateur de modifier le texte entré par défaut dans le champ (exemple : les chartes utilisateur)
value : représente la valeur qui sera envoyée par défaut au script si le champ de saisie n'est pas modifié par une frappe de l'utilisateur

Voici la manière dont elle se rédige : <form><textarea name="S1" rows="2" cols="10"></textarea></form>

La balise <select>

La balise <select><option>...</option></select> permet de créer un menu déroulant présentant plusieurs <option>. Les options sont caractérisées par un texte et une valeur (attribut value). Les attributs de cette balise sont :

name: représente le nom associé au champ, c'est le nom qui permettra d'identifier le champ dans la paire nom/valeur
size: représente le nombre de lignes dans la liste (cette valeur peut être plus grande que le nombre d'éléments effectifs dans la liste)
multiple: marque la possibilité pour l'utilisateur de choisir plusieurs champs dans la liste

Voici un exemple de menu déroulant :

<form>
  <select name="D2" size="1">
  <option selected="selected">Choix 1</option>
  <option>Choix 2</option>
  <option>Choix 3</option>
  <option>Choix 4</option>
  </select>
  </form>

Voici un autre exmple avec l'attribut multiple :/p>

<form>
  <select name="select" multiple="multiple" size="4">
  <option>Choix 1</option>
  <option>Choix 2</option>
  <option>Choix 3</option>
  <option>Choix 4</option>
  </select>
  </form>

Et un autre exemple avec les attributs multiple et selected :

<form>
  <select name="D3" multiple="multiple" size="3">
  <option selected="selected">Choix 1</option>
  <option>Choix 2</option>
  <option>Choix 3</option>
  <option selected="selected">Choix 4</option>
  </select>
  </form>

Envoi des données

Lorsqu'un formulaire est soumis (appui sur le bouton de soumission), les données présentes dans le formulaire sont envoyées au script CGI sous forme de paires nom/valeur, c'est-à-dire un ensemble de données représentées par le nom de l'élément de formulaire, le caractère "=", puis la valeur associée. L'ensemble de ces paires nom/valeur étant séparées entre elles par des esperluettes (caractère &). Les données envoyées ressembleront donc à ceci :

champ1=valeur1&champ2=valeur2&champ3=valeur3

Dans le cas de la méthode GET (envoi des données à travers l'URL), l'URL ressemblera à une chaîne du genre :

http://url/cgi-bin/script.cgi?champ1=val1&champ2=val2

N'oubliez pas de mettre un bouton avant votre balise , de façon à permettre la validation du formulaire.