Chapitre 4

Les formulaires, introduction

Les formulaires ou forms sont le moyen offert par le langage 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 à une 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> :balise de la légende d'un fieldset
  • <input> : une entrée d'objet (texte, date, numéro, 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

Les attributs de la balise <form>

Pour que les données de votre formulaire soient envoyées au serveur, vous allez ajouter un attribut à la balise form ouvrante :

  • method : il existe deux valeurs possibles à l'attribut method
    • method="post" : La méthode "post" signifie que les valeurs transmises seront cachées, c'est la méthode préconisée le plus souvent.
    • method="get". Utiliser method="get" signifie que le contenu passera dans l'URL de la page : ?champ=valeur&champ2=valeur2 ... Elle est beaucoup moins esthétique, surtout lorsqu'il y a des champs texte, des boutons, etc.
  • 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 elle est vide : le formulaire sera envoyé à la page qui l'a affiché.

Les attributs employés dans les différentes balises de formulaires

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.

Premières balises des formulaires

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. En général on écrit qu'une seule balise <form> dans une page web.

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.

On associe parfois la balise <legend> à fieldset, afin de donner un nom à ce champ.

<form id="form1" method="post" action="url">
<fieldset><legend>Nom de la zone de formulaire</legend>
</fieldset>
</form>

La balise <label>

La balise label permet de donner un intitulé à un champ de formulaire, comme par exemple la balise input type text, un checkbox ou un textarea . Son utilisation permet aux navigateurs d'associer cet intitulé au champ de formulaire.
On lie donc le bouton qui suit en employant l'attribut for et en donnant la même valeur à l'id du champ. Lorsque l'on clique sur le texte du label, le curseur est renvoyé au champs texte. 

 <form> 
<label for="pseudo">Votre pseudo :</label><input type="password" name="pseudo"  id="pseudo">
</form>
libellé