Formulaires

Formulaires

Les formulaires

Les formulaires permettent de récolter des informations relatives à l'utilisateur : les réponses à un formulaire sont traitées sur le serveur par un programme CGI.

Un CGI (Commun Gateway Interface) est un langage standard permettant la génération de scripts de dialogue entre le client et le serveur) : la réponse à un formulaire est transférée au serveur, traitée par le programme CGI et renvoyée alors à l'adresse référencée.

Déclaration du formulaire

<FORM> ... </FORM>: Définition du formulaire, tout ce qui se situe entre les instructions de début et de fin de formulaire constitue l'interface d'échange entre l'utilisateur et le serveur.

Attributs :

ACTION="url": Spécifie l'adresse URL (de type: http, ftp, mailto, news,...) qui va recevoir les informations saisies dans le formulaire.

METHOD="GET|POST": Définit la méthode d'accès au serveur http : GET est utilisée quand l'objet de la demande est d'obtenir de l'information du serveur, POST permet de changer ou d'ajouter des informations au serveur par l'envoi des messages complets.

NAME="nom": Spécifie le nom du formulaire.

TARGET=cible: Spécifie un cadre destination dans une partition d'écran comme page de résultat.

Spécificité Netscape :

ENCTYPE="text/plain": Spécifie le format des données envoyées par le formulaire dans le cas où un protocole n'imposerait pas un format précis.

Champs de formulaires

Dans le cadre de cette description, il ne sera fait appel qu'à l'envoi d'une réponse au formulaire sous forme de courrier électronique, action des plus courantes.

Champs classiques

<INPUT TYPE="TEXT">: Définit une zone de saisie de type boîte de texte.

<INPUT TYPE="PASSWORD">: Détermine une zone de saisie de type mot de passe.

Attributs :

MAXLENGHT="?": Détermine le nombre maximal de caractères pouvant être inscrit dans la zone de saisie.

NAME="nom": Spécifie un nom identificateur de la zone de saisie.

SIZE="?": Détermine la taille de la zone de saisie visible à l'écran en nombre de caractères.

VALUE="?": Valeur identificatrice attribuée au champ et figurant par défaut dans la zone de saisie.

Exemple :

Saisie de type texte


  <FORM ACTION="mailto:max@igm.fr" METHOD="POST">


     Champ2 :<BR>

     <INPUT TYPE="TEXT" NAME="Champ1" SIZE="25" MAXLENGTH="50">


     Champ1 :<BR>

     <INPUT TYPE="TEXT" NAME="Champ2" SIZE="25" MAXLENGTH="50">


  </FORM>

Saisie de type mot de passe


  <FORM ACTION="mailto:max@igm.fr" METHOD="POST">


     Mot de passe :<BR>

     <INPUT TYPE="PASSWORD" NAME="Password" SIZE="10" MAXLENGTH="10">


  </FORM>

Spécificité Internet Explorer :

DISABLED: Désactive un élément du formulaire.

READONLY: Spécifie que la zone de formulaire est en mode lecture seulement et qu'il est impossible d'écrire à l'intérieur de l'élément.

Boutons radios

<INPUT TYPE="RADIO">: Bouton radio, permet d'insérer des cases à cocher exclusives les unes par rapport aux autres.

Attributs :

CHECKED: Détermine un bouton comme étant coché par défaut.

NAME="nom": Spécifie un nom identificateur du bouton.

VALUE="?": Valeur identificatrice attribuée au bouton.

Exemple :


  <FORM ACTION="mailto:max@igm.fr" METHOD="POST">


  Titre :

  <BR>

     <INPUT NAME="Choix" CHECKED TYPE="RADIO" VALUE="1">Choix1

  <BR>

     <INPUT NAME="Choix" TYPE="RADIO" VALUE="2">Choix2

  <BR>

     <INPUT NAME="Choix" TYPE="RADIO" VALUE="3">Choi3


  </FORM>

Spécificité Internet Explorer :

DISABLED: Désactive le bouton.

Cases à cocher

<INPUT TYPE="CHECKBOX">: Case à cocher, permet d'insérer des cases à cocher non exclusives les unes par rapport aux autres.

Attributs :

CHECKED: Détermine une case comme étant cochée par défaut.

NAME="nom": Spécifie un nom identificateur à la case à cocher.

VALUE="?": Valeur identificatrice attribuée à la case à cocher.

Exemple :


  <FORM ACTION="mailto:max@igm.fr" METHOD="POST">


  Cases &agrave; cocher :

  <BR>

     <INPUT NAME="Choix" CHECKED TYPE="CHECKBOX" VALUE="1">
Choix1

  <BR>

     <INPUT NAME="Choix" TYPE="CHECKBOX" VALUE="2">
Choix2

  <BR>

     <INPUT NAME="Choix" TYPE="CHECKBOX" VALUE="3">
Choix3

  <BR>

     <INPUT NAME="Choix" TYPE="CHECKBOX" VALUE="4">
Choix4

  <BR>

     <INPUT NAME="Choix" TYPE="CHECKBOX" VALUE="5">
Choix5


  </FORM>

Spécificité Internet Explorer :

DISABLED: Désactive la case à cocher.

Menus de type liste

<SELECT> ... </SELECT>: Boîte liste, permet de créer deux types de listes : les listes simple et les listes déroulante (menu Pop-Up).

Attributs :

SIZE="?": Menu de type liste, définit le nombre d'entrées possibles de la liste (valeur supérieure à 1).

Lorsque le nombre d'otions déclarées dans la liste est supérieur au nombre défini d'entrées possibles, le navigateur affiche un ascenceur à droite de la liste.

SIZE="1": Menu Pop-Up, affiche une liste déroulante.

MULTIPLE: Spécifie la possibilité de sélectionner une ou plusieurs options pour une boîte liste normale en maintenant enfonçée la touche "contrôle" du clavier.

NAME="nom": Attribue un nom identificateur à la liste.

Options des listes :

<OPTION> ... <OPTION>: Définit une entrée de la liste, il y a autant d'options que d'entrées possibles.

<OPTION VALUE="?">: Attribue une valeur identificatrice à une entrée de la liste.

<OPTION SELECTED>: Attribue le texte de l'entrée de la liste comme texte affiché par défaut dans le champ d'un menu Pop-Up.

Exemple :

Liste normale à choix unique
`<FORM ACTION="mailto:max@igm.fr" METHOD="POST"> <SELECT NAME="voir" SIZE="5"> <OPTION VALUE="A">Choix A</OTION> <OPTION VALUE="B">Choix B</OTION> <OPTION VALUE="C">Choix C</OTION> <OPTION VALUE="D">Choix D</OTION> <OPTION VALUE="E">Choix E</OTION> </SELECT> </FORM>`
Liste normale à choix multiple et ascenseur
`<FORM ACTION="mailto:max@igm.fr" METHOD="POST"> <SELECT NAME="voir" SIZE="4" MULTIPLE> <OPTION VALUE="A">Choix A <OPTION VALUE="B">Choix B</OPTION> <OPTION VALUE="C">Choix C</OPTION> <OPTION VALUE="D">Choix D</OPTION> <OPTION VALUE="E">Choix E</OPTION> <OPTION VALUE="F">Choix F</OPTION> <OPTION VALUE="G">Choix G</OPTION> </SELECT> </FORM>`
Menu Pop-Up
`<FORM ACTION="mailto:max@igm.fr" METHOD="POST"> <SELECT NAME="age" SIZE="1"> <OPTION VALUE="A" SELECTED>Choix A</OPTION> <OPTION VALUE="B">Choix B</OPTION> <OPTION VALUE="C">Choix C ans</OPTION> <OPTION VALUE="D">Choix D</OPTION> <OPTION VALUE="E"> E</OPTION> </SELECT> </FORM>`

Spécificité Internet Explorer :

ALIGN="ABSBOTTOM|ABSMIDDLE|BASELINE|BOTTOM|LEFT|MIDDLE|RIGHT|TEXTTOP|TOP": Permet de spécifier un alignement.

DISABLED: Désactive la liste.

READONLY: Spécifie que la zone de formulaire est en mode lecture seulement et qu'il est impossible d'écrire à l'intérieur de l'élément.

Champs multilignes

<TEXTAREA> ... </TEXTAREA>: Boîte de texte multiligne, définit un champ de saisie rectangulaire.

Attributs

NAME="nom">: Spécifie un nom identificateur à la case à cocher.

ROWS="?": Définit le nombre de lignes du champ de saisie.

COLS="?": Définit le nombre de colonnes du champ de saisie (nombre de caractères).

Exemple :


  <FORM ACTION="mailto:max@igm.fr" METHOD="POST">


  Champ multiligne :

  <BR><BR>

  <TEXTAREA NAME="comment" ROWS="4" COLS="30">

  Tapez vos commentaires

  </TEXTAREA>


  </FORM>

Spécificité Internet Explorer :

ALIGN="ABSBOTTOM|ABSMIDDLE|BASELINE|BOTTOM|LEFT|MIDDLE|RIGHT|TEXTTOP|TOP": Permet de spécifier un alignement.

DISABLED: Désactive un élément de la liste.

READONLY: Spécifie que la boîte multiligne est en mode lecture seulement et qu'il est impossible d'écrire à l'intérieur de l'élément.

Boutons d'envoi

INPUT TYPE="SUBMIT": Bouton poussoir permettant d'envoyer les informations saisies dans le formulaire.

Attributs :

NAME="nom": Attribue un nom identificateur au bouton.

VALUE="texte": Texte du bouton.

Exemple :

Ceci est un exemple, l'adresse à laquelle le formulaire est envoyé n'est pas attribuée : en cliquant sur le bouton un message du navigateur s'affichera, cliquez sur "Annuler".


  <FORM ACTION="mailto:max@igm.fr" METHOD="POST">


  Champ de saisie :

  <BR>

  <TEXTAREA NAME="comment" ROWS="4" COLS="30">  </TEXTAREA>


  <BR>

  <INPUT TYPE="SUBMIT" VALUE="Envoyez">


  </FORM>

Autres boutons

Boutons "Image"

<INPUT TYPE="IMAGE">: Permet de se servir d'une image comme bouton pour envoyer le formulaire.

Attributs :

SRC="url": Définit le chemin d'accès à l'image utilisée.

ALIGN="ABSBOTTOM|ABSMIDDLE|BASELINE|BOTTOM|LEFT|MIDDLE|RIGHT|TEXTTOP|TOP": Permet d'aligner l'image du bouton de formulaire.

NAME="nom": Attribue un nom identificateur au bouton.

Bouton "Exécution"

<INPUT TYPE="BUTTON">: Bouton poussoir permettant habituellement l'exécution d'un script.

Attributs :

NAME="nom": Attribue un nom identificateur au bouton.

VALUE="texte": Texte du bouton.

Bouton "Recommencer"

<INPUT TYPE="RESET">: Bouton poussoir permettant d'effacer le formulaire pour recommencer la saisie.

Attributs :

NAME="nom": Attribue un nom identificateur au bouton.

VALUE="texte": Texte du bouton.