Jusqu'à présent, nous avons appris à réaliser des pages HTML fonctionnant sur le modèle suivant :
Un auteur peut créer des documents ou pages HTML et de les mettre à disposition sur un serveur Web.
Le lecteur utilise un browser pour aller consulter ces pages, en cliquant sur des liens. Il peut se promener ainsi à son gré dans les pages mais n'intervient jamais.
Il s'agit d'un mode de consultation où le seul choix possible concerne le cheminement parmi les pages. A aucun moment, il n'y a d'interactivité réelle entre le lecteur et le système qui fournit les documents.
Imaginons que nous voulions réaliser sur un serveur Web un service permettant de commander une documentation. Il faudra proposer sur la page HTML, une liste
des documentations disponibles, puis de collecter le nom et l'adresse du demandeur afin de pouvoir lui envoyer par la suite.
On peut aussi concevoir une recherche dans une base de données, un dictionnaire par exemple : le lecteur tape dans la page HTML le mot à rechercher, puis
reçoit dans la page suivante la définition du mot.
Les formulaires ou forms sont le moyen offert par le langage HTML pour générer à l'écran des zones de dialogue avec le lecteur.
Comme dans un formulaire papier, on pourra réaliser des zones dans lesquelles on entrera un texte, des cases à cocher, des listes de choix, et bien d'autres encore ...
Un formulaire n'est qu'une interface de saisie ; il nécessite des éléments pour traiter l'information qui y est collectée. Avec l'arrivée des scripts exécutés par le poste client, la gestion d'une interface
de saisie va devenir beaucoup plus efficace, beaucoup plus dynamique. Bien sûr, il existe des formulaires en langage PHP, que l'on expliquera lorsqu'on sera arrivé à ce langage un peu plus complexe que l'HTML, pour l'instant, restons simple et, nous devons terminer ce langage que nous avions commencé !
Quel est le principe du formulaire ?
A l'aide des balises HTML, on décrit les zones dans lesquelles l'utilisateur va remplir son formulaire. Chacune de ces zones sera identifiée par un nom symbolique. Lorsque le formulaire
est envoyé au programme d'exploitation, celui-ci reçoit l'identificateur de chaque zone et la valeur sera saisie.
De plus, on peut associer à la plupart des balises un traitement spécifique, exécuté localement par le browser, lorsqu'un événement survient sur l'élément décrit par cette balise.
Ce traitement est décrit par un petit programme JavaScript inséré dans le fichier HTML.
Par exemple, on décrit un champ dans lequel l'utilisateur du formulaire tapera son année de naissance ; on attribue à cette zone le nom symbolique de "AnneeNaissance".
L'utilisateur tape dans ce champ 1985. Le script s'assure que la donnée est bien numérique, et si tel est le cas, il l'envoie au programme CGI (Common Gateway Interface) qui reçoit : AnneeNaissance=1985.
Le programme CGI chargé du traitement final du formulaire peut être écrit dans le langage préféré du programmeur. Par exemple, Langage C, Fortran, Perl, C-shell, Schell convient pour des serveurs
installés sur des machines Unix ou VMS que l'on verra plus tard au cours de nos leçons. Pour l'instant, restons simple.
A quel moment le formulaire est-il transmis au script ?
A la fin de la saisie, dont tous les champs ne sont d'ailleurs pas nécessairement renseignés, est déclenchée lorsque l'on clique sur un bouton spécial appelé "bouton de soumission" ou sur un lien hypertexte prévu à cet effet.
Si un script (de validation des données par exemple) est associé à la soumission du formulaire, il est appelé en premier. En revanche, si le programmeur a correctement conçu sa fonction, il aura utilisé un code de retour permettant
de différer l'envoi tant que les données ne sont pas correctes. Bien sûr, il alertera l'utilisateur par un message spécial indiquant que la saisie est erronée.
Enfin, quand le poste client (le browser) décidera, à l'aide de ces fonctions JavaScript que les données sont valides, il les expédiera vers le serveur pour le traitement ultime.
Avant de commencer la description des balises, dressons l'inventaire des éléments à notre disposition pour créer ces formulaires.
Le look de ces éléments présentés à la figure 1, est celui d'un environnement Motif ; sur un Macintosh ou sur un PC, cette présentation diffère un peu mais la fonctionnalité reste la même.
On définit arbitrairement trois catégories d'éléments :
Une catégorie INPUT s'appliquant à divers types d'entrées (champ de saisie de texte et divers types de boutons) ;
Une catégorie SELECT s'appliquant aux listes (menus déroulants, listes à ascenseurs) ;
Une catégorie TEXTAREA s'appliquant à une zone de saisie de texte libre.
Description des balises de formulaire et des événements JavaScript associés :
Nous allons maintenant décrire les balises permettant de générer un formulaire. Elles permettent de fabriquer une interface de saisie, mais à ce niveau, on est pas encore réellement
dans la programmation ; que l'on verra à l'étude au cours de la prochaine leçon, essentiellement consacré à la programmation CGI. On procède cependant au choix du nom des variables qui identifieront les éléments du formulaire, et on indique
simplement le nom du script devant exploiter les données de ce formulaire. On décide aussi du traitement à associer aux événements. Il appartient ensuite au programmeur de coder les scripts. Ces deux tâches, fabrication de l'interface et du codage des scripts,
peuvent très bien être réalisées par deux personnes collaborant sur la même application.
<FORM>
La balise <FORM> débute la description d'un formulaire. Entre la balise de début <FORM> et la balise de fin </FORM> se situeront toutes les balises générant les divers boutons, cases à cocher, entrées
de texte, etc. Mais aussi du texte HTML standard permettant "d'habiller" et d'auto-documenter le formulaire.
Cette balise possède plusieurs attributs :
L'attribut METHOD :
Il s'adresse au programmeur qui va coder le script CGI. On en trouvera une description complète dans la prochaine leçon de la Programmation CGI. Pour l'instant, disons simplement pour le moment que cet attribut peut prendre
deux valeurs, GET et POST, indiquant la méthode de transfert des données acquises vers le script CGI.
L'attribut ACTION :
Sa fonction est d'indiquer l'action à entreprendre (le script à exécuter) lorsque l'on clique sur le bouton de soumission. "Action" définit donc l'URL du script permettant d'exploiter le formulaire.
Attention :On parle ici de script CGI (s'exécutant sur le serveur) et non de script JavaScript (exécuté sur le poste client).
L'attribut NAME :
Il possède deux fonctions particulières :
Dans un même document peuvent résider plusieurs formulaires. L'attribut NAME permet de définir, lors de l'envoi des données vers le script CGI, le formulaire qui les expédie.
Dans la représentation des éléments du formulaire, en objet JavaScript, il permet le nommage du formulaire. Dans la hiérarchie des objets du browser, le formulaire identifié par son nom (NAME=nom) pourra
être référencé par les fonctions JavaScript.
L'attribut TARGET :
L'exécution d'un script se traduit toujours par un résultat qui est une nouvelle page HTML ! Cette nouvelle page peut venir remplacer la page qui contenait le formulaire, ou s'inscrire dans une frame ou dans une autre fenêtre.
En l'absence de l'attribut TARGET, on remplace la page courante, en revanche, l'attribut TARGET permet d'indiquer la frame ou la fenêtre dans laquelle s'affiche la nouvelle page.
Les propriétés de l'objet FORM :
Elles sont en nombre de cinq :
ACTION permet de lire ou de modifier l'action (c'est-à-dire l'URL ou le peudo-protocole) associé au formulaire.
Dans l'exemple ci-dessous, l'instruction HTML <FORM> programme un appel à l'annuaire général ; l'exécution de l'instruction JavaScript modifie le formulaire qui appelle maintenant l'annuaire des services.
METHOD permet de lire ou de modifier la méthode (GET ou POST) associée au formulaire.
TARGET permet de lire ou de modifier la cible dans laquelle va être envoyé le résultat provoqué par l'exécution du formulaire.
Dans l'exemple ci-dessous, telle qu'est programmée la balise HTML, le résultat du formulaire s'afficherait à la place du formulaire (pas de target spécifié). L'instruction JavaScript
modifie ce comportement et envoie le résultat dans une nouvelle fenêtre.
L'événement onSubmit permet de spécifier l'exécution sur le poste client (donc par le browser) d'une fonction JavaScript. Cette fonction (ce programme) s'exécute donc au moment où l'on clique
sur le bouton submit. Elle servira par exemple à tester si une donnée du formulaire considérée comme obligatoire a bien été saisie. Cette fonction pourra (si le programmeur le code) renvoyer un booléen (true ou false) qui permettra, selon la formulation
utilisée dans la balise, de bloquer l'exécution du script CGI tant que le booléen n'a pas la valeur true.
La syntaxe générale d'ouverture d'un formulaire est donc :
<FORM NAME=nom_du_formulaire
METHOD=type_de_methode
ACTION=URL_du_script
TARGET=nom_de_la_frame
onSubmit=fonction>
Cette dernière ligne peut être formulée différemment :
onSubmit=return fonction>
Dans ce type de formulation, si la fonction renvoie false, le script CGI spécifié par l'attribut ACTION n'est pas exécuté. Il est nécessaire alors de prévenir l'utilisateur par une fenêtre
d'alarme que sa saisie est incomplète et qu'il est invité à soumettre une nouvelle fois son formulaire après l'avoir complété.
Exemple de formulaire générant un E-Mail avec sujet et pays :
L'exemple suivant montre comment fabriquer le sujet d'un E-Mail à partir d'un choix effectué dans une pop-liste. Le corps du Mail est ensuite obtenu à partir d'un texte saisi dans un textarea complété par les informations sur le client (browser)
qui est utilisé pour saisir le Mail. Ces dernières informations sont stockées dans un champ hidden (voir le type HIDDEN plus loin de nos leçons, HIDDEN = Masquer) avant la transmission vers l'URL MAILTO.
Au moment de l'envoie du Mail, on génère de nouveau le texte saisi, en le complétant par un message de confirmation.
<HTML>
<HEAD>
<TITLE> Formulaire E-Mail </TITLE>
<SCRIPT>
function Envoyer() {
var Text =" ";
var Index = 0;
var Identif = "mon_Formulaire_Mail"
// Création du sujet du Mail qui contient l'identification (Identif)
// et l'option sélectée (problème, suggestion, commentaire)
with (window.document.Mail) {
i = elements["sujet"].length - 1;
for (; i >= 0; i--) {
if (elements["sujet"][i].selected == true) {
Index = i;
break;
}
}
// Génération de l'action du formulaire mailto
On remarquera dans cet exemple le calcul de l'action pour le formulaire "Mail".
On verra dans la prochaine leçon JavaScript with pour l'utilisation de cette instruction, y compris certains paramètres du formulaire pour bien comprendre le code de certaines fonctions sans oublier certains paramètres que l'on verra plus tard ...
Pour l'instant, nous terminons ce premier chapitre afin de ne pas encombrer cette page, et nous continuerons la suite de cette leçon concernant les formulaires.
Fin de ce premier chapitre, le prochain sera consacré "aux balises définissant les composants du formulaire", toujours dans le même domaine HTML.
Leçons suivantes
Leçons précédentes
Bas de page
Haut de page