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 Balises Select, Option, Textarea, Type Hidden :


Les Balises Select, Option, Textarea, Type Hidden :


<SELECT> et <OPTION> :

Ce sont les balises réservées à la création de listes ou de menus dans lesquels l'utilisateur pourra sélectionner des éléments. Ces balises permettent de fabriquer deux objets graphiquement différents ; les menus déroulants (plus communément appelés pop-lists et des listes à ascenseur (scrolled-lists). Tous les items d'une liste seront spécifiés entre la balise de début <SELECT> et la balise de fin </SELECT> à l'aide d'une balise <OPTION>.

La pop-list se présente sous la forme d'un bouton sur lequel est inscrit un seul des items de la liste. Lorsque l'on clique sur le bouton, on déploie le contenu complet de la liste. Ce type d'élément permet de prendre peu de place au niveau de la page, la liste n'apparaissant qu'à la demande de l'utilisateur.

Les scrolled-lists sont des listes apparaissant dans une fenêtre et dont on peut régler le nombre de lignes visibles. Si la liste contient plus d'éléments que le nombre de lignes programmées, un ascenseur apparaît automatiquement.

L'attribut NAME de la balise <SELECT> :

Encore une fois, cet attribut permet de nommer l'objet à l'intérieur du formulaire. L'objet SELECT est cependant un peu plus complexe, car c'est en fait l'ensemble des balises <SELECT> et <OPTION> qui représentent l'objet select.

L'attribut SIZE de la balise <SELECT> :

Si la valeur qui affecte l'attribut SIZE est supérieure à 1, l'objet select est une scrolled-list ; dans le cas contraire ou s'il est absent, l'objet est une pop-list.

L'attribut MULTIPLE de la balise <SELECT> :

Cet attribut n'a de sens que dans une scrolled-list. Il autorise la sélection simultanée de plusieurs items de la liste.

L'attribut VALUE de la balise <OPTION> :

Cet attribut permet de définir la valeur qui va être passée au script CGI lorsque l'option est sélectionnée.

L'attribut SELECTED de la balise <OPTION> :

Dans le cas d'une pop-list, cet attribut définit l'option qui est sélectionnée par défaut sur le bouton.

Dans le cas d'une scrolled-list, il permet de présélectionner un item de la liste.

Le code HTML suivant permet de réaliser une pop-list :

<SELECT NAME="MonSite">

<OPTION VALUE="Electronique-et-informatique.fr"> Electronique (Jean-Pierre)

<OPTION VALUE="Informatique.fr"> Informatique (Jennifer)

<OPTION VALUE="Mecanique_generale.com" SELECTED> Automobile (Vanessa)

</SELECT>

Ce qui provoquera l'affichage ci-après : 

Tandis que le code suivant permet de générer une scrolled-list :

<SELECT NAME="Menu_html" SIZE="6">

<OPTION VALUE="intro"> Introduction

<OPTION VALUE="hypertech"> Technique de l'hypertexte

<OPTION VALUE="environ"> L'environnement

<OPTION VALUE="url"> L'adressage des documents

<OPTION VALUE="Struct"> La structure du langage

<OPTION VALUE="balise"> Les balises

<OPTION VALUE="accent"> L'accentuation

<OPTION VALUE="table"> Les tableaux

<OPTION VALUE="images"> Les images

<OPTION VALUE="carac"> Caract&egrave;res en graisse choisie

</SELECT>

Ce qui provoquera l'affichage ci-après : 

Si l'on modifie la première ligne avec l'introduction de l'attribut multiple :

<SELECT NAME="Menu_html" SIZE="6" MULTIPLE>

<OPTION VALUE="intro"> Introduction

<OPTION VALUE="hypertech"> Technique de l'hypertexte

<OPTION VALUE="environ"> L'environnement

<OPTION VALUE="url"> L'adressage des documents

<OPTION VALUE="Struct"> La structure du langage

<OPTION VALUE="balise"> Les balises

<OPTION VALUE="accent"> L'accentuation

<OPTION VALUE="table"> Les tableaux

<OPTION VALUE="images"> Les images

<OPTION VALUE="carac"> Caract&egrave;res en graisse choisie

</SELECT>

Cela permet alors ce type de sélection, en appuyant bien sût sur la touche shwit du clavier pour sélectionner plusieurs items.

Les propriétés de l'objet SELECT :

Cet objet possède les propriétés suivantes :

name donne le nom qui a été choisi pour cette balise.

type done le type de l'objet SELECT, soit :

           select-one pour une pop-list.

           select-multiple pour une liste à sélection multiple.

           select pour une liste à sélection simple.

selectedIndex reflète l'index de l'option sélectionnée pour une liste à sélection unique ou une pop-list, et l'index de la première option sélectionnée pour une liste à sélection multiple. La propriété selectedIndex est la plus efficace pour connaître l'index de l'option sélectionnée d'une liste à sélection simple. Si aucune option n'est sélectionnée, la valeur de l'index retournée est égale à -1.

Si l'on veut connaître les options sélectionnées dans une liste à sélection multiple, il convient de scruter tous les éléments (options) de la liste et de lire la propriété selected de chacun, comme le montre l'exemple suivant :

<HTML>

     <HEAD>

                    <TITLE> Lire la S&eacute;lection Multiple </TITLE>

        <SCRIPT>

        function LireLesSelections() {

        var Parametre = location.search.substring(1).split("&");

        var temp = Parametre[0].split("=");

        varSelection = unescape(temp[0]);

        if(varSelection == "") return;

        value = unescape(temp[1]);

        alert(varSelection + "=" + value);

        }

        window.onload=LireLesSelections;

        </SCRIPT>

        </HEAD>

        <BODY BGCOLOR="#CCCCCC">

        <CENTER> <BR> <BR>

        <font face="Arial" size="5" color="#800000"> <b> Observez bien la barre de l'URL, en s&eacute;lectionnant plusieurs noms par exemple ! </b> </font>

        <FORM NAME="F1"> <BR> <BR>

        <select NAME="Propriete" size="7" multiple>

        <option value="Operateur_1"> Jean

        <option value="Operateur_2"> Pierre

        <option value="Operateur_3"> Marie-Pierre

        <option value="Operateur_4"> Jennifer

        <option value="Operateur_5"> Dupond

        <option value="Operateur_6"> Val&eacute;rie

        <option value="Operateur_7"> Patty

        <option value="Operateur_8"> Marie-France

        </select> <BR> <BR> <BR>

        <input type="submit" name="Select" value="Valider" onClick="LireLesSelections()">

        </FORM>

        </CENTER>

        </BODY>

</HTML>

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

Les méthodes de l'objet SELECT :

blur et focus sont des méthodes qui n'ont pas vraiment d'utilité. Si la méthode focus() permet bien de donner le focus sur une liste (et non sur une pop-list où cette méthode est sans effet), elle ne permet pas d'en sélectionner une option. En fait, elle n'a d'autre effet que d'attirer l'attention sur la liste. La méthode blur() doit permettre de forcer la désélection de la liste.

Les événements associés à l'objet SELECT :

Les événements associés à l'objet sont :

onChange, apparaît lorsque l'utilisateur effectue un changement d'une option (sélection ou désélection).

onFocus, apparaît si l'on clique sur une option quelconque d'une liste. Il n'y a pas d'événement onFocus sur une pop-list.

onBlur, apparaît lorsque, après avoir cliqué sur une option d'une liste, on clique en dehors de cette liste. Il n'y a pas d'événement onBlur sur une pop-list.

Les propriétés des options de l'objet SELECT :

L'objet SELECT est certainement l'objet le plus intéressant parmi les éléments constituant une interface de saisie. En effet, les options composant cet objet peuvent être construites ou modifiées dynamiquement par du code JavaScript. Avant de passer à des exemples concrets, examinons les différentes propriétés de l'option :

defaultSelected, renvoie true ou false selon que l'option est celle qui est sélectionnée par défaut. Si aucune option d'une pop-list ne possède d'attribut selected, c'est le premier élément de la liste qui est considéré comme option sélectionnée par défaut.

Dans une liste standard (size > 1) defaultSelected n'est vrai que si une option est explicitement marquée avec l'attribut selected.

selected, renvoie true si l'option est sélectionnée, false sinon.

text, renvoie le texte associé à l'option (<option value="fruits"> poire renvoie poire).

value, renvoie la valeur associée à l'option (<option value="fruits"> poire renvoie fruits).

Exemple de création et de suppression d'options :

Dans cet exemple, on se propose d'afficher dans la liste de gauche un choix de fruits. Le lecteur peut transférer les fruits de son choix dans la liste de droite, en cliquant sur le bouton >>. Il peut revenir sur son choix, en renvoyant le fruit dans sa liste d'origine par un clic sur le bouton <<.

<HTML>

       <HEAD>

               <TITLE> Transfert de son choix </TITLE>

                         <SCRIPT>

                                     function A_Transfert_Destinaion_Vers_B() {

                                             indexA=document.Transfert.Source.options.selectedIndex;

                                             if (indexA < 0) return;

                                             valeur=document.Transfert.Source.options[indexA].text;

                                             document.Transfert.Source.options[indexA]=null;

                                             a = new Option(valeur);

                                             indexB=document.Transfert.Destination.options.length;

                                             document.Transfert.Destination.options[indexB]=a;

                                        }

                                     function B_Transfert_Source_Vers_A() {

                                             indexB=document.Transfert.Destination.options.selectedIndex;

                                             if (indexB < 0) return;

                                             valeur=document.Transfert.Destination.options[indexB].text;

                                             document.Transfert.Destination.options[indexB]=null;

                                             a = new Option(valeur);

                                             indexA=document.Transfert.Source.options.length;

                                             document.Transfert.Source.options[indexA]=a;

                                        }

                         </SCRIPT>

                               <STYLE TYPE="TEXT/CSS">

                               #Ma_Selection

                                        {

                                             width : 140px; background: #DEDEDE; color: #000000;

                                        }

                               </STYLE>

       </HEAD>

                   <BODY BGCOLOR="#CCCCCC">

                   <CENTER> <BR> <BR> <BR>

                   <H1> Vous pouvez s&eacute;lectionner plusieurs items dans la liste de gauche </H1> <BR> <BR> <BR>

                   <TABLE bordercolor="#606060" bgcolor="#606060"> <TR> <TD>

                   <FORM NAME="Transfert">

                              <SELECT ID="Ma_Selection" MULTIPLE SIZE="7" NAME="Source">

                   <OPTGROUP LABEL="SOURCE">

                   <OPTION>Citrons

                   <OPTION>Oranges

                   <OPTION>Pamplemousses

                   <OPTION>Cl&eacute;mentines

                   <OPTION>Kiwis

                   <OPTION>Bergamotes

                   <OPTION>Grenades

                   <OPTION>Pommes

                   <OPTION>Bananes

                   <OPTION>Yaourt Citron

                   <OPTION>Cerises

                              </SELECT>

                   <TD>

                   <INPUT TYPE="button" value=">>>" onClick="A_Transfert_Destinaion_Vers_B()"> <BR> <BR>

                   <INPUT TYPE="button" value="<<<" onClick="B_Transfert_Source_Vers_A()">

                   <TD>

                              <SELECT ID="Ma_Selection" MULTIPLE SIZE="7" NAME="Destination">

                   <OPTGROUP LABEL="DESTINATION">

                              </SELECT>

                   </TR> </TD> </TD> </TD>

                   </FORM>

                   </TABLE>

                   </BODY>

</HTML>

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

Comment ce Script fonctionne-t-il ? Le clic sur le bouton >>> entraîne l'exécution de la fonction A_Transfert_Destinaion_Vers_B(). Dans cette fonction, on commence par repérer le rang de l'élément qui a été sélectionné et on le range dans la variable "indexA" (indexA=document.Transfert.Source.options.selectedIndex). Si cette variable contient une valeur inférieure à zéro, c'est qu'aucun élément n'est sélectionné, dans ce cas, on sort de la fonction (if (indexA < 0) return;).

Si un élément (un fruit) a été sélectionné, on récupère dans la variable valeur la chaîne de caractères contenant le nom du fruit (valeur=document.Transfert.Source.options[indexA].text). On efface le fruit choisi de la liste de gauche, en supprimant l'option correspondante de la liste (document.Transfert.Source.options[indexA]=null). Pour ce faire, on affecte la valeur null à l'option considérée. On utilise ensuite le constructeur d'option pour construire une option dont le texte représente le fruit pris dans la liste de gauche et dont on avait conservé le nom dans la variable valeur (a = new Option(valeur)) ; cette option est conservée dans la variable a. On détermine la longueur de la liste de droite et on la stocke dans la variable indexB (indexB=document.Transfert.Destination.options.length). Comme la numérotation des options commence à zéro, indexB correspond à l'indice de l'option que nous sommes en train de transférer de la gauche vers la droite. Le transfert est enfin réalisé (document.Transfert.Destination.options[indexB]=a).

La fonction inverse B_Transfert_Source_Vers_A() fonctionne de façon tout à fait symétrique.

Exemple de modification du texte des options :

Dans ce deuxième exemple, nous allons vous montrer comment on peut changer dynamiquement le texte d'une option dans un menu déroulant (pop-list). Le menu déroulant du bas permet de choisir la langue (Français ou Anglais) ; selon la langue choisie, le menu déroulant du haut affichera automatiquement les jours de la semaine dans la langue sélectionnée.

<HTML>

       <HEAD>

               <TITLE> Bilingue Fran&ccedil;ais Anglais </TITLE>

                         <SCRIPT>

                                     function Bilingue_Francais_Anglais (forme) {

                                             if (forme.langue.options[1].selected == true) {

                                             forme.jours.options[0].text = "MONDAY"

                                             forme.jours.options[1].text = "TUESDAY"

                                             forme.jours.options[2].text = "WENESDAY"

                                             forme.jours.options[3].text = "THURSDAY"

                                             forme.jours.options[4].text = "FRIDAY"

                                             forme.jours.options[5].text = "SATURDAY"

                                             forme.jours.options[6].text = "SUNDAY"

                                        }

                                             else {

                                             forme.jours.options[0].text = "LUNDI"

                                             forme.jours.options[1].text = "MARDI"

                                             forme.jours.options[2].text = "MERCREDI"

                                             forme.jours.options[3].text = "JEUDI"

                                             forme.jours.options[4].text = "VENDREDI"

                                             forme.jours.options[5].text = "SAMEDI"

                                             forme.jours.options[6].text = "DIMANCHE"

                                        }

                                   }

                         </SCRIPT>

                               <STYLE TYPE="TEXT/CSS">

                               #Semaine

                                        {

                                             width:120px; background: #DADADA; color: #000000;

                                        }

                               </STYLE>

       </HEAD>

                   <BODY BGCOLOR="#CCCCCC"> <CENTER> <BR> <BR>

                   <FORM>

                                   <select id="Semaine" name="jours">

                                   <option>LUNDI

                                   <option>MARDI

                                   <option>MERCREDI

                                   <option>JEUDI

                                   <option>VENDREDI

                                   <option>SAMEDI

                                   <option>DIMANCHE

                                   </select>

                                   <p>

                                   <select id ="Semaine" name="langue" onChange="Bilingue_Francais_Anglais(this.form)">

                                   <option selected>FRANCAIS

                                   <option>ENGLAIS

                                   </select>

                   </FORM>

                   </BODY>

</HTML>

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

Cette petite interface fonctionne de la façon suivante : au chargement de la page, on positionne l'interface en français ; le menu "langue" affiche français et le menu déroulant des jours de la semaine est en français.

Dans le second menu déroulant permettant de choisir la langue, on traite l'événement onChange qui, lorsqu'il survient, appelle la fonction Bilingue_Francais_Anglais. Cette fonction teste si la seconde option de la liste (celle dont l'indice est à 1 et représente anglais) est sélectionnée (if (forme.langue.options[1].selected == true)). Si tel est le cas, on bascule l'interface en "anglais" en modifiant le texte des jours de la semaine (forme.jours.options[0].text = "MONDAY" ...).

Si les balises <OPTION> avaient défini des valeurs (option value="...">, il aurait été possible de les changer aussi en modifiant la propriété "value" (forme.jours.options[0].value="...").

Exemple pour récapituler le fonctionnement des options de l'objet SELECT :

Dans ce dernier exemple, on trouvera toutes les techniques de manipulation des listes. Il montre comment créer une option, comment rechercher les options sélectionnées dans une liste à sélection multiple, comment désélectionner des options, et enfin, comment supprimer des options.

<HTML>

       <HEAD>

               <TITLE> R&eacute;capitulatif des Options </TITLE>

                         <SCRIPT LANGUAGE="JavaScript">

                         function Creation_Options() {

                         // Cr&eacute;ation d'une option dans la liste

                         if (document.forms[0].elements[0].value="") return;

                         n = new Option(document.forms[0].elements[1].value);

                         var index = document.forms[0].elements[0].options.length;

                         document.forms[0].elements[0].options[index] = n;

                         document.forms[0].elements[1].value="";

                 }

                         function Recherche_Selection() {

                         // Recherche de l'option s&eacute;lectionn&eacute;e

                         for (i=0; i < document.forms[0].elements[0].options.length; i++) {

                         if (document.forms[0].elements[0].options[i].selected)

                         alert ("Votre Recherche de S&eacute;lection est le N&deg; " + i);

                 }

            }

                         function Deselection_Options() {

                         // D&eacute;s&eacute;lection de toutes les options s&eacute;lectionn&eacute;es

                         for (i=0; i<document.forms[0].elements[0].options.length; i++) {

                         if (document.forms[0].elements[0].options[i].selected)

                          document.forms[0].elements[0].options[i].selected = false;

                 }

            }

                         function Effacement_Options() {

                         // Effacement de toutes les options s&eacute;lectionn&eacute;es

                         index = document.forms[0].elements[0].options.length;

                         for (var i = index-1; i >=0; i--) {

                         if (document.forms[0].elements[0].options[i].selected) {

                         document.forms[0].elements[0].options[i] = null;

                 }

            }

       }

                         </SCRIPT>

                                   <STYLE TYPE="TEXT/CSS">

                         #Ma_Selection { width: 240px; background: #DEDEDE; color: #003500; }

                         #Ma_Liste { width: 140px; background: #DEDEDE; color: #000000; }

                                   </STYLE>

       </HEAD>

                         <BODY BGCOLOR="CCCCCC">

                              <FORM NAME="Formulaire"> <BR> <BR> <BR> <BR> <CENTER>

                              <SELECT ID="Ma_Selection" NAME="Source" SIZE="6" MULTIPLE>

                              </SELECT> <BR> <BR>

                              <font face="Arial" size="3" color="#800000"> <b> Entrez votre texte : </b> <BR> <INPUT ID="Ma_Liste" TYPE="Text" NAME="Text"> </font> <p>

                              <INPUT VALUE="Cr&eacute;er une Option" TYPE="BUTTON" onClick="Creation_Options()"> <BR> <BR>

                              <INPUT VALUE="Rechercher la S&eacute;lection" TYPE="BUTTON" onClick="Recherche_Selection()"> <BR> <BR>

                              <INPUT VALUE="Tout D&eacute;s&eacute;lectionner" TYPE="BUTTON" onClick="Deselection_Options()"> <BR> <BR>

                              <INPUT VALUE="Effacer les Options S&eacute;lectionn&eacute;es" TYPE="BUTTON" onClick="Effacement_Options()">

                              </FORM> </CENTER>

                         </BODY>

</HTML>

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

<TEXTAREA> :

Cette balise permet de créer une zone de texte, en spécifiant sa taille grâce aux valeurs que l'on associera aux attributs ROWS et COLS. ROWS indique le nombre de lignes de la fenêtre, tandis que COLS déinit le nombre de colonnes.

Dans cette fenêtre, il est possible de prédéfinir un texte (entre les balises <TEXTAREA> et </TEXTAREA>) que l'utilisateur pourra remplacer ou compléter par son propre texte.

<TEXTAREA NAME="commentaires" ROWS="10" COLS="30"> Entrez ici vos commentaires </TEXTAREA>

Ce qui provoquera l'affichage ci-après :

Attention ! Le bouton RESET du formulaire n'efface pas le texte prédéfini. Celui-ci doit être effacé manuellement.

Du point de vue JavaScript, l'objet TEXTAREA ce comporte exactement comme l'objet TEXT que nous avions vu dans la leçon précédente.

<INPUT TYPE="BUTTON"> :

Ce bouton n'a de sens que dans un contexte JavaScript. En effet, au niveau d'un CGI, il ne permet pas de collecter une valeur (il n'a pas d'état). D'autre part, il n'a pas un comportement préprogrammé comme le bouton submit qui permet d'envoyer les données, ou le bouton reset qui efface les données saisies. Son utilisation concernera donc essentiellement la génération d'événements déclenchant des fonctions JavaScript.

L'attribut NAME :

C'est attribut qui permet de nommer le bouton à l'intérieur du formulaire.

L'attribut VALUE :

Cet attribut sert essentiellement à afficher un texte sur le bouton.

<INPUT TYPE="button" NAME="test" VALUE="Lancer">

Ce qui provoquera l'affichage ci-après :

Les propriétés de l'objet BUTTON :

L'objet BUTTON possède deux propriétés :

name donne le nom qui a été choisi pour cette balise.

value retourne la valeur (value) programmée dans la balise.

La méthode de l'objet BUTTON :

Il s'agit encore de la méthode Click, qui permet par une instruction de script de réinitialiser les données du formulaire. Encore une fois, précisons que la réinitialisation a lieu lors de l'exécution d'une instruction et non sur le clic que peut faire l'utilisateur. Le clic de l'utilisateur génère un événement.

document.FormFichier.init.click()

L'événement associé à l'objet BUTTON :

L'événement associé à l'objet BUTTON est onClick, qui permet d'exécuter une fonction lorsque l'utilisateur clique sur le bouton.

<INPUT TYPE="reset" NAME="initialisation" VALUE="Effacer" onClick="efface()">

Exemple d'utilisation :

Cliquer sur le bouton "fermer" provoque la création au premier plan d'une fenêtre de confirmation de fermeture. Si l'on répond "OK", on ferme simultanément la fenêtre "Question" et la fenêtre principale qui contient le bouton "fermer".

NB : Cette fenêtre de confirmation n'apparaît pas si la fenêtre principale a été ouverte par une instruction JavaScript du type window.open...

<FORM> <INPUT TYPE="button" VALUE="Fermer" onClick="window.close()"> </FORM>

Important : sur certains browsers ne fonctionnent pas !

EXEMPLES :

Voici maintenant quelques exemples complets de formulaires :

Exemple 1 :

<HTML>

       <HEAD>

               <TITLE> Formulaire E-Mail </TITLE>

       </HEAD>

                   <BODY BGCOLOR="#CCCCCC"> <CENTER>

                         <H3> <BR> <BR> Regardez bien l'URL de votre navigateur ... <BR> <BR>

                         <FORM METHOD="get" ACTION="http://www.electronique-et-informatique.fr/"> Entrez votre E-Mail : &nbsp;

                         <INPUT TYPE="text" NAME="E-Mail"> &nbsp; puis &nbsp;

                         <INPUT TYPE="submit" NAME="Envoyer" VALUE="Valider">

                         </FORM> </H3> </CENTER>

                   </BODY>

</HTML>

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

Exemple 2 :

<HTML>

       <HEAD>

               <TITLE> Formulaire E-Mail et Options </TITLE>

       </HEAD>

                   <BODY BGCOLOR="#CCCCCC"> <b> <BR> <BR> <BR> <CENTER>

                         <FORM METHOD="GET" ACTION="http://www.electronique-et-informatique.fr/">

                         &nbsp;&nbsp; <font face="Arial" size="3" color="#000000"> Entrez votre nom : </font>

                         <INPUT TYPE="text" NAME="NOM"> <BR> <p>

                         <font face="Arial" size="3" color="#000000"> Entrez votre E-Mail : </font>

                         <INPUT TYPE="text" NAME="E-Mail"> <BR> <BR> <BR> <BR>

                         <font face="Arial" size="3" color="#000000"> <i> Quel(s) micro-ordinateur(s) utilisez-vous ? </i> </font> <BR> <BR>

                         <font face="Arial" size="3" color="#000000"> &nbsp;&nbsp;&nbsp; <INPUT TYPE="checkbox" NAME="MICRO" VALUE="MAC"> Macintosh </font>

                         <font face="Arial" size="3" color="#000000"> &nbsp;&nbsp;&nbsp; <INPUT TYPE="checkbox" NAME="MICRO" VALUE="PC"> PC </font>

                         <font face="Arial" size="3" color="#000000"> &nbsp;&nbsp;&nbsp; <INPUT TYPE="checkbox" NAME="MICRO" VALUE="UNIX"> Station Unix </font> <p>

                         <BR> <BR> <BR>

                         <font face="Arial" size="3" color="#000000"> <i> M&eacute;dia de distribution &nbsp; </i>

                         <INPUT TYPE="radio" NAME="media" VALUE="CD"> CD-ROM

                         &nbsp;&nbsp; <INPUT TYPE="radio" NAME="media" VALUE="DISK"> Disquette </font> <BR> <BR>

                         <INPUT TYPE="submit" VALUE="Valider">

                         </FORM> </CENTER> </b>

                   </BODY>

</HTML>

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

Exemple 3 ; pour démonstration avec la "Méthode POST" :

<HTML>

       <HEAD>

               <TITLE> Simple Formulaire </TITLE>

       </HEAD>

                   <BODY BGCOLOR="#CCCCCC"> <b> <BR> <BR> <BR> <CENTER>

                         <H2> A &eacute;viter de faire en langage HTML mais plut&ocirc;t en PHP que l'on verra plus tard ! </H2>

                         <H3> Comme vous pourriez vous rendre compte, lorsque l'on tape son mot de passe, tout le monde pourra voir ce dernier !!! Surtout en mode "GET" </H3>

                         <H2> Nous e&ucirc;mes d&eacute;sactiv&eacute; l'attribut "M&eacute;thode GET" </H2>

                         <font face="Arial" size="4" color="#005500"> NB : C'est uniquement un exemple pour vous familiariser avec le langage HTML </font> <BR> <BR> <BR>

                         <FORM METHOD="POST" ACTION="http://www.electronique-et-informatique.fr/">

                         &nbsp;&nbsp;&nbsp;&nbsp; <font face="Arial" size="3" color="#800000"> Choisissez un syst&egrave;me : </font>

                         <SELECT NAME="Envoyer">

                         <OPTION> Electronique

                         <OPTION SELECTED> Physique

                         <OPTION> G&eacute;om&eacute;trie

                         <OPTION> Math&eacute;matique

                         <OPTION> Formules Math&eacute;matiques

                         </SELECT> <BR> <BR> <BR>

                         <font face="Arial" size="3" color="#800000"> Entrez votre nom : &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </font>

                         <INPUT TYPE="text" NAME="Username"> <BR> <BR> <BR>

                         <font face="Arial" size="3" color="#800000"> Entrez votre password : </font>

                         &nbsp;&nbsp; <INPUT TYPE="password" NAME="PassWord"> <BR> <BR>

                         <INPUT TYPE="SUBMIT" NAME="Eviter_de_Faire" VALUE="Envoyer">

                         </FORM> </CENTER> </b>

                   </BODY>

</HTML>

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

Nous allons évoquer le même exemple sans rien changer concernant le code HTML de l'exemple 3, (ci-dessus du code HTML), mais cette fois-ci, en modifiant la "méthode POST" par la "méthode GET", vous observerez bien la différence entre ces deux méthodes dans la barre de l'URL de votre navigateur.

Exemple 3. bis ; pour démonstration avec la "Méthode GET" :

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

Exemple 4 :

<HTML>

       <HEAD>

               <TITLE> Formulaire &agrave; S&eacute;lection Multiple </TITLE>

       </HEAD>

                   <BODY BGCOLOR="#CCCCCC"> <B> <BR> <BR> <BR> <CENTER>

                   <H1> Activation de l'attribut de la "m&eacute;thode GET" comme exemple </H1> <BR> <BR>

                   <H2> Choisissez les chapitres à imprimer </H2>

                         <FORM NAME="Multiple" METHOD="GET" ACTION="http://www.electronique-et-informatique.fr/">

                         <SELECT NAME="Test" SIZE="6" multiple>

                         <OPTION> Introduction

                         <OPTION> Technique hypertexte

                         <OPTION> Environnement HTML

                         <OPTION> Adressage des documents

                         <OPTION> La structure du langage

                         <OPTION> Les balises

                         <OPTION> Accentuation

                         <OPTION> Les tableaux

                         <OPTION> Les images

                         <OPTION> Les images cliquables

                         <OPTION> Les formulaires

                         <OPTION> La s&eacute;curit&eacute;

                         <OPTION> Informatique

                         </SELECT> <BR> <BR> <BR> <BR>

                         <INPUT TYPE="SUBMIT" NAME="Selection" VALUE="Validation"> <BR> <BR>

                         <INPUT TYPE="RESET" NAME="Reset" VALUE="Tout d&eacute;s&eacute;lectionner">

                         </FORM> </B> </CENTER>

                   </BODY>

</HTML>

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

Le type HIDDEN :

Comme son nom l'indique, ce type d'attribut permet de cacher un champ de classe input ce qui signifie du point de vue graphique que rien n'apparaîtra dans le browser !

<INPUT TYPE="HIDDEN" NAME="nom_de_la_variable" VALUE="valeur_de_la_variable">

A quoi peut servir cette fonctionnalité ?

Dans un formulaire électronique, il arrive que les questions posées à un instant dépendent des réponses faites à l'instant précédent. On peut donc très bien imaginer la séquence suivante :

On génère un premier écran posant un certain nombre de questions.

A partir des réponses issues de ce premier ensemble de questions, on génère un deuxième écran comportant des questions complémentaires.

Comment cela fonctionnera-t-il dans des pages HTML ?

La première page s'exécute dans son cadre habituel : un fichier HTML standard définissant un formulaire avec appel d'un script CGI.

Lors de son exécution, ce script construit un nouveau formulaire, en tenant compte des réponses précédentes. On va donc exécuter avec ce nouveau formulaire un second script qui collectera de nouvelles données, mais devra aussi vraisemblablement faire connaître au script de traitement les premières données collectées. Ce premier jeu de données acquis lors de l'exécution du premier script est passé au second script à l'aide de champs input avec l'attribut hidden.

Tout se passera comme si le second formulaire faisait aussi l'acquisition des données du premier formulaire.

Nous ne pourrons pas montrer d'exemple avec l'attribut HIDDEN car, c'est un travail relativement simple.

Nous allons résumer cette leçon ci-après :

Le formulaire se décrit entre les balises <FORM> et </FORM>.

La balise <FORM> sera complétée au minimum par deux attributs suivants :

METHOD, prenant la valeur POST ou la valeur GET, définit le mode de transfert des données vers le script CGI.

ACTION qui définit l'URL d'un programme (script) chargé de traiter les données acquises depuis le formulaire.

Les propriétés de l'objet FORM sont :

action - URL CGI ou pseudo-protocole associé au formulaire.

method - GET ou POST (transfert des données au CGI).

target - fenêtre de destination.

enctype - encodage Mine des données.

elements - accès aux composants du formulaire.

La méthode de l'objet FORM est submit() qui déclenche la soumission (appelle le CGI avec les données collectées).

L'événement de l'objet FORM est onSubmit qui apparaît au moment de la soumission du formulaire.

La balise <INPUT> sert à définir des champs pour entrer un texte et des boutons permettant de choisir des options.

L'attribut TYPE, associé à la balise <INPUT> permet le choix de l'élément d'entrée.

Le type TEXT permet de collecter du texte alphanumérique.

Propriétés de l'objet TEXT :

name - nom attribué à la balise.

type - égal au type de la balise (text dans ce cas).

value - valeur saisie ou codée dans le HTML.

defaultValue - valeur attribuée par défaut dans le code HTML.

Méthode de l'objet TEXT :

focus() - amène le curseur dans le champ.

blur() - force le curseur hors du champ.

select() - sélectionne le contenu du champ.

Les événements de l'objet TEXT sont :

onChange - apparaît à la modification du champ de saisie.

Onfocus - apparaît à la prise du focus.

onBlur - apparaît à la perte du focus.

onSelect - apparaît lorsqu'on sélectionne tout ou partie du champ.

Le type SUBMIT déclenche l'envoi du formulaire vers le srcipt.

Propriétés de l'objet SUBMIT :

name, type, value - identiques à l'objet TEXT.

La méthode de l'objet SUBMIT est submit() qui déclenche la soumission.

L'événement de l'objet SUBMIT est onClick qui apparaît lors du clic sur le bouton.

Le type RESET permet d'effacer les données déjà entrées.

name, type, value - identiques à l'objet TEXT.

La méthode de l'objet RESET est click(), identique au clic que ferait l'utilisateur (clic programme)

L'événement de l'objet RESET est onClick qui apparaît lors du clic sur le bouton.

Le type PASSWORD permet de saisir un mot de passe de façon confidentielle.

Ses propriétés, méthodes et événement sont identiques à l'objet TEXT

Le type CHECKBOX permet de faire un bloc de boutons permettant un choix multiple d'options (fonction logique AND).

Le type RADIO permet de faire un bloc de boutons permettant un choix exclusif parmi plusieurs options (fonction logique ou exclusif).

Propriétés des objets CHECKBOX et RADIO :

name, type, value - identiques à l'objet TEXT.

checked - retourne true si la case est cochée.

defaultChecked - retourne true si c'est la case cochée par défaut.

index (radio seulement) - indice du bouton coché.

length (radio seulement) - nombre de boutons radio associés.

La méthode des objets CHECKBOX et RADIO est click(), identique au clic que ferait l'utilisateur (clic programme).

L'événement des objets CHECKBOX et RADIO est onClick qui apparaît lors du clic sur le bouton.

Le type HIDDEN sert à passer des données acquises dans un formulaire à un autre formulaire sans que rien n'apparaisse à l'écran.

Propriétés de l'objet HIDDEN :

name, type, value - identiques à l'objet TEXT.

La balise <SELECT> permet de générer des listes à choix simple (ou exclusif) ou à choix multiple (fonction AND). Elle se programme comme une liste où chacun des items est spécifié par la balise <OPTION>. De la présence de l'attribbut SIZE dépend de la présentation de la liste. Si la valeur donnée à l'attribut size est inférieure à 2 ou si l'attribut size est omis, la liste est interprétée comme un menu déroulant (pop-list). dans le cas contraire, elle s'affiche dans une fenêtre à ascenseur. La valeur donnée à l'attribut size donne alors le nombre de lignes visibles dans la fenêtre. L'option choix multiple résulte de la présence de l'attribut MULTIPLE.

Propriétés de l'objet SELECT :

name, type - identiques à l'objet TEXT ;

selectedIndex - index de la première ou de la seule option sélectionnée.

Méthode de l'objet SELECT :

blur, focus - identiques à l'objet TEXT.

Evénement de l'objet SELECT :

onChange, onFocus, onBlur - identiques à l'objet TEXT.

Propriétés de l'objet OPTION :

defaultSelected - a la valeur true si c'est option est sélectionnée par défaut.

selected - a la valeur true si l'option est sélectionnée.

text - texte associé à l'option.

value - valeur associée à l'option.

La balise <TEXTAREA> permet de créer une fenêtre avec ascenseurs horizontaux et verticaux dans laquelle on pourra saisir du texte. La valeur donnée aux attributs ROWS (lignes) et COLS (colonnes) délimite la taille de cette fenêtre.

Les propriétés, méthodes et options de l'objet TEXTAREA sont celles de l'objet TEXT.

RAPPELS :

Le script doit connaître l'élément du formulaire duquel provient une donnée. L'attribut NAME permet d'affecter un identificateur à chacun des éléments du formulaire.

L'attribut VALUE permet :

De spécifier un texte à écrire sur les boutons RESET et SUBMIT (information visuelle).

De préremplir un champ TEXTAREA (information visuelle)

D'attribuer une valeur à l'option pour les boutons RADIO et CHECKBOX (information pour le script).

Fin de cette seizième leçon, la prochaine sera consacrée à la programmation CGI concernant le langage 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.