Les formulaires

Principe

Les formulaires vont permettre au visiteur d'introduire des données dans des champs, zones prévues à cet effet.

Le but est que ces données soient récupérées et exploitées par le concepteur du site.

La rédaction d'un formulaire va donc répondre à deux problématiques:

1. La récolte des informations:
   • Quelles informations récupérer?
   • Quels champs prévoir?
   • Comment les disposer?
     (Pour cela, on utilisera la facilité des tableaux invisibles!)
2. Le traitement des informations:
   (Qui sera abordé dans le cours "HTML + PHP")

Démarrer un formulaire

Comme tout autre élément d'une page HTML, les formulaires sont encadrés par des balises.

Un formulaire commence par la balise <FORM METHOD=POST ACTION="Page de traitement des données"> et se termine par </FORM>

METHOD=POST signifie que les données seront "postées" vers un fichier dont les références figurent au niveau de ACTION="..." (voir détails dans le cours "HTML+PHP").

Créer une petite zone de texte

L'introduction d'informations textuelles (nom, adresse électronique, numéro de téléphone,...) se fera dans de petites zones de texte. Voici un exemple dont la longueur du champ est de 20 caractères et dans lequel vous pouvez au maximum en introduire 30 (essayez pour voir):

Ce champ a été réalisé grâce à la balise suivante:

Dans cette balise, on peut distinguer différents éléments:

1. INPUT qui signale la demande d'insertion d'un champ
2. TYPE qui signale le type d'information qui sera saisi dans le champ
3. NAME qui signale le nom que prendra la variable qui contiendra l'information saisie (capital pour le traitement, attention à la syntaxe des variables et à l'utilisation des majuscules et minuscules)
4. SIZE qui signale la longueur que devra occuper le champ
5. MAXLENGTH qui signale le maximum de caractères qui pourront être saisis dans le champ
6. Remarque, il n'y a pas de balise fermante, c'est un élément autonome qui existe par lui-même.

Remarque: il n'est pas prévu de champ particulier (TYPE) pour les nombres entiers ou réels. Ceux-ci seront donc saisis dans un champ de type texte. Au concepteur du formulaire de vérifier les contenus avant de les accepter ou de signaler une erreur.

Saisie d'un mot de passe

Cet élément paraît inutile dans l'exercice qui nous occupe, mais tant qu'à faire...

L'introduction d'un mot de passe, d'un numéro de carte de crédit,... se fera dans une petite zone prévue à cet effet: les caractères (lettres ou chiffres) seront automatiquement transformés en "***" afin que le mot de passe reste discret. Voici un exemple dont la longueur du champ et le maximum permis sont de 12 caractères (essayez pour voir):

Ce champ a été réalisé grâce à la balise suivante:

La nouveauté de cette balise par rapport à la précédente est que le type a été changé en TYPE="password".

Créer une grande zone de texte

L'introduction d'un commentaire plus long (avis, suggestions, questions,...) nécessite une grande zone de texte. Voici un exemple dont la longueur du champ est de 20 caractères et qui peut contenir 5 lignes (essayez pour voir):

Ce champ a été réalisé grâce aux balises suivantes:

Dans cette balise, on peut distinguer différents éléments:

1. Pas de INPUT, celui-ci a été remplacé par TEXTAREA qui signale la demande d'insertion d'un grand champ de texte.
2. NAME qui signale le nom que prendra la variable qui contiendra le texte saisi (capital, voir ci-dessus).
3. ROWS qui signale le nombre de lignes du champ
4. COLS qui signale le nombre de colonnes (le nombre de caractères par ligne) du champ
5. WRAP signale que le retour à la ligne dans le champ se fera de façon automatique
6. Une balise de fermeture </TEXTAREA> est nécessaire.

Création de cases à cocher

Dans le cas où plusieurs options peuvent être choisies simultanément, vous pouvez créer des cases à cocher. Voici un exemple:

Ces cases à cocher ont été réalisées grâce aux balises suivantes:

Dans cette balise, on peut distinguer différents éléments:

1. INPUT qui signale la demande d'insertion d'un champ
2. TYPE qui signale qu'il s'agit de cases à cocher (checkbox)
3. NAME qui est le nom correspondant à l'ensemble des cases à cocher.
4. VALUE, étant donné que toutes les cases à cocher portent le même nom, il faut pouvoir distinguer les cases qui auront été cochées: cela se fera en se demandant si telle ou telle valeur est cochée ou non.
5. Après chaque balise vient le texte correspondant qui sera affiché à l'écran à côté de la case à cocher.

Remarque: la disposition des cases à cocher est libre, elles peuvent se trouver en dessous, au-dessus, à gauche ou à droite du texte. On veillera toutefois (grâce aux tableaux invisibles) à les disposer de façon harmonieuse.

Création de boutons d'option

Dans le cas des cases à cocher, il est possible de cocher plusieurs cases à la fois.

Dans certains cas, le fait de faire un choix exclut toutes les autres options (homme - femme, tranches d'âges, pays natal,...). Les cases à cocher ne sont donc plus utilisables, il faut les remplacer par les boutons d'option dans lesquels un seul choix peut être validé. Voici un exemple, essayez-le et comparez son comportement par rapport aux cases à cocher:

Ces boutons d'option ont été réalisés grâce aux balises suivantes:

La différence par rapport aux cases à cocher c'est que le "TYPE" a été remplacé par "radio"

En revanche, tout comme dans les cases à cocher et les menus (ci-dessous), il est possible de sélectionner un choix par défaut en signalant, à côté de ce choix, la mention CHECKED. Ceci n'affecte en rien le comportement des éléments.

Création d'un menu

Lorsque le nombre de cases d'option (un seul choix) est trop important, il est possible de remplacer l'ensemble par un menu qui prendra beaucoup moins de place. Voici le choix précédent remplacé par un menu, essayez-le pour voir son comportement.

Ces boutons d'option ont été réalisés grâce aux balises suivantes:

Dans ces balises, on peut distinguer différents éléments:

1. SELECT qui signale le début d'un menu
2. NAME qui signale le nom de la variable qui correspond au menu (capital pour le traitement, attention à la syntaxe des variables et à l'utilisation des majuscules et minuscules)
3. SIZE qui signale le nombre de lignes qui seront visibles dans le menu
4. OPTION qui signale chaque fois l'option suivante du menu
5. VALUE, étant donné que le nom du menu est unique, il faut pouvoir distinguer l'élément qui aura été sélectionné: cela se fera en se demandant si tel ou tel contenu a été coché ou non.
6. SELECTED permet de sélectionner un choix par défaut, n'affecte en rien le fonctionnement du menu.
7. Après chaque balise vient le texte correspondant qui sera affiché à l'écran dans la barre du menu.
8. La balise de fermeture du menu /SELECT

Création d'un bouton de soumission

Un bouton doit être présent afin que le visiteur puisse cliquer dessus quand il a fini de compléter le formulaire.

Ce bouton se crée automatiquement (cliquez dessus) et aura l'aspect suivant:

Ce bouton est créé grâce à la balise suivante:

Automatiquement, le traitement défini dans la balise <FORM ...> va être exécuté.

Création d'un bouton de réinitialisation

Au cas où le visiteur voudrait recommencer son formulaire à zéro, il est possible de placer (généralement juste à côté du bouton de soumission) un bouton de réinitialisation du formulaire.

Ce bouton aura l'aspect suivant:

Ce bouton est créé grâce à la balise suivante:

Automatiquement, tous les contenus des champs seront effacés et les options définies par "CHECKED" et "SELECTED" seront remises dans leurs états initiaux.

Et voilà !!!

Et voilà, vous en connaissez maintenant assez pour réaliser toute la partie HTML de votre site.

Il y a encore bien des points à aborder, mais le but n'est pas de faire de vous des experts en HTML. Sachez simplement que, comme dans beaucoup de domaines, on en connaît si peu.

Bon amusement

Et rendez-vous dans le second module de cours: le Langage PHP

◊ ◊ ◊

© Rupert Meurice de Dormale 2003