Les formulaires apportent la vraie interactivité, celle qui donne vie au Web! Aussi sophistiquées qu'elles soient, sans formulaires vos pages HTML sont en lecture seule. Les formulaires permettent à l'utilisateur de vous renvoyer un commentaire sur vos pages, de spécifier un critère de recherche dans une base de données ou encore d'effectuer un choix complexe parmi plusieurs alternatives.

Vous trouverez ci-dessous les différents types de champs que vous pouvez combiner dans un formulaire. Ces champs doivent être définis à l'intérieur d'une section formulaire délimitée par <FORM> et</FORM>.

Note: Ce document explique comment réaliser des pages HTML contenant un formulaire, mais pas comment vous pouvez récupérer et traiter les données que l'utilisateur a entrées dans ledit formulaire. Nous verrons comment effectuer ce traitement lorsque nous aborderons la Common Gateway Interface.

 

Début de formulaire.

Champs simples

Chaque champ est défini avec le marqueur <INPUT>. Le champ de saisie le plus simple est de la forme suivante:

Tapez votre nom: 

<INPUT NAME="Nom">

 

  • NAME permet de préciser le nom du champ pour traitement ultérieur.
  • VALUE permet de donner une valeur par défaut au champ.
  • SIZE permet de préciser la longueur visible du champ. Notez que si l'utilisateur dépasse la fin du champ, son contenu défilevers la gauche.
Tapez votre adresse e-mail:  
<INPUT NAME="e-mail" VALUE="Joe.Sixpack@supermarket.com" SIZE=40>
  • MAXLENGTH permet de limiter le nombre de caractères pouvant être tapés dans le champ.
Code Postal:  (Maximum 5 chiffres) 
<INPUT NAME="CP" SIZE=5 MAXLENGTH=5>

 

Type password

Lorsque vous voulez que l'information tapée par l'utilisateur n'aparaisse pas à l'écran, vous devez utilisez l'attribut TYPE=PASSWORD. ATTENTION: L'utilisation de cet attribut ne grantit pas pour autant une confidentialité absolue des données tapées, celles-ci pouvant toujours être écoutées lors de leur transfert sur Internet.

Mot de passe: 

<INPUT TYPE=PASSWORD NAME="Pass">

Cases à cocher et boutons de sélection

Vous pouvez créer une case à cocher grâce à l'attribut TYPE=CHECKBOX. Pour pré-cocher une case, ajoutez l'attribut CHECKED.

 Je suis déjà client de votre société.
 Envoyez-moi une brochure.

<INPUT NAME="Client" TYPE=CHECKBOX>
<INPUT NAME="Brochure" TYPE=CHECKBOX CHECKED>

Le type RADIO vous permet de définir des boutons radio. La particularité de ces boutons est que vous ne pouvez sélectionner qu’un seul bouton radio portant un certain NAME à la fois. Ceci sera utilisé lorsque l’utilisateur doit faire un choix exclusif entre plusieurs options.

Vous êtes:
 Un Homme
 Une Femme

<INPUT NAME="Sexe" VALUE="H" TYPE=RADIO CHECKED>
<INPUT NAME="Sexe" VALUE="F" TYPE=RADIO>

Champ de texte

Lorsque vous voulez permettre à l'utilisateur de saisir un message de plusieurs lignes, utilisez le marqueur <TEXTAREA>: 

<TEXTAREA NAME="Commentaire" ROWS=8 COLS=55>
Bonjour,
j'ai un problème et je vais vous l'expliquer:
</TEXTAREA>
  • L'attribut ROWS permet de préciser le nombre de lignes de la fenêtre de saisie.
  • L'attribut COLS permet de préciser le nombre de colonnes de la fenêtre de saisie.
  • Vous pouvez préciser un texte par défaut en l'insérant entre <TEXTAREA> et </TEXTAREA>.

Listes de sélection:

Les boutons radios conviennent pour effectuer un choix entre 2 ou 3 options concurrentes. Au delà, il est recommandé d'utiliser une liste de sélection. Ceci se fait en utilisant le marqueur <SELECT>. Chaque option étant ensuite définie au moyen du marqueur <OPTION>.

Vous voulez: 

<SELECT NAME="Action">
 <OPTION> Emettre un avis
 <OPTION> Réclamer
 <OPTION SELECTED> Raler
 <OPTION> Crier votre haine
</SELECT>

Vous pouvez utiliser l’attribut SIZE pour préciser le nombre de lignes visibles de la liste de sélection:

Vous voulez: 

 

<SELECT NAME="simple" SIZE=3>
 <OPTION> Emettre un avis
 <OPTION> Réclamer
 <OPTION SELECTED> Raler
 <OPTION> Crier votre haine
</SELECT>

Finalement, vous pouvez également définir une liste de sélection multiple en utilisant l’attribut MULTIPLE:

Garniture(s): 

<SELECT NAME="multi" MULTIPLE>
 <OPTION> Anchois
 <OPTION SELECTED> Trois Fromages
 <OPTION> Epices
 <OPTION SELECTED> Ananas
 <OPTION> Olives
</SELECT>

Champ caché

Vous ne le voyez pas, mais ce formulaire contient un champ caché. L'utilisateur ne peut pas en modifier son contenu. Même si l'intérêt de ce type de champ ne vous paraît pas évident à priori, il permet tout de même de passer des paramètres supplémentaires aux scripts qui traitent les données du formulaire. Voir Common Gateway Interface. 
<INPUT TYPE=HIDDEN NAME="Cache" VALUE="Demo">

Boutons d'action

 Votre formulaire devra finalement comporter un bouton de validation qui déclenchera l'envoi des données saisies vers le serveur. Ce bouton est défini de la manière suivante: 
<INPUT TYPE=SUBMIT VALUE="Envoyer">

 Vous pouvez également ajouter un bouton qui remet le formulaire dans son état initial (valeurs par défaut):

<INPUT TYPE=RESET VALUE="Effacer">
Fin de formulaire.

Transmission des données

Le marqueur FORM accèpte plusieurs attributs permettant de spécifier ce qui doit être fait lorsque l'utilisateur veut envoyer les données au serveur.

ACTION="url" permet d'indiquer l'URL de la page, ou plutôt du programme CGI à appeler lorsque l'on clique sur le bouton de validation. L'attribut METHOD permet d'indiquer la méthode de transmission des données saisies dans le formulaire. Il y en a deux:

  • La méthode GET est la méthode par défaut. Elle consiste à concatèner les données du formulaire à l'URL, après avoir inséré un point d'intérrogation. On obtient alors une URL du typehttp://www.dom.org/chemin/prog.html?données.
  • La méthode POST consiste à envoyer les données au serveur dans le corps de la requête plutôt qu'en tant que partie de l'URL.

Il est recommandé d'utiliser la méthode POST.

L'attribut ENCTYPE permet de spécifier la manière dont doivent être encodées les données envoyées par la méthode POST. Seule la méthode par défaut peut être utilisée pour l'instant: application/x-www-form-urlencoded.