UNS
DSI
Nephi

10. Les Formulaires - H.T.M.L.

Date de mise à jour : 9 avril 2004


Les clients évolués supportent les formulaires.
Un formulaire est une fiche que l'utilisateur peut remplir, ces informations ainsi saisies sont traitées par le serveur WWW à l'aide d'un programme CGI (Common Gateway Interface).

Un formulaire commence et finit par

  <FORM ACTION METHOD>
  </FORM>
    avec ACTION = "programme executable ou shell"
         METHOD = GET
                  POST
  

Il existe plusieurs types de champs :

  • Bouton
    <INPUT TYPE NAME VALUE CHECKED>
    </INPUT>
      avec TYPE = RADIO     pour les boutons multiples
                  CHECKBOX  pour les cases à cocher
                  SUBMIT    pour envoyer le formulaire une fois rempli
                  RESET     pour effacer le contenu du formulaire
           NAME = "un nom"  qui identifie le bouton
           VALUE= "valeur"  donnée au bouton lorsqu'il est selectionné
           CHECKED          signale un bouton par défaut (RADIO) ou
                            une case cochée avant saisie (CHECKBOX)
    
           TYPE = IMAGE     identique au SUBMIT mais le bouton est remplacé
                            par une image de votre choix
           NAME = "un nom"  qui identifie le bouton
           SRC  = "image"   nom du fichier image
           ALIGN = BOTTOM   valeur par défaut
                            LEFT, RIGHT, TOP, ABSMIDDLE, ABSBOTTOM,
                            TEXTTOP, MIDDLE, BASELINE
                            sont les autres valeurs possibles
    
  • Sélection d'un fichier
    <INPUT TYPE NAME>
    </INPUT>
      avec TYPE = FILE      pour permettre l'envoi d'un fichier
           NAME = "un nom"  qui identifie le champ texte
    
  • Texte libre sur une ligne
    <INPUT TYPE NAME SIZE>
    </INPUT>
      avec TYPE = TEXT      pour faire saisir du texte
                  PASSWORD  les caractères saisis sont représentes
                            par des '*'
                  HIDDEN    le champ est caché : utile pour transmettre
                            des informations non visibles.
           NAME = "un nom"  qui identifie le champ texte
    
  • Texte libre sur plusieurs lignes
    <TEXTAREA NAME ROWS COLS>
    </TEXTAREA>
      avec NAME = "un nom"  qui identifie le champ texte
           ROWS = nombre de lignes visibles
           COLS = nombre de colonnes visibles
    
  • Menu
    <SELECT NAME>
    </SELECT>
      avec NAME = "un nom"  qui identifie le menu
    <OPTION SELECTED>
    <OPTION>
      représente chaque choix du menu
      avec SELECTED   qui signale le choix par défaut
    

Exemple de formulaire simple incluant les quatre types de champ et faisant appel à un programme /cgi-bin/cours1 écrit en langage C, affichant les données saisies une fois la touche ENVOYER activée.
Après adaptation pour vos besoins, compilez ce programme avec util.o fourni par le NCSA dans cgi-src.

Dans le répertoire cgi-src, rajouter les deux lignes suivantes dans le fichier Makefile

          cours1:  cours1.o  util.o
                  $(CC)  cours1.o  util.o  -o  ../cgi-bin/cours1
Puis taper la commande
          make cours1

Un moyen simple de recevoir les résultats de son formulaire est d'utiliser la messagerie.
Pour que le texte soit lisible, il faut utiliser l'argument ENCTYPE de cette façon :

Browser=

<FORM ACTION="mailto:manas@unice.fr" METHOD=POST ENCTYPE="text/plain">


Browser=

<P>
<H3 ALIGN=CENTER>ENQUETE sur la SATISFACTION des UTILISATEURS</H3>
<FORM ACTION="/cgi-bin/cours1" METHOD=POST>
<PRE>
     <INPUT TYPE=RADIO NAME=SECTEUR1 VALUE="UNIV" CHECKED>  Universitaire
     <INPUT TYPE=RADIO NAME=SECTEUR1 VALUE="CNRS">  C.N.R.S.
     <INPUT TYPE=RADIO NAME=SECTEUR1 VALUE="INSE">  I.N.S.E.R.M.
     <INPUT TYPE=RADIO NAME=SECTEUR1 VALUE="PUBL">  Autre PUBLIC
     <INPUT TYPE=RADIO NAME=SECTEUR1 VALUE="PRIV">  Privé
<P>
         Vos Nom et prénom : <INPUT TYPE=TEXT NAME=NOM1 SIZE=30>
<P>
Votre adresse électronique : <INPUT TYPE=TEXT NAME=ADR1 SIZE=30>
<P>
Je suis belle/beau<INPUT TYPE=CHECKBOX NAME=BEAU VALUE="beau">,
             jeune<INPUT TYPE=CHECKBOX NAME=JEUNE VALUE="jeune">,
             riche<INPUT TYPE=CHECKBOX NAME=RICHE VALUE="riche">,
    en bonne santé<INPUT TYPE=CHECKBOX NAME=SANTE VALUE="en bonne sante">

Votre opinion <SELECT NAME=OPINION1> <OPTION>Très satisfait <OPTION SELECTED>Satisfait <OPTION>Indifférent <OPTION>C'est nul !! </SELECT> <P> Vos commentaires <TEXTAREA NAME=COM1 ROWS=3 COLS=40></TEXTAREA> <P> <INPUT TYPE=SUBMIT VALUE="Envoyer"> <INPUT TYPE=RESET VALUE="Annuler"> <INPUT TYPE=IMAGE SRC="/images/go.gif" ALIGN=ABSMIDDLE> </PRE> </FORM>

Browser=

ENQUETE sur la SATISFACTION des UTILISATEURS

       Universitaire
       C.N.R.S.
       I.N.S.E.R.M.
       Autre PUBLIC
       Privé

Vos Nom et prénom :

Votre adresse électronique :

Je suis belle/beau, jeune, riche, en bonne santé

Votre opinion

Vos commentaires

Remarque : Dans cet exemple le bouton "Envoyer" et l'image ont la même fonction.
En réalité on ne met que l'un ou l'autre.


Accueil

Cours HTML

Menu
Introduction à HTML
Les en-têtes
Les délimiteurs
Les styles
Les listes
Les caractères spéciaux
et lettres accentués

Les images
Les images réactives
Les liens
Les formulaires
Les tableaux
Les cellules (frames)
Divers

Index

Sécurité

Pointeurs utiles

Version 1.7 : 8 avril 2002