<< Retour au sommaire

 

Les formulaires

 

 

 

Le sommaire :

  1. Qu’est-ce qu’un formulaire ?
  2. La PRINCIPALE balise du formulaire, <form>

2.1  le champ de saisie text ;

2.2  Le champ de saisie mot de passe password ;

2.3  Le champ de saisie multi ligne textarea ;

2.4  Le champ case à cocher checkbox ;

2.5  La zone d’options radio ;

2.6  La liste déroulante select.

  1. Valider le formulaire via un bouton ;
  2. Définir l’ordre de tabulation via l’attribut tabindex ;
  3. Définir des touches de raccourcis avec l’attribut accesskey ;
  4. Regrouper les champs de formulaires par catégorie avec fieldset legend ;
  5. Envoyer le formulaire par E-mail ;
  6. Le type hidden.

 

 

Qu’est-ce qu’un formulaire ?

 

Un formulaire est une zone de la page qui contient des champs de saisies, des zones de listes déroulantes, des boutons etc.…

 

L’utilisateur peut donc saisir des données, réaliser des choix dans des zones de listes déroulantes, cocher ou décocher des cases à cocher, valider des boutons !

Tous ces éléments sont appelés des champs et ils sont intégrés à un bloc appelé le formulaire dont la balise est <form>.

La balise <form> n’étant pas une balise de type « block », il conviendra d’imbriquer le formulaire dans des balises « block » du genre, <p>, <table> et d’autre, mais la balise <table> reste néanmoins la structure idéale pour une bonne présentation du formulaire…

 

Cependant, si le XHTML est en mesure d’offrir une telle interface d’échange avec l’utilisateur, il n’en est pas pour autant capable d’en faire grand-chose…

Généralement, lorsque les différents champs du formulaire sont renseignés, et que l’utilisateur valide le bouton qui permet de déclencher l’envoi des données saisies, nous utilisons un fichier script pour réaliser le traitement qui en découle.

 Ce fichier script est toujours écrit dans un langage de programmation dynamique tels que le PHP, le JavaScript, ASP  et bien d’autre encore…

 

Nous pouvons néanmoins, en XHTML, expédier les données saisies dans le formulaires par l’intermédiaire de courriers électroniques. 

 

 

La PRINCIPALE balise du formulaire, <form>

 

Un formulaire est un bloc de balise dont la plus importante est la balise <form>

Puis, entre les balises <form> et </form>, viennent les différents champs du formulaire.

Les champs sont par exemple des zones d’édition, des zones de listes déroulantes, des cases à cocher, des boutons radio etc.

 

La structure globale est :

 

<form>

-         Premier champ,

-         Deuxième champ,

-         Troisième champ, etc.

</form>

 

La balise <form> peut recevoir plusieurs attributs :

 

Action, c’est le fichier qui doit être exécuté lorsque l’utilisateur vient de valider le formulaire par l’intermédiaire d’un clic sur le bouton du formulaire.

Enfin, le bouton prévu à cet effet, car le formulaire met à notre disposition 3 boutons dont les rôles sont distincts !

Il y en a un des 3 donc justement qui permet de valider le formulaire…

Dès lors que l’utilisateur aura cliqué sur ce fameux bouton de validation du formulaire, le fichier spécifié dans l’attribut « action » sera exécuté.

 

method, c’est la méthode de transfert que l’on va utiliser pour expédier les données. C’est un aspect assez technique du net…

Bon, mais si ça peut vous rassurer, depuis un formulaire, on utilise toujours la même méthode.

C’est la méthode «  »post ».

L’autre méthode, celle que l’on utilise pour expédier une donnée depuis un lien hypertexte, c’est la méthode « get ».

Dans la balise <form>, vous devrez écrire : method="post"

 

Voici maintenant la syntaxe du formulaire un peut plus complète :

 

<form action="fichierAExécuter.php" method="post">

-    Premier champ,

-    Deuxième champ,

-    Troisième champ, etc.

</form>

 

Ce qu’il faut comprendre, c’est qu’à l’intérieur du formulaire, nous allons écrire des balises qui vont déclencher l’affichage de champs d’édition, de zones de listes déroulantes et autre type de champ, et un bouton qui permettra à l’utilisateur de valider sa saisie dans le formulaire.

 

Tous ces champs, le bouton de validation lui-même, sont maintenant à étudier dans les chapitres suivants.

Quoi qu’il en soit, sachez dores et déjà que chaque champ sera presque toujours un attribut de la balise <input>.

Dans le bloc <form> </form>, il y aura autant de balises <input> que de champs qu’intègre le formulaire. Comme son nom l’indique, se sera juste l’attribut « type » qui permettra de spécifier le type de champ par l’intermédiaire de la valeur qui lui sera affectée…

Tenez, pendant qu’on y est, je dois vous rappeler que votre formulaire doit être écrit à l’intérieure d’une balise block, telle que dans le bloc de la balise <p> par exemple, ou encore, dans le bloc de la balise <table>.

 

Après avoir étudié les différents champs que peut intégrer un formulaire, le chapitre suivant vous présentera un formulaire complet !

 

Allez au boulot maintenant…

 


Le champ de saisie text

 

Le champ de saisie « text » permet d’afficher à l’écran une zone de saisie d’une seule ligne.

 

La syntaxe :

 

<label for="NomDuLabel">Texte à afficher</label>

<input type="text" name="NomDuChamp" id="NomDuChamp" />

 

La description :

 

« Texte à afficher » est le texte à afficher devant le champ, ce texte doit être placé entre les balises <label> et </label>. Il utilise l’attribut « for » qui permet de donner un nom au label, un nom qui ne sera pas visible, c’est juste une sorte d’identifiant qui va permettre de faire la relation entre le label et le champ qu’il représente.

D’ailleurs, pour faire cette relation, le champ, lui, va utiliser l’attribut « id ».

(Vous avez donc compris que le nom donné au label via l’attribut « for » doit être le même que le nom donné au champ associé via l’attribut « id ».)

 

text est la valeur de l’attribut type, il permet de spécifier que nous souhaitons une zone de texte d’une seule ligne.

 

NomDuChamp est la valeur des attributs name et id, il permet de spécifier un nom à notre champ. Le nom spécifié dans l’attribut « name » est le réel identifiant du champ, tandis que le nom spécifié dans l’attribut « id », quant à lui, permet de réaliser la relation avec le label qui lui est associé, comme vu précédemment.

Le nom du champ défini dans l’attribut « name » permettra donc ultérieurement de traiter la valeur saisie dans le champ, c’est en quelle que sorte son étiquette d’identification.

 

Attributs complémentaires :

 

size vous permet de spécifier la taille de la largeur du champ à afficher, cette valeur doit être exprimée en nombre de caractères, par exemple, pour un champ d’une largeur de 30 caractères : size="30"

 

maxlength vous permet de spécifier le nombre de caractères maximal autorisé durant la saisie. Par exemple, pour n’autoriser que 10 caractères : maxlength="10"

 

value vous permet de définir une valeur initiale à l'intérieur du champ dès son affichage à l'écran. Par exemple :

value="bonjour"

 

Un exemple :

 

<h1>Saisie de votre nom</h1>

<p>

<form action="traitement.html" method="post">

<label for="Nom">Veuillez saisir votre nom</label>

<input type="text" name="Nom" id="Nom" size="30" maxlength="25" />

</form></p>

 

Tester la page >>

  

le champ de saisie mot de passe password

 

Le type de formulaire « password » permet d’afficher à l’écran une zone de saisie, dont les caractères saisis par l’utilisateur seront remplacés par des astérisques. 

Cette astuce permet de masquer les mots de passe saisis à l’écran, c’est monnaie courante !

Avez-vous toujours confiance en la personne qui est près de vous ?

 

La syntaxe :

 

<label for="NomDuLabel">Texte à afficher</label>

<input type="password" name="NomDuChamp" id="NomDuChamp" />

 

La description :

 

« Texte à afficher » est le texte à afficher devant le champ, ce texte doit être placé entre les balises <label> et </label>. Il utilise l’attribut « for » qui permet de donner un nom au label, un nom qui ne sera pas visible, c’est juste une sorte d’identifiant qui va permettre de faire la relation entre le label et le champ qu’il représente.

D’ailleurs, pour faire cette relation, le champ, lui, va utiliser l’attribut « id ».

(Vous avez donc compris que le nom donné au label via l’attribut « for » doit être le même que le nom donné au champ associé via l’attribut « id ».)

 

password est la valeur de l’attribut type, il permet de spécifier que nous souhaitons une zone de texte d’une seule ligne et protégée à l’affichage par l’utilisation d’astérisques.

 

NomDuChamp est la valeur des attributs name et id, il permet de spécifier un nom à notre champ. Le nom spécifié dans l’attribut « name » est le réel identifiant du champ, tandis que le nom spécifié dans l’attribut « id », quant à lui, permet de réaliser la relation avec le label qui lui est associé, comme vu précédemment.

Le nom du champ défini dans l’attribut « name » permettra donc ultérieurement de traiter la valeur saisie dans le champ, c’est en quelle que sorte son étiquette d’identification.

 

Attributs complémentaires :

 

size vous permet de spécifier la taille de la largeur du champ à afficher, cette valeur doit être exprimée en nombre de caractères, par exemple, pour un champ d’une largeur de 30 caractères : size="30"

 

maxlength vous permet de spécifier le nombre de caractères maximal autorisé durant la saisie. Par exemple, pour n’autoriser que 10 caractères : maxlength="10"

 

value vous permet d'initier une valeur dans le champ et ce, dès son affichage.  par exemple :

value="bonjour"

 

Un exemple :

 

<h1>Saisie du mot de passe</h1>

<p>

<form action="traitement.html" method="post">

<label for="MotDePasse">Veuillez saisir votre mot de passe</label>

<input type="password" name="MotDePasse" id="MotDePasse" size="25" maxlength="25" />

<br />

Merci...

</form></p>

 

Tester la page >>

 


Le champ de saisie multi lignes textarea

 

Ce champ fonctionne de paire avec « input », donc « textarea » n’est pas un attribut de « input » mais directement une balise.

 A l’écran, il ressemble beaucoup à l’attribut « text », excepté que l’utilisateur peut ici saisir plusieurs lignes…

 

La syntaxe :

 

<label for="NomDuLabel">Texte à afficher</label>

<textarea name="NomDuChamp" id="NomDuChamp" rows="NombreLignes" cols="TailleLargeur"></textarea>

 

La description :

 

« Texte à afficher » est le texte à afficher devant le champ, ce texte doit être placé entre les balises <label> et </label>. Il utilise l’attribut « for » qui permet de donner un nom au label, un nom qui ne sera pas visible, c’est juste une sorte d’identifiant qui va permettre de faire la relation entre le label et le champ qu’il représente.

D’ailleurs, pour faire cette relation, le champ, lui, va utiliser l’attribut « id ».

(Vous avez donc compris que le nom donné au label via l’attribut « for » doit être le même que le nom donné au champ associé via l’attribut « id ».)

 

NomDuChamp est la valeur des attributs name et id, il permet de spécifier un nom à notre champ. Le nom spécifié dans l’attribut « name » est le réel identifiant du champ, tandis que le nom spécifié dans l’attribut « id », quant à lui, permet de réaliser la relation avec le label qui lui est associé, comme vu précédemment.

Le nom du champ défini dans l’attribut « name » permettra donc ultérieurement de traiter la valeur saisie dans le champ, c’est en quelle que sorte son étiquette d’identification.

 

NombreLignes est la valeur que l’on doit spécifier à l’attribut « rows ». Il spécifie le nombre de lignes que doit contenir le champ.

 

TailleLargeur est la valeur que vous devez spécifier dans l’attribut « cols ». Elle doit être exprimée en caractères, ce sera la largeur affichée de la zone de texte à l’écran.

 

Pourquoi la balise « input » s’écrit-elle en une seule balise tandis que « textarea » s’écrit avec l’éléments de début de balise <textarea> et l’élément de fin de balise </textarea> ?

Eh bien tout simplement parce que vous pouvez saisir vous-mêmes le texte initial entre les deux balises…

<textarea les attributs>texte initial</textarea>

Il s’agit donc du texte à afficher dès l’initialisation du champ à l’écran…

 

Attributs complémentaires :

 

maxlength vous permet de spécifier le nombre de caractères maximal autorisé durant la saisie. Par exemple, pour n’autoriser que 10 caractères : maxlength="10"

 

Un exemple :

 

<h1>Observations sur ce manuel</h1>

<p>

<form action="traitement.html" method="post">

<label for="Observation">Avez-vous des observations à me soumettre concernant ce manuel ?</label>

<br />

<textarea name="Observation" id="Observation" rows="5" cols="75”">

En réalité,

Je sais que tout est parfait...

lol

</textarea>

</form></p>

 

Tester la page >>

 


Le champ case à cocher checkbox

 

« checkbox » est une valeur de l’attribut « type » de la balise « input ».

C’est la case à cocher…

 

 

La syntaxe :

<p>Texte à afficher à l’utilisateur

<input type="checkbox" name="NomDuChamp" id="NomDuChamp" />

<label for="NomDuLabel">Texte de la case à cocher</label>

</p>

 

La description :

 

« Texte à afficher » est le texte à afficher devant la case à cocher.

Il peut s’agir parfois d’une question du genre, :

Est-ce que vous m’aimez ?

 

Par contre, « texte de la case à cocher » est le texte directement placé sur la case à cocher, il peut être en quelle que sorte la réponse à la question…

Ce texte doit être placé entre les éléments de la balise <label> et </label>.

Il utilise l’attribut « for » qui permet de donner un nom au label, généralement, vous lui donnerez le même nom que celui que vous allez choisir juste après pour le champ, par l’intermédiaire des attributs « name » et « id ».

 

NomDuChamp est la valeur des attributs name et id, il permet de spécifier un nom à notre champ. Le nom spécifié dans l’attribut « name » est le réel identifiant du champ, tandis que le nom spécifié dans l’attribut « id », quant à lui, permet de réaliser la relation avec le label qui lui est associé, comme vu précédemment.

Le nom du champ défini dans l’attribut « name » permettra donc ultérieurement de traiter la valeur saisie dans le champ, c’est en quelle que sorte son étiquette d’identification.

 

Attribut complémentaire :

 

Checked est un attribut de la balise « input », il ne peut prendre que la valeur « checked », et il permet de définir si la case à cocher doit être cochée dès son affichage.

Par défaut la case à cocher n’est pas cochée !

Pour la cocher, spécifiez checked= »checked ».

 

Un exemple :

 

<h1>Proposition de voyage</h1>

<p>

<form action="traitement.html" method="post">

désirez-vous visiter PARIS ?

<input type="checkbox" name="Reponse" id="Reponse" />

<label for="Reponse">Oui j'aimerais</label>

</form></p>

 

Tester la page >>

 


La zone d’options radio

 

La zone d'options vous permet de faire un choix (et un seul) parmi une liste de possibilités.

C’est ce que l’on appelle plus couramment le bouton radio !

Dans la balise « input », vous devez affecter la valeur « radio » à l’attribut « type ».

 

La syntaxe :

 

<p>

Le texte à afficher, ou une question

<input type="radio" name="NomDuBoutonRadio" value="NomDuChoix1" id="NomDuChoix1" />

<label for="NomDuChoix1">Texte du premier choix affiché</label>

<input type="radio" name="NomDuBoutonRadio" value="NomDuChoix2" id="NomDuChoix2" />

<label for="NomDuChoix2">Texte du deuxième choix affiché</label>

<input type="radio" name="NomDuBoutonRadio" value="NomDuChoix3" id="NomDuChoix3" />

<label for="NomDuChoix3">Texte du troisième choix affiché</label>

( etc.)

</p>

 

La description :

 

NomDuBoutonRadio » est le nom du bouton radio à affecter à l’attribut « name », il doit être le même dans tous les « input ».

 

« NomDuChoix1 », « NomDuChoix2 », « NomDuChoix3 » etc., ce sont les noms des différents choix proposés dans le bouton radio. Il s’agit de la valeur à affecter aux attributs « value », « id » et « for ». Le nom choisi doit différer d’un input à l’autre…

En effet, chaque choix du bouton radio doit avoir son propre identifiant !

 

« Nom du premier choix », « Nom du deuxième choix », « Nom du troisième choix »etc., ce sont tout simplement le nom des choix affichés à l’écran dans le bouton radio. Ces noms doivent bien sûr également différer d’un label à l’autre…

 

Attribut complémentaire :

 

checked vous permet de définir l’un des choix à cocher par défaut lors de l’affichage du bouton radio. Seule l’une des balises doit contenir cet attribut et il est facultatif.

Cet attribut ne peut recevoir qu’une seule valeur, c’est « checked ». Vous devez donc écrire : checked= »checked ».

 

Un exemple :

 

<h1>Question indiscrète</h1>

<p>

<form action="traitement.html" method="post">

Où habitez-vous ?

<input type="radio" name="ville" value="paris" id="paris" /><label for="paris">Dans la grande et belle ville de PARIS</label>

<input type="radio" name="ville" value="Marseille" id="Marseille" /><label for="Marseille">Là où on pêche beaucoup de sardines dans le port, MARSEILLE</label>

<input type="radio" name="ville" value="saintbouillez" id="saintbouillez" /><label for="saintbouillez">Euh, là où personne ne veut aller, à Saint-BOUILLEZ de puis en perdu du petit bois</label>

</form></p>

 

Tester la page >>

 


La liste déroulante select

 

La liste déroulante « select » permet d’afficher une liste de choix dont l’utilisateur ne pourra réaliser qu’un choix unique.

 

La syntaxe :

 

<p>

<label for="NomDeLaListe">Question à poser</label>

<select name="NomDeLaListe" id="NomDeLaListe">

 

<option value="NomDuChoix1">Text du premier choix</option>

<option value="NomDuChoix2">Text du deuxième choix</option>

<option value="NomDuChoix3">Text du troisième choix</option>

<blablabla)

</select></p>

 

La description :

 

Les attributs « for » « name » et « id » doivent recevoir la même valeur, c’est le nom que l’on donne à la liste.

 

« La question à poser » est le texte à afficher au-dessus de la liste, il doit être imbriqué entre les éléments de balises <label> et </label>.

 

Ensuite viennent les différents choix de la liste…

Chacun des choix de la liste doit avoir son propre texte bien sûr, ça coule de source !

Le texte est placé entre les éléments de balises <option> et </option>.

 

L’attribut value « » de la balise « option » précise le nom de l’élément de la liste, c’est un identifiant, il doit être unique pour chacun des éléments de la liste.

 

Attribut complémentaire :

 

L’attribut « selected » peut être placé dans l’une des balises « option ». Il permet de définir quel élément doit être sélectionné au moment de l’affichage de la liste. La valeur qu’il peut recevoir est « selected », donc : selected= »selected ».

 

Un exemple :

 

<h1>La destination de votre voyage</h1>

<p>

<form action="traitement.html" method="post">

<label for="pays">Dans quel pays désirez-vous partir ?</label>

<select name="pays" id="pays">

<option value="france">LA FRANCE</option>

<option value="italie">L'ITALIE</option>

<option value="bresil">LE BRESIL</option>

<option value="japon">LE JAPON</option>

<option value="chine">LA CHINE</option>

</select>

</form></p>

 

Tester la page >>


La balise <optgroup> :

 

La balise <optgroup> permet d’encapsuler des éléments de la liste pour définir des éléments de même catégorie.

Vous devez ouvrir la balise <optgroup> en spécifiant le nom du groupe, puis vienne les différents éléments <option> contenu dans le groupe, et pour finir, vous devez refermer le groupe par l’élément de fin </optgroup>.

Un exemple :

 

<h1>Choix d'un prénom</h1>

<p>

<form action="traitement.html" method="post">

<label for="prenom">Quel prénom désirez-vous donner à votre nouvel enfant ?</label>

<select name="prenom" id="prenom">

<optgroup label="fille">

<option value="brigitte">Brigitte</option>

<option value="margueritte">Margueritte</option>

<option value="corinne">Corinne</option>

</optgroup>

<optgroup label="garçon">

<option value="marc">Marc</option>

<option value="pascal">Pascal</option>

<option value="philippe">Philippe</option>

</optgroup>

</select>

</form></p>

 

Tester la page >>

 


Valider le formulaire via un bouton

 

Voilà, maintenant que vous avez étudié les différents types de champs que vous pouvez présenter dans un formulaire, il vous faut découvrir par quel moyen le formulaire va être validé.

 

Il existe 3 types de boutons :

  1. submit, qui valide le formulaire en exécutant le nom du fichier spécifié dans l’attribut « action » de la balise « form ».
  2. reset, qui réinitialise les différents champs du formulaire à zéro.
  3. button, qui ne fait rien de particulier, mais les langages de programmation événementiels tel que le JavaScript s’en servent pour y associer des traitements.

 

Ici nous allons donc nous intéresser aux deux premiers…

 

La syntaxe :

 

Pour le bouton de validation :

<input type="submit" value="NomDuBouton" />

Pour le bouton de réinitialisation :

<input type="reset" value="NomDuBouton" />

 

La description :

 

“NomDuBouton” est le nom du bouton affiché à l’écran, tout simplement…

Il peut être du genre : »Valider », « Enregistrer », « Effacer », « Accepter » etc.

 

Voici maintenant un exemple complet qui vous propose un formulaire digne de ce nom  !

Ce formulaire affichera une inscription simplifiée en ligne, il faudra renseigner 3 zones d’édition qui sont le nom, le prénom, le domicile, et une zone de liste déroulante contenant plusieurs pays.

 

2 boutons seront placés en pas du formulaire d’inscription, il s’agit du bouton « Enregistrer » et du bouton « Effacer ».

 

Voici le code :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Inscription</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

       <link rel="stylesheet" media="screen" type="text/css" title="MonTitre" href="styles.css" /> 

</head>

<body>

<table>

<caption>Formulaire d'inscription</caption>

<form action="traitement.html" method="post">

<tr>

<td><label for="nom">Votre nom :</label><br />

<input type="text" name="nom" id="nom" size="25" /></td>

<td><label for="prenom">Votre prénom :</label><br />

<input type="text" name="prenom" id="prenom" size="25" /></td></tr>

<tr>

<td><label for="ville">Votre domicile</label><br />

<input type="text" name="ville" id="ville" size="25" /></td>

<td><label for="pays">Votre pays</label>

<select name="pays" id="pays">

<option value="france" selected="selected">LA FRANCE</option>

<option value="chine">LA CHINE</option>

<option value="canada">LE CANADA</option>

</select></td></tr>

<tr>

<td><input type="submit" value="Enregistrer" /></td>

<td><input type="reset" value="Effacer" /></td></tr>

</form></table>

</body>

</html>

 

Tester la page >>


Définir l’ordre de tabulation via l’attribut tabindex

 

Par défaut, en circulant avec la touche tabulation à l’intérieur de votre formulaire, l’ordre de passage sur les différents champs correspond à l’ordre de l’agencement des champs à l’écran.

 

On peut néanmoins définir un ordre de tabulation par l’intermédiaire de l’attribut « tabindex » que vous pouvez placer à l’intérieure de toutes vos balises de champs.

A cet attribut, il vous suffit d’indiquer un numéro placé entre guillemets..

Par exemple, pour mettre la priorité absolue sur le champ « NomDeFamille » :

<input type="text" name="NomDeFamille" tabindex="1" />

 

 


Définir des touches de raccourcis avec l’attribut accesskey

 

L’attribut « accesskey » vous permet d’associer un raccourci clavier à un champ du formulaire.

Il vous suffit d’ajouter l’attribut « accesskey » dans la balise du formulaire et de lui affecter en valeur une lettre ».

Dans le navigateur INTERNET EXPLORER, la combinaison de la touche ALT et de la lettre spécifiée dans « accesskey » aura pour conséquence de mettre le focus sur le champ contenant l’attribut…

Il se peut toutefois que certains navigateurs choisissent une autre touche que la touche ALT.

 

Par exemple, dans INTERNET EXPLORER, pour associer le raccourci clavier ALT +E au bouton enregistrer :

<input type="submit" value"Enregistrer" accesskey="e" />

 

Tester la page >>

 


Regrouper les champs de formulaires avec fieldset legend

 

Si votre formulaire est de grande taille, vous pouvez regrouper les différents champs qui le composent par catégorie, et ce, par l’intermédiaire des balises <fieldset> et </fieldset>.

Il vous suffit d’imbriquer les champs de même catégorie à l’intérieur d’un bloc <fieldset> afin que le regroupement soit réalisé…

De plus, pour nommer chacune des catégories, vous disposez de la balise <legend>.

 

La syntaxe :

 

<p>

<form action="traitement.html" method="post">

<fieldset>

<legend>Première catégorie de champs</legend>

<label blablabla...

<input blablabla...

>label blablabla...

<input blablabla...

</fieldset>

<fieldset>

 <legend>Deuxième catégorie de champs</legend>

<label blablabla...

<input blablabla...

<label blablabla...

<input blablabla...

</fieldsect>

</form></p>

 

Voici un exemple :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Inscription</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

       <link rel="stylesheet" media="screen" type="text/css" title="MonTitre" href="styles.css" /> 

</head>

<body>

<p>ALT + R  Pour atteindre le bouton "effacer"</p>

<table>

<caption>Formulaire d'inscription</caption>

<form action="traitement.html" method="post">

<fieldset>

<legend>Coordonnées</legend>

<tr>

<td><label for="nom">Votre nom :</label><br />

<input type="text" tabindex="1" name="nom" id="nom" size="25" /></td>

<td><label for="prenom">Votre prénom :</label><br />

<input type="text" tabindex="2" name="prenom" id="prenom" size="25" /></td></tr>

<tr>

<td><label for="ville">Votre domicile</label><br />

<input type="text" tabindex="4" name="ville" id="ville" size="25" /></td>

<td><label for="pays">Votre pays</label>

<select name="pays" id="pays" tabindex="3">

<option value="france" selected="selected">LA FRANCE</option>

<option value="chine">LA CHINE</option>

<option value="canada">LE CANADA</option>

</select></td></tr>

</fieldset>

<fieldset><legend>Questions indiscrètes</legend>

<tr>

<td><label for="femme">Vous les aimez comment les femmes ?</label><br />

<select name="femme" id="femme">

<option value="blonde">Blonde</option>

<option value="brune">Brune</option>

<option value="verte">Verte</option>

</select></td>

<td>

<label for="poids">Toujours sur les femmes, quel est votre poids favoris ?</label><br />

<select name="poid" id="poids">

<option value="maigre">40 kilo</option>

<option value="normale">60 kilo</option>

<option value="forte">140 kilo</option>

<option value="bizarre">6 tonnes</option>

</select></td></tr>

</fieldset>

<fieldset><legend>Les commandes</legend>

<tr>

<td><input type="submit" value="Enregistrer" /></td>

<td><input type="reset" value="Effacer" accesskey="r" /></td></tr>

</fieldset>

</form></table>

</body>

</html>

 

Tester la page >>

 


Envoyer le formulaire par E-Mail

 

Sur le NET, vous pouvez concevoir un formulaire dont le rôle sera de vous expédier des informations saisies par les visiteurs de votre site.

Les informations du formulaire vous seront expédiées par courrier électronique via la méthode « post ». Toutefois, il faut que le visiteur ait un compte de messagerie sur son ordinateur s’il désire utiliser cet outil…

 

Voici globalement le schéma du formulaire :

 

<form action="mailto:VotreAdresseDeMessagerie" method="post" enctype="text/plain">

<!-- ici, c'est la conception du formulaire avec un bouton de type "submit" -->

 

La description :

action="mailto:VotreAdresseDeMessagerie" est l’attribut qui permet de définir l’adresse de messagerie vers lequel l’E-Mail contenant le formulaire devra être dirigé.

Vous devez écrire l’adresse de messagerie juste après « mailto: ». Cependant, vous pouvez rajouter l’objet du courrier en tant que paramètre. Dans ce cas de figure, avant de fermer les guillemets, vous placez un « point d’interrogation » suivi de « subject: » et de l’objet lui-même. Par exemple, pour envoyer un E-Mail à « toto@orange.fr » avec l’objet « prise de contact », voici ce qu’il faut écrire :

action="mailto:toto@orange.fr?subject:Prise de contact"

 

method="post" est la méthode de transfert utilisée par INTERNET.

 

enctype="text/plain" est un attribut permettant de placer le contenu du formulaire dans le corps de l’E-Mail et de façon claire.

 

Voici un exemple qui envoie le contenu du formulaire à l’adresse de messagerie « philippe.boulanger2@gmail.com ».

Le formulaire contient 4 champs, le « prénom », le « nom », « l’adresse de messagerie de l’expéditeur » et le « message » lui-même.

Cliquez ici pour télécharger la page

 

Le code :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Écrire à Philippe</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<h1>Veuillez saisir votre courrier</h1>

<p>

<form action="mailto:philippe.boulanger2@gmail.com" method="post" enctype="text/plain">

<label for="prénom">

Prénom :<br />

</label>

<input type="text" name="prénom" id="prénom" size="25" /><br />

<lable for="nom">

Nom :<br />

</label>

<input type="text" name="nom" id="nom" size="25" /><br />

<label for="EMail">

Adresse de messagerie :<br />

</label>

<input type="text" name="EMail" id="EMail" size="65" /><br />

<label for="message">

Le message :<br />

</label>

<textarea name="message" id="message" rows="25" cols="65"></textarea><br />

<input type="submit" value="Envoyer" />

</form></p>

</body>

</html>

 


Le type hidden

 

Vous connaissez d’ores et déjà les types de champs de formulaire, chaque type de champ a une structure et ses propres propriétés.

 

La différence toutefois entre les types de champs déjà vus et le type « hidden », c’est que ce dernier n’est pas visible à l’écran.

 

A quoi peut-il servir ?

Eh bien, dans le cas d’un traitement de formulaire par le biais d’un langage de programmation dynamique tel que le PHP, des champs de type « hidden » peuvent être employés pour passer des données à la page cible, celle qui est spécifiée en propriété à l’attribut « action » de la balise « form ».

 

La syntaxe :

<input type="hidden" name="NomDuChamp" value="Information à transférer" />

 

La description :

Le type de champ « hidden » n’a pas de « label » puisqu’il ne sera pas affiché dans la page Web.

 

L’attribut « name » permet, comme dans le cas des autres types de champs, de marquer une identification unique.

 

L’attribut « value » quant à lui, permet d’affecter une donnée au champ.

 

Un exemple avec un formulaire pour envoyer un courrier :

 

C’est toto, il a sur son site une page qui permet aux visiteurs de lui expédier un E-mail via un formulaire.

Rappelez-Vous que la propriété « text/plain » de l’attribut « enctype » dans la balise « form » définit la réception du contenu du formulaire directement dans le corps d’un E-mail !

 

Voici alors le code du formulaire de toto, sachant que le message indiqué dans le champ de type « hidden » ne sera pas affiché à l’écran.

Cependant, ce message sera dans le corps de l’E-mail !

D’ailleurs, il accompagnera le champ de type « textarea », dont le rôle ici est la saisie du contenu de l’E-mail.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Envoie d'un formulaire</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body>

<h1>écrire à toto</h1>

<pre>

<form action="mailto:toto@super-blague.com" method="post" enctype="text/plain">

<input type="hidden" name="entête" value="Ce message est pour toi toto" />

<label for="courrier">

Saisissez ici votre courrier :

</label>

<textarea name="courrier" rows="10" cols="70">

</textarea>

<input type="submit" value="Envoyer" />

</form></pre>

</body>

</html>

 

Si un visiteur écrit « Bonjour mon ami toto, voici ce que toto recevra par E-Mail :

 

entête=Ce message est pour toi toto
courrier=Bonjour mon ami toto !

 

Philippe BOULANGER