Créée le, 19/06/2015

 Mise à jour le, 29/06/2020

Visiteurs N°  




Accueil
Site en Français Site en Anglais Nos Promotions Nouveau Blog Nouveautés Moteur de Recherche Votre Caddie Pour Vos Achats Votre Espace Membre Vos Signets et Vos Jeux Préférés Page de Bienvenue Statique
Sommaires
Électronique Fondamentale Technologie Fondamentale Testez vos Connaissances Électronique Théorique Digitale Électronique Pratique Digitale Lexique Électronique Numérique Data book TTL Data book CMOS Dépannage TVC Mathématique
Micro-ordinateurs
Théorique des Micro-ordinateurs Testez vos Connaissances Pratique des Micro-ordinateurs Glossaires sur les Ordinateurs
Physique
La lumière Champ d'action Rayonnement Électromagnétique
Technologies
Classification des Résistances Identification des Résistances Classification des Condensateurs Identification des Condensateurs
Formulaires Mathématiques
Géométrie Physique 1. - Électronique 1. 2. - Électronique 1. 3. - Électrotechnique 1. 4. - Électromagnétisme
Accès à tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages N. B. M. - Tome I - 201 Pages E. T. M. - Tome I - 554 Pages Business à Domicile Ouvrages 34 pages gratuits Nos E-books Logiciel Géométrie Logiciel Composants Électroniques
Aperçu de tous nos Produits
E. T. F. - Tome I - 257 Pages E. T. F. - Tome II - 451 Pages E. T. F. - Tome III - 611 Pages E. T. D. - Tome I - 610 Pages E. T. M. - Tome I - 554 Pages Logiciel Géométrie Logiciel Composants Électroniques
Nos Leçons aux Formats PDF
Électronique Fondamentale Technologie Fondamentale Électronique Théorique Digitale Électronique Pratique Digitale Théorique des Micro-ordinateurs Mathématiques
Informatique
Dépannage Win98 et WinXP et autres Dépannage PC Glossaire HTML et Programmes PHP et Programmes JavaScript (en cours de travaux) Création de plusieurs Sites
Forums
Forum Électronique et Infos Forum Électronique et Poésie
Divers et autres
Formulaire des pages perso News XML Statistiques CountUs Éditeur JavaScript Nos Partenaires et nos Liens Utiles Gestionnaire de Partenariat Nos Partenaires MyCircle Sondages 1er Livre d'Or 2ème livre d'Or Annuaires Sites

Signets :
  Leçons suivantes        Leçons précédentes      Bas de page
  Cliquez ici pour la leçon suivante ou dans le sommaire prévu à cet effet


Les Formulaires :


Les Formulaires :


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.

<form name="Formules" action="/electronique-et-informatique/annuaireGeneral">

. . .

</form>

<script> document.Formules.action="/electronique-et-informatique/annuaireService"> </script>

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.

<form name="Formules" action="/electronique-et-informatique/annuaireGeneral">

. . .

</form>

<script> document.Formules.target="NouvelleFenetre" </script>

ENCTYPE permet de connaître ou de modifier l'encodage (le content-type Mine) des données transmises vers le formulaire.

ELEMENTS permet d'analyser les objets composant le formulaire :

           ELEMENTS.LENGTH donne le nombre d'objets composant le formulaire,

           ELEMENTS[n].NAME donne le nom associé à l'objet de rang n,

           ELEMENTS[n].VALUE ou ELEMENT.NOM_DE_L'OBJET.VALUE donne sa valeur.

La méthode de l'objet FORM :

SUBMIT permet de déclencher, exactement comme si l'on cliquait sur le bouton submit, l'envoie du formulaire.

Dans l'exemple ci-dessous, on soumet le formulaire à travers un lien hypertexte.

<a href=javascript:document.mecaniqueGenerale.submit()>Annuaire</a>

L'événement JavaScript associé à l'objet FORM :

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 :

<FORM METHOD="post" NAME="Formulaire_1" ACTION="/electronique-et-informatique/inscription" TARGET="recup" onSubmit="return VeriFiche()">

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&eacute;ation du sujet du Mail qui contient l'identification (Identif)

                                             // et l'option s&eacute;lect&eacute;e (probl&egrave;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&eacute;n&eacute;ration de l'action du formulaire mailto

                                             action = 'mailto:daniel.robe@free.com?content-type = text/html&sujet=';

                                             action += Identif + '(' + elements["sujet"][Index].value + ')';

                                      }

                                             // Cr&eacute;ation du corps Mail et r&eacute;cup&eacute;ration du type de browser utilis&eacute;

                                             // par la personne qui &eacute;met le Mail

                                             with (navigator) {

                                                  Text = appName + ' ' + appVersion + '\n';

                                                  Text += appCodeName + 'depuis' + userAgent + '\n';

                                 }

                                             with (window.document.Mail) {

                                             // L'information sur le browser est stock&eacute;e dans un champ HIDDEN (browser)

                                                  elements["Browser"].value = Text;

                                             // On r&eacute;cup&egrave;re le texte saisi + le message  "message envoy&eacute;"

                                                  elements["Message"].value += '\n\n *** Message envoye *** \n\n';

                           }

                                             return true;

                      }

                         </SCRIPT>

       </HEAD>

                   <BODY BGCOLOR="#C0C0C0">

                             <FORM

                                  NAME ="Mail"

                                  ACTION=""

                                  METHOD="POST"

                                  ENCTYPE="text/plain"

                                  onSubmit="Envoyer()">

                                  <CENTER>

                                  <b> Sujet du Mail : </b> <BR>

                                  <select name="sujet">

                                  <option value="PROBLEME"> Probl&egrave;me

                                  <option value="SUGGESTION"> Suggestion

                                  <option value="COMMENTAIRE" selected> Commentaire

                                  <option value="COMMERCIAL"> Commercial

                                  <option value="PROBLEME TECHNIQUE"> Technique

                                  <option value="GEOMETRIE"> G&eacute;om&eacute;trie

                                  <option value="MECANIQUE GENERALE">M&eacute;canique G&eacute;n&eacute;rale

                                  </select> <BR> <BR>

                                  <b> Pays : </b> <BR>

                                  <select name="Pays">

                                  <option value="FRANCE"> France

                                  <option value="CANADA"> Canada

                                  <option value="ITALIE"> Italie

                                  <option value="SUEDE"> Su&egrave;de

                                  <option value="ALLEMAGNE"> Allemagne

                                  <option value="AFRIQUE"> Afrique

                                  <option value="NORVEGE"> Norv&egrave;ge

                                  <option value="BELGIQUE"> Belgique

                                  <option value="GRANDE BRETAGNE"> Angleterre

                                  <option value="ESPAGNE" selected> Espagne

                                  </select> <p> <HR>

                                  <b> Message : </b> <BR>

                                  <textarea name="Message" rows="15" cols="70" wrap> </textarea>

                                  <input type="hidden" name="Browser"> <HR> <p>

                                  <input type="submit" value="Envoyer le message">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

                                  <input type="reset" value="Initialiser le formulaire">

                                  </CENTER>

                             </FORM

                   </BODY>

</HTML>

Pour visualiser l'aperçu, en cliquant ici. [Exemple 1].

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.










Nombre de pages vues, à partir de cette date : le 23 MAI 2019

compteur de visite

    




Envoyez un courrier électronique à Administrateur Web Société pour toute question ou remarque concernant ce site Web. 

Version du site : 10. 5. 14 - Site optimisation 1280 x 1024 pixels - Faculté de Nanterre - Dernière modification : 29 JUIN 2020.   

Ce site Web a été Créé le, 14 Mars 1999 et ayant Rénové, en JUIN 2020.