INFORMATIQUE

Les formulaires apportent une grande interactivité à vos pages Web, et permettent à l'utilisateur de saisir de l'information qui sera ensuite envoyée au serveur pour traitement. Tous les hébergeurs ne proposent ou ne permettent pas l'utilisation de formulaires CGI (Common Gateway Interface) sur leur serveur, toutefois, une des actions possibles déclenchées par un formulaire est l'envoi d'un courrier électronique qui récapitule toutes les informations entrées par le visiteur.

     Les formulaires présentent à l'utilisateur des zones de texte, des choix multiples par le biais de boutons cliquables, de listes, etc... .

Vous trouverez ci-dessous les différents types de champs que vous pouvez combiner dans un formulaire. La commande principale pour créer un formulaire dans un document HTML est la balise <FORM> </FORM> dont la syntaxe est :

          NAME="votreformulaire"

              le contenu du formulaire
                <INPUT TYPE=... >
        </FORM>

• ACTION permet de spécifier l'adresse (URL "programme exécutable ou shell"ou e-mail) vers laquelle les données seront envoyées ,  

• METHOD permet de sélectionner une méthode d'envoi des données,

• ENCTYPE permet de choisir le format dans lequel les données sont envoyées , 

• TARGET (facultatif) permet de choisir un cadre vers lequel envoyer les données dans le cas de l'utilisation de JavaScript .

1- La création d'une zone de texte simple permettant la saisie (ou l'affichage) d'un texte très court  : La balise associée est INPUT TYPE="TEXT" :


Syntaxe :

<INPUT TYPE="text" NAME="nom_du_champ" VALUE="texte_inial" SIZE="taille" MAXLENGHT="taille_maximum">

• NAME permet de préciser le nom du champ .
• VALUE permet de donner une valeur par défaut au champ.
• SIZE fixe la longueur visible du champ. Notez que la valeur par défaut est 20 caractères.
• MAXLENGTH permet de limiter le nombre de caractères pouvant être saisis dans le champ

<input type="text" name="T1" size="20">

2- La création d'un bouton checkbox formé de case à cocher  permettant de faire une série de choix parmi plusieurs propositions :  La balise associée est INPUT TYPE="CHECKBOX":

Syntaxe :

<INPUT TYPE="checkbox" NAME="nom_groupe " VALUE="valeur" [CHECKED]>

TYPE="checkbox":est indispensable pour avoir une case à cocher

NAME="nom_groupe: en cas de présence de plusieurs groupe, chacun doit avoir un nom spécifique.

[CHECKED]:option choisie par défaut

Exemple :

<form>Quelle est votre lecture préférée ? 

<input type="checkbox" name="choix1" value="ON">Policière 

<input type="checkbox" name="choix2" value="ON" checked>Aventure

<input type="checkbox" name="choix3" value="ON">Scientifique 

<input type="checkbox" name="choix4" value="ON">Autre 

</form>

Résultat :

Quelle est votre lecture préférée ?  

        Policière  Aventure  Scientifique Autre

3- La création d'un bouton radio permettant de faire un choix unique parmi plusieurs propositions : La balise associée est INPUT TYPE="RADIO" :

Syntaxe :

<INPUT TYPE="radio" NAME="nom_groupe" VALUE="valeur" [CHECKED]>

TYPE="checkbox":est indispensable pour avoir des boutons radios

NAME="nom_groupe: les boutons doivent être associés au même groupe. 

VALUE="valeur": chaque bouton radio doit avoir sa valeur spécifique.

[CHECKED]:pour préciser le bouton choisi par défaut

<form>Quelle est votre tranche d'age?  

<input type="radio" name="age" value="jeune"> 0 - 20 ans

<input type="radio" name="age" value="adulte" checked>21 - 40 ans 

<input type="radio" name="age" value="vieux">40 - 220 ans

</form>

            Quelle est votre tranche d'age  ? 

                           0 - 20 ans    21 - 40 ans      40 - 220 ans

4- La création d'une liste de sélection SELECT permettant à l'utilisateur de faire un choix dans une liste de plusieurs options présentées sous forme de menus déroutants. La balise  associée est : SELECT, 

Syntaxe :

<SELECT NAME="nom_de_la_liste" [SIZE] [MULTIPLE]>
<OPTION VALUE="valeur1">Choix1
<OPTION VALUE="valeur2">Choix2
<OPTION VALUE="valeur3" [SELECTED]>Choix3
</SELECT>

<OPTION> permet d'introduire chaque option de la liste,

SIZE = précise le nombre d'options du menu", 

[SELECTED]permet la sélection de cette option par défaut,

[MULTIPLE]permet la sélection de plusieurs options dans la liste 

Quel est votre animal préféré?

<select name="animal" size="3" >

<option>Chien

<option selected>Chat

<option>Cheval

<option>Mouton

<option>Lion</option>

</select>

 Quel est votre animal préféré?
                                                                 Chien Chat Cheval Mouton Lion

Remarque:

 Si l'attribut SIZE est n'est mis, alors le menu est réduit à une ligne

5- La création d'une zone de saisie multilignes permettant à l'utilisateur de saisir un texte de plusieurs lignes. La balise associée est TEXTAREA , Il convient de spécifier la taille de cette zone avec ROWS="valeur" et COLS="valeur"

<TEXTAREA NAME="nom_du_champ" ROWS="nombre_de_lignes" COLS="nombre_de_colonnes">
</TEXTAREA>

ROWS=  : permet de préciser le nombre de lignes de la fenêtre de saisie.

COLS=  : permet de préciser le nombre de colonnes de la fenêtre de saisie.

 Maintenant, vous pouvez rédiger votre CV:
<textarea name="impressions" rows="5" cols="30"></textarea>

  Maintenant, vous pouvez rédiger votre CV: 

                                     

6-  La création d'un bouton d'envoi qui sert à déclencher l'action associée au formulaire et à l'envoyer au serveur pour traitement. La balise correspondante est SUBMIT: 

<INPUT TYPE="submit" VALUE="texte_à_afficher">

 VALUE="texte_à_afficher" indique le texte à placer dans le bouton.

7- La création d'un bouton d'annulation sert à effacer  toutes les réponses que l'internaute avait rempli dans le formulaire, et l'initialiser sans l'envoyer au serveur. La balise correspondante est RESET:

Résultat :           

8- La création d'un champ de saisie de Mot de passe: C'est un Espace mono ligne dans lequel l'utilisateur peut saisir un mot de passe. Les caractères tapés sont remplacés par des astérisques sur l'écran.

9- La création d'un Champ caché  permet d'inclure un  formulaire contenant des données cachées, invisibles à l'utilisateur mais contenant plusieurs types de renseignements... .une valeur, mais invisible de l'utilisateur. le champ est caché : utile pour transmettre des informations non visibles. La balise correspondante est <INPUT TYPE="hidden">:

Syntaxe :

<INPUT TYPE="hidden" NAME="nom_du_champ_caché " VALUE="valeur">

NAME : nom du champ caché 

VALUE: la valeur du contenu du champ 

Exemple :  " invisible "

10- La création d'un champ Pièce jointe qui vous permet de joindre un fichier, Ce champ sera associé d'un bouton permettant d'ouvrir une boite de dialogue Open pour sélectionner le fichier. La balise correspondante est <INPUT TYPE="file"> 

<INPUT TYPE="file" NAME="fichier" SIZE="taille">

SIZE : permet de préciser la taille du champ