Chapitres :

• 01 - Introduction :
• 02 - La balise form :
• 03 - Effacer et envoyer :
• 04 - Les champs de texte :
• 05 - Les cases à cocher et les boutons radio :
• 06 - Les cases à cocher :
• 07 - Les boutons radio :
• 08 - Mon premier formulaire :
• 09 - Les menus déroulants :
• 10 - Mon second formulaire :
  
  

Qu'est qu'un formulaire?

Le formulaire HTML va vous permettre de récupérer des informations que va saisir l'internaute sur votre site.

L'internaute va saisir ses informations soit en remplissant des champs texte (input), soit sélectionnant un élément dans une liste déroulante (select) ou en sélectionnant une case à cocher (radio, checkbox).
Une fois les informations saisies, l'internaute va valider en cliquant sur un bouton de soumission (submit).

Alors les informations seront transmises soit à une adresse e-mail (mailto) soit à un cgi (Common Gateway Interface), soit à une page dynamique de type php, asp, jsp...

Un formulaire HTML se définit par la balise HTML <FORM> </FORM>.

La balise HTML <FORM> doit contenir deux attributs indispensables.

- ACTION qui définit la destination où sont envoyées les donnés, en règle générale c'est un cgi
ou une page dynamique type php ou asp...
- METHOD qui définit la méthode d'envoi (POST et GET).

Une balise <FORM> ne doit pas contenir une autre balise <FORM>.
Une page HTML peut contenir plusieurs formulaires.

Pour plus de détails sur la balise HTML <FORM> voir le chapitre HTML.

Mailto :

Nous allons étudier dans ce chapitre l'attribut METHOD de type "post" et l'attribut ACTION de type "mailto: Votre e-mail".

Nous l'écrirons :

ENCTYPE précise la méthode MINE de codification (format d'envoi) qui va être utilisé pour l'envoi en METHOD="POST".
"Text/plain" est la valeur qui doit être utilisé lorsque les informations sont envoyées par courrier électronique, ce qui est le cas car l'action est de type "mailto:Votremail".

Lorsque vous recevez le formulaire (avec cette méthode et cette action), il sera sous cette forme :

En fait, le premier mot est en général associé à l'attribut name d'une balise et le second après le = est la valeur attribuée à value de cette même balise. Il y a des exceptions que nous verrons lorsque nous étudierons la balise.

La valeur de NAME doit être la plus significative de l'information que vous demandez, la valeur ne doit pas comporter d'accent ni de virgule.

Dans un formulaire vous devez avoir obligatoirement deux boutons.

Un bouton pour réinitialiser le formulaire :

Un bouton pour envoyer le formulaire :

Value correspond au texte affiché sur le boutton.
Type définit pour ces deux boutons l'action à exécuter :

- reset pour réinitialiser
- submit pour envoyer.

Dans un formulaire, il ne peut y avoir qu'un seul bouton envoi et réinitialise.

Le résultat de l'envoi :

Le bouton" reset" n'apparaît jamais dans le résultat.
Le bouton "submit" est envoyé lors de l'envoi du formulaire. Lors de l'emploi de "Mailto" la valeur apparaît à la fin du résultat sous la forme : name= value

Pour plus de détails voir le chapitre sur la balise <INPUT>.

Il existe deux types de champs de texte :

- le champ simple d'une ligne,
- le champ multi-lignes.

Simple :

Le champ simple :

Type définit la forme de la balise <INPUT>, donc pour une zone de texte simple c'est "text".
Name donne un nom au champ texte. Très important car à ce nom est associé la valeur.
Value définit le texte mis au départ dans le champ, si le champ est vide alors value="". sachez que si vous rentrez une valeur par défaut, l'internaute sera obligé de sélectionner le texte de votre champ texte puis de l'effacer pour pouvoir écrire un nouveau texte (sauf si vous utilisez le javascript).
Size correspond à la longueur du champ, ce n'est pas des pixels, je dirais que cela correspond à l'encombrement total horizontal de la lettre la plus large (w).

Le résultat de l'envoi :

Le champ de texte apparaît sous la forme : name = value

Multi-lignes :

Le champ multi-lignes :

COLS correspond à la longueur du champ, ce n'est pas des pixels, je dirais que cela correspond à l'encombrement total horizontal de la lettre la plus large (w).
ROWS correspond à la hauteur du champ c'est à dire le nombre de ligne.

Le résultat de l'envoi :

Le champ de texte apparaît sous la forme : name = value

Il est important de faire la différence entre le bouton radio et la case à cocher.

La case à cocher permet de faire des plusieurs choix sur un ensemble de propositions.

Le bouton radio permet de faire un choix sur un ensemble de propositions.

Checkbox :

La case à cocher s'écrit :

Type définit la forme de la balise <INPUT>, donc pour une case à cocher, c'est "checkbox".
Name donne un nom à la case. Très important car à ce nom est associé à la valeur (value) lorsque l'on réceptionne le formulaire.
Value est la valeur de la sélection.

Le résultat de l'envoi :

Le champ de texte apparaît sous la forme : name = value

Pour plus de détails voir le chapitre sur la balise <INPUT>.

Radio :

Le bouton radio s'écrit :

Type définit la forme de la balise <INPUT>, donc pour un bouton radio, c'est "radio".
Name donne un nom. Très important car à ce nom est associé une valeur qui est en faite le texte saisit par l'internaute.
Pour faire un seul choix dans un ensemble de propositions, le nom doit être identique.
Value c'est la valeur de la sélection.

Le résultat de l'envoi :

Le champ de texte apparaît sous la forme : name = value

Pour plus de détails voir le chapitre sur la balise <INPUT>.

Nous allons créer un formulaire qui va comporter un champ pour rentrer votre prénom, une zone de choix où vous allez choisir votre sexe et une zone d'information générale.

Exercice :

Voici à quoi doit ressembler votre formulaire.

Lorsque vous envoyez le formulaire, vous devriez en avoir un exemplaire dans votre boite d'envoi (élément envoyé).
Regardez ce mail c'est sous cette forme que vous recevrez le formulaire.

Vous pouvez faire des menus déroulant pour par exemple remplacer vos boutons radio, ou parce que vous n'avez pas assez de place...

On écrira :

Name est le nom de la sélection, il est associé à la valeur de la balise <OPTION>.
Size détermine le nombre d'options visibles. Il doit être < ou = au nombre de balises <OPTION>.
Multiple signifie que l'on peut faire plusieurs sélections. si vous ne le mettez pas, l'internaute ne pourra faire qu'une sélection.

La balise <OPTION> correspond à un élément de la liste.

Vous pouvez donc avoir plusieures balises <OPTION>

Tous ce qui sera entre <OPTION> et </OPTION> sera visible par l'internaute.
Value est la valeur renvoyée dans le formulaire, elle sera associée Name de la balise <SELECT>.

Le résultat de l'envoi :

Le champ de texte apparaît sous la forme : name = value

Pour plus de détails voir le chapitre sur la balise <SELECT> et <OPTION>.

Exercice :

Voici un exemple de formulaire à reproduire.