HTML .. le Langage des Navigateurs..

<<Page Précédente

Retour Table des Matières

Page Suivante>>

INTERNET .. Construction de Pages WEB Le FORMULAIRE [Page_3]

LE FORMULAIRE est INTERACTIF

Il permet au Client de saisir des Données ( Nom, Adresse, Téléphone, Questions diverses ..etc.. ) dans des champs de saisie , de choisir des options dans des Listes puis d'émettre ces données vers le Serveur . On conçoit qu'alors, la direction des Informations est inverse du cas habituel . Elle devient client vers serveur .

La commande Formulaire offre divers Objets de saisie et d'envoi d'Informations .

Il faut savoir aussi que ces Données sont émises vers le Serveur comme « encapsulées » dans une structure afin de bien respecter les champs de saisie . Et cela même si elles aboutissent parfois dans une boîte aux lettres.

Nous allons les passer en revue tout en les expérimentant...comme à l'accoutumée !

Comment créer un Formulaire ?

<form> pour l'ouvrir

</form> pour le fermer

En fait dans la balise form il faut aussi déclarer une action . C'est-à-dire comment les reseignements acquis par le Formulaire seront acheminés et vers qui ?
Prenons le cas où le Formulaire atteindra une Boîte aux lettres ( adresse E-Mail ) :

<form action=« mailto://janoLap@serveur.fr » method=post enctype=« text/plain »>

· mailto c'est le protocole de transfert .Il précède l'adresse e-mail de destination des données.

· method = get ou =post Dans le cas d'une émission vers E-Mail choisir post

si les données sont attendues par le serveur dans une structure query string faisant intervenir l'interface CGI chez ce serveur il faut choisir get. Ici nous ne traiterons que le cas d'émission du formulaire vers une adresse E-Mail .

· enctype définit le type d'encapsulage des données émises.. text/plain signifiant type Texte simple

Pour information , si le serveur attend le formulaire dans une structure particulière utilisant l'interface CGI on pourrait déclarer action de la manière suivante:

<form action=« http://www.serv2.com » method=get >

Dans ce cas le Serveur exploite les renseignements du formulaire sans utiliser la Boîte aux lettres.

Voici la possibilé de tester votre formulaire en « live » , mais nécessitant la connexion à Internet:

<form action=« http://www.mcp.com/cgi-bin/post-query » method=post>

Alors vous recevrez , en écho , une page renvoyée par ce serveur et contenant les renseignements du Formulaire. Le Champ de saisie à 1 seule Ligne

Conseil habituel: Expérimentez en même temps .

<input name=« ch1 » size = 20 > Champ de saisie de 1 ligne et de longueur 20 caractères

ch1 pourrait être le nom choisi pour repèrer ce champ parmi les autres.

<input name=« champ2 » size=15 maxlenght=25>

l'attibut maxlenght permet de fixer le maximum de caractères saissables tout en conservant une zone à l'écran de 15 seulement..

Voici un exemple de formulaire utilisant 3 champs de saisie :

<html>

<head>

<title>Exemple n°1 de formulaire</title>

</head>

<body bgcolor=gray>

<form> N'utilisons pas l'attribut action ..Ce sera plus simple durant nos expérimentations.

Nom :<input name=« nom » size=20 maxlenght=30><br>

Prénom :<input name=« pren » size=20 maxlenght=30><br>

Adresse :<input name=« adr » size=50 maxlenght=80><br>

</form>

</body>

</html>

En fait dans la balise input on peut utiliser un autre attribut type qui précise le type de donnée attendu :

int valeur numérique entière
float valeur numérique avec décimales
url adresse Internet
date date
password mot de Passe ... Les caractères entrés seront remplcés sur l'écran par « * »

Par exemple:

Adresse E-Mail : <br>

<input name=« adr-mail » size=30 type=url><br>

Mot de Passe : <br>

<input name=« mdp » size=10 type=password><br>

Date : [j/m/a] <br>

<input name=« dat » size=15 type =date><br>

.Le Champ de saisie à plusieurs Lignes

Conseil habituel: Expérimentez en même temps ..en ajoutant à votre listing HTML précédent.

<textarea name=« chml » rows=3 cols=30> Aire de saisie de 3 lignes et 30 colonnes

Le Champ sera souvent assorti d'ascenseurs horizontaux et verticaux ( suivant le Navigateur ! ).

<textarea name=« remarc » rows=4 cols=40>Notez vos remarques

Le texte placé entre le tag d'ouverture et celui de fermeture apparaitra dans la zone et sera éliminé dès que la saise commencera.

</textarea> Attention , ne pas oublier cette Balise de Fin !!

La Liste de Sélection

Elle permet de choisir une option parmi plusieurs présentées dans une liste .
Par exemple :

<select name=« choix » > Ouverture de la liste

<option>Le Lundi</option> Création de la 1ère entrée

<option>Le Mardi</option> Création de la 2ème entrée

<option>Le Mercredi</option> Création de la 3ème entrée.

</select> Fermeture de l'objet select

Encore un petit plus..!! Il vous est possible de présélectionner une des options pendant cette écriture ..Par exemple pour présélectionner l'option Mardi , déclarez là avec l'attribut selected ...Donc :

<option selected>Le Mardi</option>

Je vous sens émerveillé par la qualité des images ... et le fonctionnement de tous ces organes !!
Reconnaissez que vos efforts sont bien récompensés !! Alors continuons... Les Cases d'Option ( ou Boutons Radio )

Printemps

Eté...

Hiver..

Conseil habituel: Expérimentez en même temps ..en ajoutant à votre listing HTML précédent.

Elles permettent de choir une option parmi plusieurs en cliquant sur l'une ou l'autre.
HTML les nomme Boutons Radio : (c'est la raison pour laquelle on retrouve type= radio )

<input type=radio name=« case1 » value=« HTML »>Langage HTML

<input type=radio name=« case1 » value=« JAVA »>Langage JAVA

<input type=radio name=« case1 » value=« JAScript »>Langage JavaScript

Remarquez bien que le nom choisi « case1 » est quelconque mais identique pour ces 3 options.
Ainsi 1 case et une seule parmi 3 peut être cochée !! Ce nom commun permet de grouper plusieurs cases .
Donc pour former des groupes il faut choisir un nom commun par groupe .
Le mot suivant le paramètre value (ex. JAVA ) sera transmis avec le formulaire au Serveur si cette case est validée. Les Cases à cocher

Tennis

Equitation

Sieste approfondie

Conseil habituel: Expérimentez en même temps ..en ajoutant à votre listing HTML précédent.

Elles permettent de sélectionner des options , mais la notion de groupe n'existe pas .Plusieurs options peuvent être cochées . C'est l'attribut type de input qui reçoit un autre nom: checkbox .
Par exemple:

<font color=yellow>

<input type=checkbox name=« langages » value=« HTML »>Langage HTML<br>

<input type=checkbox name=« langages » value=« JAVA »>Langage JAVA<br>

<input type=checkbox name=« langages » value=« JavaScript »>Langage JavaScript<br>

</font>

Continuons encore un peu avant un bel exercice récapitulatif des Formulaires.. .Les Boutons de Commande d'Envoi du Formulaire
et

Le Formulaire étant rempli , il faut l'émettre vers le serveur .
Pour cela il existe un type de Bouton : SUBMIT prévu à cet effet.
Par exemple :

<input type=submit value=« Envoi des Renseignements »>

Il existe un autre type de Bouton : RESET qui permet de réinitialiser les champs de données ( les Effacer ):

<input type=reset value=« RAZ des Données »>

Remarque importante concernant les Tests de mise au point

Nous avons décidé de ne pas placer l'attribut action dans le tag form durant nos expérimentations.
Vous en êtes au point de cliquer sur le Bouton d'envoi du formulaire.
Après avoir rempli tout ou partie des champs de saisie , si vous cliquez sur ce bouton vous retrouverez la liste de ces champs tels que vous les avez renseigné dans la ligne d'adresse de votre Navigateur .

Si vous êtes connecté au réseau , utilisez alors le protocole mailto suivi de votre e-mail ...( tel que vu en page 18 ).

Extensions de connaissances
Il est possible de remplacer le Bouton d'Envoi de Formulaire par une Image sur laquelle l'utilisateur peut cliquer.
Il est possible aussi de permettre au client , soit de cliquer sur le Bouton , soit de cliquer sur l'Image.

EXERCICE n° 6

Ecrire un listing HTML permettant d'obtenir une Page HTML ressemblant à celle ci.

exercice 6

Vous pouvez recevoir le corrigé de cet exercice (comme pour les autres) en me le demandant.

<<Page Précédente

Retour Table des Matières

Page Suivante>>