Les formulaires

Les formulaires permettent à un visiteur de saisir de l'information et de la transmettre au site web qu'il consulte. Il s'agit d'une interaction client-serveur à même un document XHTML. Le traitement des informations saisies par le visiteurs seront traités par un langage installé sur le serveur lorsque le visiteur soumettra le formulaire. PHP, ASP, ASP.NET, JSP ou Perl sont quelques exemples de langage côté serveur. On peut aussi ce servir des formulaires pour des opérations internes à l'aide de javascript pour faire une petite calculatrice par exemple. Il faut toutefois savoir qu'une application qui n'utilise que javascript, du côté client, n'est pas accessible pour tous les utilisateurs d'Internet.

Le langage XHTML définit une dizaine de balises pour construire un formulaire. La majorité des balises de formulaire ont été introduites dans les débuts du Web pour les document HTML. Actuellement, plusieurs groupes comme le WhatWG avec leurs Web Forms 2.0 ou le W3C avec la spécification XForm tentent d'enrichir et de faire évoluer les formulaires Web. Pour le but de ce tutoriel, seules les balises de la norme XHTML 1.0 Strict seront décrites.

Balises pour les formulaires XHTML

1. <form> : formulaire XHTML
2. <input> : champ de saisie
3. <textarea> : boîte de texte multiligne
4. <select> : liste déroulante
5. <option> : option d'une liste déroulante
6. <label> : étiquette d'un champ de formulaire
7. <fieldset> : regroupement de champs de formulaire
8. <legend> : légende du regroupement (fieldset)
9. <button> : bouton
10. <optgroup> : groupe d'options d'une liste déroulante

<form>

La balise <form> décrit un regroupement de champs cqui seront envoyés en même temps lors de sa soumission. Une soumission de formulaire est un processus déclenché par l'utilisateur en activant un bouton de soumission ou en cliquant sur la touche <ENTRÉE> sur certain champs. Ce processus recueille toutes les informations du formulaire et envoient vers le serveur de la page concernée les noms et valeurs des champs.

Deux méthodes de soumission de formulaire existe: get et post. La méthode getpermet d'envoyer les informations dans une URL. Par exemple, si j'envoie un champ texte avec le nom 'txt1' et qui possède la valeur 'pomme', l'url deviendra nompage.ext?txt1=pomme. Noter qu'un point d'interrogation s'ajoute après le nom de la page. Si l'usager envoit plusieurs champs (txt1 avec la valeur pomme, txt2 avec la valeur cerise par exemple), un caractère '&' permettra de séparer les champs (nompage.ext?txt1=pomme&txt2=cerise). Cette méthode, par URL, possède une limite de caractère et n'est pas très jolie pour le visiteur. La méthode POST, par opposition, envoie les champs de façon transparente au serveur. On ne voit pas les noms et valeurs des champs dans l'URL. Les données sont tout de même envoyer au serveur à l'aide du protocole HTTP et un langage côté client pourra y accéder sans problème. Cette méthode est généralement utilisée pour envoyer beaucoup de champs et d'ifnormations. On peut envoyer des fichiers entiers par exemple. C'est aussi la méthode préconisée lorsqu'on utilise des balises <textarea>. Ces deux méthodes sont spécifier par l'attribut method.

On doit aussi spécifier la page ou le script qui traitera les renseignements grâce à l'attribut action.

Pour qu'un formulaire puisse être fonctionnel, il doit obligatoirement avoir au moins un bouton "submit" permettant l'envoi.

Voici un formulaire simple qui permet d'envoyer un chiffre à la page "page.php" lorsqu'on clique sur le bouton 'Soumettre'. Note: puisque le formulaire est envoyé à une page au langage PHP, le script pourra récupérer l'information à l'aide de la variable $_POST['chiffre'].

<form method="post" action="page.php"><div>
 <p><input type="text" name="chiffre" value="4" /></p>
 <p><input type="submit" value="Soumettre" /></p>
</div></form>

L'attribut accept-charset est un attribut de la balise <form> qui est important si vous avez des problèmes d'encodage. À l'aide de cet attribut, on peut spécifier l'encodage avec lequel le navigateur envoit l'information du formulaire. En écrivant accept-charset="utf-8", le navigateur devra envoyer l'information encodée en UTF-8 par exemple.

Note importante pour la validation en XHTML Strict. Il est obligatoire de placer ses champs (input, textarea, select, button, label) à l'intérieur d'une balise de type bloc ou en-ligne. On ne peut pas placer une balise input par exemple directement dans une balise form. Souvent, les développeurs vont placer une balise div ou fieldset directement dans leur balise form.

<input>

type="text" : boîte de texte simple

Il s'agit d'un simple champ texte comportant une seule ligne. Si le formulaire possède un bouton d'envoi, le formulaire sera envoyé lorsque l'utilisateur pressera la touche [Entrée].

<input type="text" name="txtNom" value="" />

type="password" : boîte de mot de passe

Le type "password" est un champ pour les mots de passe. Les lettres dans la boîte de mot de passe sont habituellement cachées ou masquées par un symbole.

<input type="password" name="pwdConnexion" />

type="checkbox" : case à cocher

Permet d'insérer une case à cocher. Le visiteur peut cocher plusieurs choix. Note: les [] dans l'attribut name est une astuce pour le langage PHP. Les [] indique au langage PHP qu'il s'agit d'un tableau de données.

Quel sont vos fruits préférés?
<label for="fruitPomme">Pomme :</label>
  <input type="checkbox" name="chkFruit[]" value="pomme" id="fruitPomme" checked="checked" />
<label for="fruitOrange">Orange :</label>
  <input type="checkbox" name="chkFruit[]" value="orange" id="fruitOrange" />
<label for="fruitPoire">Poire :</label>
  <input type="checkbox" name="chkFruit[]" value="poire" id="fruitPoire" />

Quel sont vos fruits préférés? Pomme : Orange : Poire :

type="radio" : bouton radio

Permet d'insérer un bouton radio (rond qu'on peut cliquer). Pour plusieurs bouton radio ayant le même attribut name, il ne peut y en n'avoir plus qu'un de sélectionné à la fois.

Quel est votre fruit préféré?
<label for="optFruitPomme">Pomme :</label>
  <input type="radio" name="optFruit" value="pomme" id="optFruitPomme" checked="checked" />
<label for="optFruitOrange">Orange :</label>
  <input type="radio" name="optFruit" value="orange" id="optFruitOrange" />
<label for="optFruitPoire">Poire :</label>
  <input type="radio" name="optFruit" value="poire" id="optFruitPoire" />

Quel est votre fruit préféré? Pomme : Orange : Poire :

Boutons

Voir la section des boutons pour les types "button", "image", "reset" et "submit"

type="file" : envoi de fichier

Le type="file" permet d'insérer un champ permettant l'envoi de fichier. Habituellement, les navigateurs ajoutent un bouton qui permet de sélectionner le fichier sur notre ordinateur. Note importante, l'attribut enctype du formulaire <form> doit avoir la valeur "multipart/form-data"

<input type="file" name="filTexte" />

type="hidden" : champ caché

Le champ caché permet d'emvoyer discrètement de l'information à une page de traitement sans l'afficher dans le document XHTML.

<input type="hidden" name="hidChamp1" value="secret" />

<textarea>

Une boîte de texte multiligne permet comme, son nom l'indique, d'entrée plusieurs lignes de texte contrairement à une balise <input type="text" />. Cette boîte de texte peut avoir des barres de défilement verticales ou horizontales d'après son contenu.

On doit obligatoirement spécifier la taille de la boîte de texte en nombre de colonnes (cols) et nombres de rangées (rows). Contrairement à une balise input, la balise textarea ne possède pas d'attribut maxlength.

Son comportement est aussi différent de la balise input. La touche [Entrée] permet de changer de ligne et la touche [Tab] ne permet pas toujours de changer de champ dans tous les navigateurs. Parfois, cette touche produit une tabulation, parfois elle permet de sortir du champ.

<textarea cols="40" rows="4" name="nomTextArea">exemple de texte
    sur plusieurs lignes
</textarea>
			

exemple de texte sur plusieurs lignes

<select>

La balise <select> permet d'envoyer un ou plusieur choix, représenté par la balise <option>, à partir d'une liste déroulante. Chaque choix sera envoyé sous le même nom de champ que la balise <select>.

L'attribut booléen multiple permettra d'envoyer plusieurs champs si sa valeur est égale à "multiple".

L'attribut size, quant à lui, permet de spécifier le nombre d'options affichées à l'écran.

<option>

Une option est composée de 3 parties. La valeur de l'option, sa sélection par défaut et son texte. Seule, les options sélectionnées par défaut ou par l'utilisateur seront envoyé. Si la valeur de l'option (attribut value) n'est pas présente, alors le texte de l'option sera retournée comme valeur sélectionnée au script traitant le formulaire.

 <!-- option non sélectionnée, le texte et la valeur sont égalent à "Texte" -->
 <option>Texte</option>

 <!-- option non sélectionné, le texte est "Option 1" et la valeur est "1" -->
 <option value="1">Option 1</option>

 <!-- option sélectionnée par défaut, le texte et la valeur sont égalent à "Option 2" -->
 <option selected="selected">Option 2</option>

<optgroup>

La balise <optgroup> permet un regroupement logique de balise option dans une liste déroulante. On ne peut pas sélectionner un groupe.

<select name="listeDeroulante1" size="3">
 <optgroup label="Nombres">
  <option>1</option>
  <option selected="selected">2</option>
  <option value="3">3</option>
  <option value="3">4</option>
 </optgroup>
 <optgroup label="Options numérotées">
  <option value="5">Option 5</option>
  <option value="6">Option 6</option>
  <option value="7">Option 7</option>
 </optgroup>
</select>
			

<label>

La balise <label> permet de spécifier une étiquette et de la rattachée à un champ de formulaire. On peut englober un champ avec l'étiquette ou encore la placer à côté du champ.

L'attribut acceskey="" coinjointement avec l'attribut for="" permet de lier définitivement une étiquette à un champ. On pourra alors accéder au champ à l'aide d'une combinaison de touche. Par exemple, si on écrit <label for="monTexte" accesskey="T">, alors un visiteur utilisant le navigateur Firefox pourra accéder au champ ayant l'identifiant id="monTexte" à l'aide des touches [ALT]+T. Pour d'autres navigateurs, les touchent utilisées peuvent varieés. Voici un exemple avec un champ texte et une liste déroulante

<p><label for="monTexte" accesskey="t">Texte: </label> 
   <input type="text" name="txt1" id="monTexte" value="texte" />
</p>
<p><label for="maListe" accesskey="l">Liste: </label> 
   <select name="cbo1" id="maListe"><option>1</option><option>2</option></select>
</p>
			

<fieldset>

La balise <fieldset> permet de regrouper un groupe de champs. On peut spécifier le titre du regroupement à l'aide de la balise <legend>. Habituellement la légende est affichée dans le coin supérieur gauche de la balise fieldset.

<fieldset>
 <legend>Fruit préféré</legend>
 <label><input type="radio" name="fruit" value="cerise" /> Cerise</label>
 <label><input type="radio" name="fruit" value="orange" /> Orange</label>
 <label><input type="radio" name="fruit" value="pomme" /> Pomme</label>
</fieldset>
			

Ce qui pourrait être affiché comme ceci:

<button>

Il existe quatre types de bouton, donc deux permettent l'envoie ou la soumission de formulaire.

• le bouton multi-usage: <input type="button" value="Action1" /> ou <button type="button">Action1</button>
• le bouton de réinitialisation: <input type="reset" value="Annuler" /> ou <button type="button">Annuler</button>
• le bouton d'envoi: <input type="submit" value="Envoyer" /> ou <button type="submit">Envoyer</button>
• le bouton-image d'envoi: <input type="image" src="image.png" alt="Envoyer" name="btnImage" />

Le bouton multi-usage permet d'activer, par exemple, des fonctions javascript dans nos formulaires.

Le bouton de réinitialisation permet d'annuler tous les modifications effectuées par le visiteur et de remettre les champs du formulaire aux valeurs présentes lors du chargement du document.

Le bouton d'envoi comme le bouton-image permet d'envoyer le formulaire au serveur et permet au serveur de traiter les informations saisies par le visiteur. Le bouton-image a une particularité d'envoyer au lieu de la valeur du bouton comme le bouton d'envoi, les coordonnées X et Y du clic de souris du visiteur. Ainsi, un script PHP pourrait recevoir les variables suivantes $_POST['btnImage.x'] et $_POST['btnImage.y'] avec les valeurs 5 et 47, si le visiteur clique sur le bouton-image avec le champ name="btnImage" aux coordonnées (5, 47).

La balise <button></button> se distincte de la balise <input /> par le fait qu'elle peut contenir des balises de type bloc ou en-ligne comme les balises p, div, img, hr, table, br, span, etc.

input type="button": button: Action1

input type="reset": button: Annuler

input type="submit": button: Envoyer

input type="image":