Login


A voir

Un problème avec un appareil électroménager ?
Vous cherchez un renseignement ?
Trouvez une réponse sur www.tout-electromenager.fr

Cours

Vous êtes ici : Matières (informatique) > Thèmes (Créer un site web dynamique) > Cours (Les formulaires XHTML)

Cette création est mise à disposition sous un contrat Creative Commons Creative Commons License .

Auteur : E.RAVRAT

Dernière mise à jour : mardi 27 Novembre 2007 à 23:20:44

LES FORMULAIRES XHTML

TABLE DES MATIERES

1) QU’EST-CE QU’UN FORMULAIRE ?

Un formulaire est un espace de saisie dans l'interface utilisateur, pouvant comporter plusieurs zones, ou « champs » : on peut y saisir du texte, cocher des cases, effectuer un choix dans une liste de termes prédéfinis, appuyer sur des boutons, etc. Ces zones de saisie assurent l'interactivité entre le client (par exemple, le navigateur de l'internaute) et le serveur (par exemple, la machine qui héberge les pages web sur internet).

Les boutons des formulaires permettent de lancer des actions prédéfinies par l'auteur des pages. Ces actions sont des scripts (javascript, PHP, Perl, CGI...) qui envoient les données saisies au serveur. Ce dernier les traite et renvoie une réponse à l'utilisateur via la page web.

Exemple de formulaire permettant de créer un compte sur yahoo (cliquez sur l'image) :

vignette d'un formulaire Yahoo

Haut de page

2) POINT DE DEPART

Remarque : les exemples de code présentés sont toujours à placer entre les balises <body></body> puisqu’il s’agit du contenu qui doit apparaître à l’écran.

Pour rappel, voici le code d’une page valide XHTML 1.0 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Exemples de formulaire</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
    </body>
</html>

Haut de page

3) LA ZONE DE FORMULAIRE DE TYPE « TEXT »

Une zone de type « text » est utile pour permettre la saisie d’un mot ou de quelques mots au plus.

A l’écran :

Commentaires :

  • Un formulaire commence par la balise <form> et se termine par la balise </form>
  • La balise ouvrante <form contient deux attributs, « action » et « method ». Pour information, l’attribut « action » indique la page de script qui va recevoir et traiter les données entrées dans le formulaire. L’attribut « method » indique la méthode d’envoie des données du formulaire à la page de script qui va recevoir et traiter les données entrées dans le formulaire. Il existe deux méthodes, la méthode « post » et la méthode « get ». Ce point sera expliqué dans un prochain chapitre.
  •  l’intitulé de la zone de formulaire doit être précisé à l’aide de la balise <label>
  • la zone de saisie est précisée avec la balise orpheline <input>. Comme toutes les balises orphelines, il ne faut pas oublier de fermer la balise dès son ouverture avec le caractère « / ».
  •  la balise <input> a généralement au moins deux attributs. L’attribut « type » qui indique le type de zone de formulaire que le navigateur doit afficher. Ici il s’agit d’une petite zone de saisie.
  • L’attribut « name » quant à lui permet de donner un nom à la zone de formulaire. Ainsi, plus tard, nous pourrons dire via un script php « je veux récupérer la valeur qui a été entrée dans la zone qui porte le nom «prenom ».
  • Les balises <label> et <input> sont des balises de type « inline ». Elles doivent par conséquent être encadrées par une balise de type « block », ici la balise <p>. (cf cours sur le CSS)

Il est possible d’attribuer une valeur par défaut dans la zone de texte du formulaire à l’aide de l’attribut « value ».

<form action="page_qui_reçoit_les_donnees_du_formulaire.php" method="post">
    <p>
        <label>Votre prénom</label>
        <input type="text" name="prenom" value="ici votre prénom"/>
    </p>
</form>

Vous pouvez également modifier la longueur de la zone de saisie à l’aide de l’attribut size :

<form action="page_qui_reçoit_les_donnees_du_formulaire.php" method="post">
    <p>
        <label>Votre prénom</label>
        <input type="text" name="prenom" value="ici votre prénom" size="100px"/>
    </p>
</form>
 

La longueur est ici fixée à 100px. Elle aurait pu être fixée par CSS (dans un fichier lié) de la façon suivante :

input {
    width : 100px;
}

Un dernier attribut intéressant est l’attribut « maxlength » qui fixe une limite au nombre de caractères qu’il est possible de saisir dans la zone.

<form action="page_qui_reçoit_les_donnees_du_formulaire.php" method="post">
    <p>
          <label>Votre prénom</label>
          <input name="prenom" value="ici votre prénom" size="100" maxlength="5" Type="text" />
    </p>
</form>

Haut de page

4) LA ZONE DE FORMULAIRE DE TYPE « PASSWORD »

Cette zone est identique à la zone de type « text » mis à part que les caractères saisis par l’utilisateur sont masqués.

<form action="page_qui_reçoit_les_donnees_du_formulaire.php" method="post">
    <p>
        <label>Votre login</label>
        <input type="password" name="mot_de_passe" />
    </p>
</form>

Remarque : Les attributs abordés pour la zone de type « text » s’appliquent également à la zone de type « password ».

Haut de page

5) LA ZONE DE FORMULAIRE DE TYPE « TEXTAREA »

Une zone de formulaire de type « textarea » est utile pour les longues saisies dans la même zone (ex : une question, un message, un résumé, ou même un texte de plusieurs centaines de lignes !)



  • la balise HTML qui permet de créer une grande zone de saisie est la balise <textarea>.
  • Comme n’importe quelle autre zone de formulaire, l’attribut « name » permettant de nommer la zone doit être précisé. Dans notre exemple, la zone de texte se nomme « message ».
  • la balise <textarea> doit contenir deux attributs pour être valide XHTML 1.0. Les attributs « rows » et « cols » qui indiquent respectivement le nombre de lignes et le nombre de colonnes que doit respecter la zone de saisie. Ici, la taille de la zone de saisie correspondra à une hauteur de 5 lignes et à une largeur de 50 colonnes (ou caractères). Il est possible de modifier la hauteur et la largeur de la zone par CSS (propriétés « width » et « height »)
  • lorsque le message saisi est trop long, un ascenseur apparaît à droite de la zone de saisie :


Précédemment, nous avons vu qu’il était possible d’affecter une valeur par défaut à une zone de type « text » ou de type « password ». Cela est également possible pour les zones de type « textarea ». Aucun attribut n’est nécessaire. Il suffit de préciser la valeur pas défaut entre les balises <textarea></textarea> :

<form action="page_qui_reçoit_les_donnees_du_formulaire.php" method="post">
    <p>
        <label>Rédiger votre message</label> <br />
        <textarea name="message" rows="5" cols="40">
            Saisissez dans cette zone votre message.
        </textarea>
    </p>
</form>


Haut de page

6) LA ZONE DE FORMULAIRE DE TYPE « SELECT »

Ce type de zone de formulaire permet de proposer une liste de choix à l’utilisateur du formulaire.


<form action="page_qui_reçoit_les_donnees_du_formulaire.php" method="post">
    <p>
        <label>
              Quelle est votre loisir préféré parmi ceux qui vous sont proposés ?
        </label> <br />


        <select name="sondage">
            <option value="1">La lecture</option>
            <option value="2">La télévision</option>
            <option value="3">Le sport</option>
            <option value="4">L'informatique</option>
        </select>
    </p>
</form>

Commentaires :

  • Une liste de choix se crée avec le couple de balises <select></select>
  • Un nom doit être donné via l’attribut « name » à la liste créée. Cela permet au script qui reçoit les données du formulaire de dire « je veux récupérer le choix de la liste qui s’appelle « sondage » »
  • Chaque choix appelé option doit être encadré par le couple de balises <option></option>
  • Pour chaque choix, une valeur doit être indiquée via l’attribut « value » de la balise « option ». Cela permet au script qui reçoit les données du formulaire de dire « je veux récupérer la valeur correspondant au choix effectué dans la liste nommée « sondage ». Si l’utilisateur clique sur « Le sport », le script récupère alors la valeur 3.
  • Par défaut, le premier choix proposé par la liste est sélectionné.

Il peut parfois être intéressant de faire un choix par défaut parmi les éléments de choix proposés par la liste. Par exemple, je souhaite que l’informatique soit le loisir sélectionné par défaut.

Lorsque l’on déroule la liste, vous pouvez constatez que c’est effectivement le loisir « L’informatique » qui est sélectionné par défaut :


Commentaire :

  • L’attribut qui permet de sélectionner une option par défaut est l’attribut « selected ». La valeur de cet attribut est toujours « selected » afin d’être valide XHTML 1.0. Si l’utilisateur valide le formulaire sans avoir changé le choix par défaut, le script qui récupère les données saisies dans le formulaire récupère la valeur « 4 » qui correspond à l’option sélectionnée

Haut de page

7) LA ZONE DE FORMULAIRE DE TYPE « RADIO »

Ce type de zone permet à l’utilisateur de faire un seul et unique choix parmi plusieurs. Dès lors qu’il coche un autre bouton radio, le bouton précédemment sélectionné est automatiquement désélectionné.

Quel est votre loisir préféré parmi ceux qui vous sont proposés ?



<form action="page_qui_reçoit_les_donnees_du_formulaire.php" method="post">
    <p>
        Quel est votre loisir préféré parmi ceux qui vous sont proposés ? <br />
        <label>La lecture</label>
        <input type="radio" name="enquete" value="1" /> <br />
        <label>La télévision</label>
        <input type="radio" name="enquete" value="2" /> <br />
        <label>Le sport</label>
        <input type="radio" name="enquete" value="3" /> <br />
        <label>L'informatique</label>
        <input type="radio" name="enquete" value="4" />
    </p>
</form>

Commentaires :

  • La balise permettant de créer un bouton radio est la balise <input> associée à l’attribut « type » et sa valeur « radio »
  • Les boutons radio se rattachant au même objet doivent avoir le même nom (attribut « name ») afin de ne permettre qu’un seul choix à l’utilisateur.

Exemple avec le code suivant comportant volontairement l’erreur mentionnée :

<form action="page_qui_reçoit_les_donnees_du_formulaire.php" method="post">
    <p>
        Quel est votre loisir préféré parmi ceux qui vous sont proposés ? <br />
        <label>La lecture</label>
        <input type="radio" name="enquete" value="1" /> <br />
        <label>La télévision</label>
        <input type="radio" name="enquete" value="2" /> <br />
        <label>Le sport</label>
        <input type="radio" name="sondage" value="3" /> <br />
        <label>L'informatique</label>
        <input type="radio" name="sondage" value="4" />
    </p>
</form>

Puisque deux noms différents sont indiqués, le navigateur considère qu’il s’agit de deux listes de choix différents. Il permet par conséquent de cocher deux cases.

Quel est votre loisir préféré parmi ceux qui vous sont proposés ?



Un choix par défaut peut être précisé à l’aide de l’attribut « checked » qui signifie « coché ». La valeur qui lui est associée doit être la valeur « checked » afin de rester valide XHTML 1.0.

<form action="page_qui_reçoit_les_donnees_du_formulaire.php" method="post">
    <p>
        Quel est votre loisir préféré parmi ceux qui vous sont proposés ? <br />
        <label>La lecture</label>
        <input type="radio" name="enquete" value="1" /> <br />
        <label>La télévision</label>
        <input type="radio" name="enquete" value="2" /> <br />
        <label>Le sport</label>
        <input type="radio" name="enquete" value="3" /> <br />
        <label>L'informatique</label>
        <input type="radio" name="enquete" value="4" checked="checked"/>
    </p>
</form>

Cela donne :

Quel est votre loisir préféré parmi ceux qui vous sont proposés ?



Haut de page

8) LA ZONE DE FORMULAIRE DE TYPE « CHECKBOX »

Ce type de zone permet d’afficher des cases à cocher.

Avec ce type de zone de formulaire, il est possible de faire plusieurs choix (essayez).

Quels sont vos deux loisirs préférés parmi ceux qui vous sont proposés ?



<form action="page_qui_reçoit_les_donnees_du_formulaire.php" method="post">
    <p>
        Quels sont vos deux loisirs préférés parmi ceux qui vous sont proposés ?
        <br />
        <label>La lecture</label>
        <input type="checkbox" name="choix[]" value="1" /> <br />
        <label>La télévision</label>
        <input type="checkbox" name="choix[]" value="2" /> <br />
        <label>Le sport</label>
        <input type="checkbox" name="choix[]" value="3" /> <br />
        <label>L'informatique</label>
        <input type="checkbox" name="choix[]" value="4" />
    </p>
</form>

Commentaires :

  • Chaque case à cocher concernant un même sujet (ici les loisirs) doivent porter le même nom suivit de crochets. (name="choix[ ]"). Les crochets indiquent qu’il est possible que plusieurs choix soient associés à la zone de formulaire appelée « choix » alors que jusqu’à maintenant avec les autres types de zone de formulaire, une seule valeur était associé à un nom de zone.
  • Il est possible de cocher une ou plusieurs cases par défaut de la même façon qu’il est possible de sélectionner un seul bouton radio par défaut. (ici, les loisirs lecture et informatique sont cochés par défaut) :

Quels sont vos deux loisirs préférés parmi ceux qui vous sont proposés ?



<form action="page_qui_reçoit_les_donnees_du_formulaire.php" method="post">
    <p>
        Quels sont vos deux loisirs préférés parmi ceux qui vous sont proposés ?
        <br />
        <label>La lecture</label>
        <input type="checkbox" name="choix[]" value="1" checked="checked" /> <br />
        <label>La télévision</label>
        <input type="checkbox" name="choix[]" value="2" /> <br />
        <label>Le sport</label>
        <input type="checkbox" name="choix[]" value="3" /> <br />
        <label>L'informatique</label>
        <input type="checkbox" name="choix[]" value="4" checked="checked" />
    </p>
</form>

Haut de page

9) VIDER SON FORMULAIRE : LE TYPE « RESET »

Le type « reset » permet de rendre vierge un formulaire complété d’un simple clic sur un bouton.

Lors du clic sur le bouton, les données saisies dans le formulaire sont effacées:

Commentaires :

  • Pour créer un bouton qui efface les données du formulaire, il faut utiliser l’attribut « type » avec la valeur « reset » dans la balise « input ».
  • La valeur affectée à la propriété « value » permet d’indiquer le texte du bouton.

Haut de page

10) VALIDER SON FORMULAIRE : LE TYPE « SUBMIT »

Lorsque l’utilisateur à terminer de compléter le formulaire, il clique sur un bouton qui envoie les informations saisies à un script (par exemple php) qui va s’occuper d’enregistrer les données saisies.

Exemple de formulaire à valider :

Quel est votre loisir préféré parmi ceux qui vous sont proposés ?




<form action="page_qui_reçoit_les_donnees_du_formulaire.php" method="post">
    <p>
        <label>Votre prénom</label>
        <input type="text" name="prenom" />
        <label>Votre Nom</label>
        <input type="text" name="nom" />
    </p>
    <p>
        Quel est votre loisir préféré parmi ceux qui vous sont proposés ? <br />
        <label>La lecture</label>
        <input type="radio" name="enquete" value="1" /> <br />
        <label>La télévision</label>
        <input type="radio" name="enquete" value="2" /> <br />
        <label>Le sport</label>
        <input type="radio" name="enquete" value="3" /> <br />
        <label>L'informatique</label>
        <input type="radio" name="enquete" value="4" checked="checked" />
    </p>
    <p>
        <label>
        Rédiger votre message apportant des précisions sur le loisir sélectionné
        </label> <br />
        <textarea name="message" rows="5" cols="40">votre message ici</textarea>
    </p>
    <p>
        <input type="submit" name="validation" value="valider le formulaire" />
        <input type="reset" name="effacer" value="effacer la saisie" />
    </p>
</form>

Commentaires :

  • Le type « submit » indique au navigateur qu’il s’agit d’un bouton qui va permettre d’envoyer les données saisies au script (par exemple php) qui va se charger de les traiter (enregistrement, calculs,…)
  • L’attribut « value » permet d’indiquer le texte du bouton à cliquer.
  • Quelle que soit la longueur d’un formulaire, il n’y a qu’un seul couple de balise <form></form> par formulaire.
  • Le clic du bouton de validation du formulaire (bouton de type « submit » va envoyer les données saisies à la page indiquée dans l’attribut « action » de la balise ouvrante <form>. Dans notre cas, la méthode d’envoi utilisée est la méthode « post » :
    <form action="page_qui_reçoit_les_donnees_du_formulaire.php" method="post">
 

La récupération des données envoyées est l’objet du prochain chapitre.

Haut de page