INFORMATIQUE

  VI. Formulaires HTML

     1. Présentation

Jusqu'ici, les pages HTML sont des documents passifs, à consulter. L'utilisateur parcours des pages, mais ne peut pas écrire, fournir des informations, remplir un formulaire et le transmettre au serveur.
Les seules initiatives attendues de la part de l'utilisateur sont des choix de " navigation " qui lui sont proposés sous forme d'hyperliens cliquables.

Les formulaires HTML (FORMS en anglais) sont des ensembles de composants, appelés aussi champs qui permettent à l'utilisateur d'entrer des informations, d'exprimer ses choix, de saisir du texte…

Bien sûr les réactions à apporter à ces informations doivent être prévues à l'avance, et donc doivent être programmées.

Les programmes en général placés sur le serveur gèrent le dialogue avec le client-utilisateur.
Le langage JavaScript, plus limité, permet l'insertion de petits programmes dans les pages HTML, les rendant ainsi interactives. Il est ainsi possible d'effectuer des traitements à partir des données entrées par l'utilisateur.

2. La balise FORM

Toute la partie formulaire de la page doit se trouver entre les marqueurs
<FORM>…</FORM>. Cette balise sert de conteneur pour accueillir les éléments ou composants du formulaire, comme par exemple un bouton, une ligne de texte, une liste de choix…
Chacun de ces composants s'y trouve déclaré et créé individuellement par une balise qui commence généralement par INPUT ou par SELECT.

Voici un exemple significatif qui regroupe la plupart des catégories de composants que peut contenir une formulaire HTML.
Chaque composant sera ensuite étudié en détail.

3. Un exemple complet

4. Fiche de renseignements

5. Champs de texte

a) Ligne de texte

Les divers paramètres :

· TYPE= "text " est facultatif, car il s'agit du type de champ par défaut (si on ne précise pas).
· NAME pour préciser le nom du champ (utile pour la programmation)
· VALUE pour donner un texte visible au champ
· SIZE fixe la longueur visible du champ (éventuellement son contenu défile vers la gauche)
· MAXLENGTH pour limiter le nombre de caractères pouvant être entrés dans le champs

Exemples :

b) Champ mot de passe

Quelquefois on ne veut pas que le texte tapé par l'utilisateur apparaisse à l'écran.
En particulier s'il s'agit d'un mot de passe ! Pour cela, on utilise le composant dont le type est : TYPE=PASSWORD.

Exemple :

c) Zone de texte multiligne

Pour permettre à l'utilisateur de saisir de plusieurs lignes, on utilise le composant <TEXTAREA>

Les divers paramètres :

· ROWS pour préciser le nombre de lignes de la fenêtre de saisie
· COLS pour préciser le nombre de colonnes
· <TEXTAREA>texte </TEXTAREA>le texte inséré est directement affiché tel quel  l'utilisateur peut l'effacer.

Exemple :

6. Liste de sélection

Pour permettre un choix dans une liste de plusieurs options présentées sous forme de liste déroulante, on utilise la balise <SELECT>

a) Les divers paramètres :

•  <OPTION> pour introduire chaque option dans la liste.
• SIZE=... pour préciser le nombre de lignes visibles. S'il y a plus d'options, la liste pourra être parcourue à l'aide d'une barre de défilement.
• <OPTION SELECTED> pour sélectionner cette option par défaut.
• <SELECT MULTIPLE> l'attribut facultatif MULTIPLE autorise à sélectionner plusieurs options dans la liste.

Exemples :

                                                             première
                                                             terminale
Vous êtes inscrit(e) dans une classe de : section BTS

                                                       anchois
                                                       tomate
Que désirez vous dans votre pizza ? olives

7. Cases à cocher

Afin de répondre à des questions du type Oui/Non ou Vrai/faux, on utilise des boîtes à cocher avec la balise :

a) Les divers paramètres 

• <TYPE ="checkbox" > est indispensable pour produire une boite à cocher
• NAME= ".. " s'il y a plusieurs boites, chacune doit avoir un nom spécifique
• CHECKED pour cocher par défaut la boite (donc répondre Vrai par défaut).

 Exemple :

Déjà client ?

Demande d'une brochure

8. Boutons de sélection (boutons radio)

Le type RADIO vous permet de définir des boutons radio. Ils sont utilisés lorsque l'utilisateur doit faire un choix entre plusieurs options concurrentes, qui s'excluent mutuellement.
Ils jouent ainsi un rôle analogue aux listes de sélection.
Il faut donc indiquer le groupe des boutons dans lequel ce choix exclusif doit s'exercer, en leur donnant un même nom (la valeur de l'attribut NAME). L'utilisateur ne pourra alors sélectionner qu'un seul bouton radio à la fois dans chaque groupe.

a) Les divers paramètres :

• <TYPE="radio" > est indispensable pour produire des boutons radio
• NAME= "nom " l'ensemble des boutons doit porter le MEME nom
• VALUE= "…" chaque bouton radio doit posséder une valeur spécifique pour différencier les options.
• CHECKED pour désigner LE bouton sélectionné par défaut.
  

Exemple :

Vous habitez :

* Rabat * Casa * Marrakech * Tanger

9. Boutons de commande

Les boutons servent à recevoir des "clics". Leur principale fonction est de permettre à l'utilisateur de déclencher des évènements auxquels seront rattachés des fonctions.

a) Boutons communs

La valeur de l'attribut VALUE est le texte gravé sur le bouton.
Un bouton sert essentiellement à déclencher des traitements locaux, par appel d'une fonction écrite en langage JavaScript.

b) Bouton de validation

Ce bouton sert à valider les informations saisies dans les champs du formulaire. Il provoque l'expédition de ces informations soit sur le serveur pour y être traitée, soit en message électronique ou bien

c) Bouton de réinitialisation

Ce bouton remet le formulaire dans son état initial, en réinitialisant les valeurs par défaut.

10. Transmission des données

La balise FORM possède plusieurs attributs, permettant de spécifier ce qui doit être fait lorsque l'utilisateur veut envoyer les données au serveur.

Attribut action

<FORM ACTION=url "…> permet d'indiquer l'URL (de protocole : http, ftp, gopher, file, mailto, news, telnet,…) qui va recevoir les informations entrées dans le formulaire, lorsque l'on cliquera sur le bouton de validation.
Plus précisément, l'URL est l'adresse d'un programme (un script) qui va récupérer les données et les traiter. Si le champ ACTION est absent, l'URL sera celle du document courant.

Attribut method

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, méthode par défaut, consiste à concaténer les données du formulaire à l'URL spécifiée dans ACTION, après avoir inséré un point d'interrogation.
  Ces données sont incluses sous forme d'une liste non-champ=valeur-champ.
  On obtient alors une requête adressée au serveur, du genre :
  http://serveur/chemin/prog.html?champ1=valeur1&champ2=valeur2&...
• La méthode POST génère une requête http spéciale qui envoie les données au serveur (plutôt qu'en l'accolant à l'URL). Il est recommandé d'utiliser la méthode POST.