FRANCAIS francophone2.gif ANGLAIS

 

 

Créée le, 12/06/2019

 Mise à jour le, 02/01/2020

Visiteurs N°  


Accueil
Retour aux Sites Principaux 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 Site en Français Site en Anglais
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 Définissant les Composants du Formulaire :


Les Balises Définissant les Composants du Formulaire :


Dans la hiérarchie des objets, toutes les balises qui vont être décrites jusqu'à la fin de cette leçon sont à considérer comme des propriétés de l'objet form.

<INPUT> ou <INPUT TYPE="TEXT"> :

Avec attribut (l'attribut implicite est du TYPE="text"), la balise <INPUT> définit une zone d'entrée de texte simple. Ainsi l'instruction est la suivante :

<INPUT NAME="prenom" align="absmiddle" TYPE="TEXT" STYLE="font-weight:bold; color:#000000; width:150px; height:20px; font-size:14px; background-color:#CCCCCC" value="Jean-Pierre"> ; (ne pas mettre l'accentuation dans les codes HTML ou PHP et autres langages, sinon, cela ne peut fonctionner).

Donnera l'affichage ci-après : dans lequel on peut saisir un text de longueur supérieure à la dimention de la case (scrolling horizontal).

Vous pouvez faire vos essais ci-après, en tapant du texte ou des chiffres :

L'attribut NAME :

Comme la balise <FORM>, permet une double identification :

Dans le script CGI, il permet de reconnaître la donnée et la valeur qui y a été saisie (prenom=Marianne par exemple).

Dans le script JavaScript, il permet d'accéder aux propriétés et aux méthodes de l'objet texte.

L'attribut SIZE :

<INPUT SIZE="10" NAME="prenom" align="absmiddle" TYPE="TEXT" STYLE="font-weight:bold; color:#000000; height:20px; font-size:14px; background-color:#CCCCCC" value="Jean-Pierre">

Cet attribut permet de fixer la longueur de la zone de texte (mesurée en caractères) comme ci-après :

L'attribut VALUE :

Cet attribut permet de préinscrire un texte dans le champ d'entrée des caractères. Cela sert par exemple à autodocumenter un formulaire ; dans la case où l'on attend le prénom d'un individu, on peut inscrire le texte suivant : "ici votre prénom". On pourrait aussi y inscrire la valeur la plus probable comme par exemple l'adresse d'un individu ; ce dernier conservera ce champ intact s'il n'a pas changé d'adresse.

<INPUT SIZE="50" NAME="adresse" value ="4, Rue Place de la République" align="absmiddle" TYPE="TEXT" STYLE="font-weight:bold; color:#000000; height:20px; font-size:14px; background-color:#CCCCCC">

Exemple :

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

Les propriétés d'un objet permettent d'en connaître les caractéristiques, par exemple son nom ou la valeur qui y est stockée. Ainsi, si la balise <INPUT> s'inscrit dans un formulaire dont le nom est par exemple FormFichier, on accède depuis une fonction JavaScript aux propriétés suivantes (dans le cas où l'utilisateur a saisi "Patricia"). :

document.FormFichier[n] qui va renvoyer le prenom

document.FormFichier.prenom.name qui va renvoyer le prenom

document.FormFichier[n].value qui va renvoyer le prenom Patricia

document.FormFichier.prenom.value qui va renvoyer le prenom Patricia

document.FormFichier[n].type qui va renvoyer le text

document.FormFichier.prenom.type qui va renvoyer le text

Sachant que les composants d'un formulaire peuvent être considérés comme des éléments d'un tableau numérotés à partir de zéro [0], on peut accéder à un élément soit par son indice, soit par son nom.

L'objet TEXT possède ainsi quatre propriétés :

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

value retourne la valeur saisie par l'utilisateur.

defaultValue retourne la valeur originale préinscrite dans le champ.

type retourne le type de l'objet (celui spécifié par l'attribut type dans la balise HTML, soit text dans le cas présent).

Les méthodes de l'objet TEXT :

La méthode d'un objet définit la fonction qu'on lui applique. Par exemple, si l'on souhaite choisir dans un formulaire, la première zone de saisie active, (zone dans laquelle "entrent" les caractères tapés au clavier), on programme une action particulière (la prise du focus) sur l'objet représentant cette zone de saisie.

Il existe trois méthodes pour l'objet INPUT :

focus permet de positionner le curseur de saisie dans le champ.

blur permet de forcer le curseur de saisie hors du champ.

select permet de sélectionner tout le texte saisi dans le champ.

Ainsi, dans l'exemple suivant, on sélectionne le champ prénom comme premier champ de saisie :

document.FormFichier.prenom.focus()

Le jeu de parenthèses est obligatoire lorsqu'on applique une méthode à un objet, car en réalité, on fait appel à une fonction (sans paramètres) intrinsèque à l'interpréteur JavaScript.

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

Le traitement des événements (programmation événementielle) est la partie la plus intéressante du langage. La page s'animera dès l'intervention de l'utilisateur (l'événement) qui entraîne, en effet, un traitement particulier.

Au niveau de la balise HTML, le programmeur indique pour chaque type d'événements qu'il souhaite traiter, la fonction qu'il va effectuer (onEvenement=uneFonction(avecOuSansParametres)). Il doit ensuite coder cette fonction dans la zone des scripts (JavaScript).

Considérons la balise HTML suivante :

<INPUT NAME="revenu" onFocus="aideContexte('indiquer le montant sans les centimes')" onBlur="verificationNum(this.value)">

Le programmeur positionne une zone pour la saisie du montant des revenus. Par la fonction "aideContexte" associée à l'événement onFocus, il fait en sorte que, lorsque l'utilisateur clique dans la case de saisie, il reçoive automatiquement, dans une zone assignée à cet effet, un message lui indiquant que le montant doit être indiqué sans les centimes. Lorsqu'il aura terminé la saisie de ce champ, on appellera automatiquement la fonction verificationNum avec comme paramètre la valeur saisie. Cette fonction pourra par exemple tester que les caractères saisis sont uniquement des chiffres. Notons que la formulation "this.value" référence la valeur saisie dans le champ.

Voici les événements que l'on peut associer à la balise INPUT :

onBlur apparaît lorsque l'on perd le focus, c'est-à-dire le curseur de saisie quitte la zone de saisie des caractères.

onChange apparaît lorsque la valeur qui existait dans la zone changée, soit que l'on modifie la valeur par défaut, soit que l'on saisisse dans une case préalablement vide, soit que l'on modifie une valeur précédemment acquise.

onFocus apparaît dès que l'on clique dans la case de saisie.

onSelect apparaît lorsque l'on sélectionne le texte dans la zone de saisie.

Les événements se programment toujours de la façon suivante :

Nom_d_evenement=fonction_de_traitement(parametre_1, parametre_2, parametre_n ...)

Même si aucun paramètre n'est nécessaire pour traiter l'événement, le jeu de parenthèses est obligatoire que l'on verra par la suite.

Exemple de traitement d'événements dans la balise <INPUT> :

L'exemple suivant illustre le fonctionnement des événements onFocus et onChange. Pour l'instant, on peut ne pas s'attacher au codage des deux fonctions, mais il est important de faire le lien entre ces fonctions et leurs spécifications dans la balise HTML.

<HTML>

     <HEAD>

                    <TITLE> Test Balise Input </TITLE>

        <SCRIPT>

        function aideContexte(texte) {

        // Affichage dans la ligne de la barre URL du Browser

        // et du message qui est re&ccedil;u dans l'argument "texte"

        status="texte";

        }

        function verifNum(valeur) {

        // V&eacute;rification que la cha&icirc;ne de caract&egrave;re repr&eacute;sent&eacute;e par l'argument

        // "valeur" ne contient que des caract&egrave;res num&eacute;riques

        for (var i=0; i<valeur.length; i++) {

        var caractere=valeur.substring(i, i+1);

        if (!(caractere > "0" && caractere < "9" )) {

        alert ("Entrez des chiffres ou des nombres entier uniquement ! ");

        return false;

        }

        }

        return true;

        }

        </SCRIPT>

        </HEAD>

        <BODY BGCOLOR="#CCCCCC">

        <CENTER>

        <H2> <BR> <BR> <font color="#800000"> ENTREZ UNIQUEMENT QUE DES CHIFFRES compris entre 1 &agrave; 8, Exemple : "12345678" </font> </H2>

        <H2> <a href="Sommaire_HTML_Programmes.php">Retour au sommaire PHP</a> </H2>

        <FORM NAME="FormFchier"> <BR> <BR> <BR> <BR>

        <INPUT NAME="montant" STYLE="font-weight:bold; color:#FFFF00; height:20px; font-size:16px; background-color:#800000" value="" onFocus="aideContexte('indiquez le montant sans les centimes')" onChange="verifNum(this.value)"> <BR> <BR> <BR> <BR>

        <INPUT TYPE="submit" name="montant" value="Valider" onClick="verifNum()">

        </FORM>

        </CENTER>

      </BODY>

      </HTML>

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

Nous devons apporter quelques mots d'explication sur la fonction verifNum. On effectue un balayaye de tous les caractères contenus dans la chaîne "valeur" à l'aide d'une boucle for commençant au premier caractère (i=0) et se terminant au dernier (i<valeur.length;). L'extraction d'un caractère de la chaîne est obtenue par la méthode substring. On teste ensuite pour chacun des caractères s'il appartient à l'ensemble des chiffres de (0 à 9).

On verra au cours de nos leçons JavaScript Les instructions de base pour le codage des instructions ainsi que les chaînes de caractères comme objets pour la méthode substring.

<INPUT TYPE="PASSWORD"> :

Cette balise est identique à l'objet TEXT que nous venons de décrire pour ce qui concerne ses propriétés et ses méthodes, mais il n'a AUCUN événement associé. Il est utilisé pour saisir une information confidentielle (mot de passe par exemple). Dans cette zone, les caractères tapés sont toujours remplacés par une étoile.

<font face="Arial" size="3" color="#000000">Entrez votre mot de passe : </font> <INPUT SIZE="10" NAME="Mot_de_Passe" align="absmiddle" TYPE="PASSWORD" STYLE="font-weight:bold; color:#000000; height:20px; font-size:14px; background-color:#CCCCCC" value="">

Exemple ; Entrez votre mot de passe : Entrez votre mot de passe :

<INPUT TYPE="SUBMIT"> :

Si le formulaire ne comportait qu'une balise <INPUT>, on pourrait déclencher le traitement simplement, en tapant le caractère "return" et en appyant sur entrée de votre clavier. Si le formulaire comporte plusieurs éléments de saisie, il devient alors nécessaire de disposer d'un ou plusieurs éléments de déclenchement.

La balise <INPUT> dont l'attribut TYPE prend la valeur SUBMIT définit un bouton qui déclenche l'envoie de tous les champs du formulaire vers le script CGI de traitement.

Il peut y avoir plusieurs boutons SUBMIT dans un formulaire, en fonction de l'opération que l'on désire effectuer. Par exemple, après s'être identifié auprès de sa banque, on trouvera des boutons SUBMIT pour consulter son compte, commander un chéquier, effectuer un virement, etc.).

L'attribut NAME :

Cet attribut est souvent omis lorsqu'il existe un seul bouton de soumission pour le formulaire. Il peut cependant servir lorsque l'on réalise un formulaire, en plusieurs étapes (plusieurs pages HTML différentes) et que le script CGI qui génère les pages est toujours le même. Une des méthodes possibles pour reconnaître quelle est la page qui envoie des données est d'analyser le nom associer au bouton qui a provoqué l'appel.

L'attribut VALUE :

Il permet de spécifier essentiellement le texte qui sera inscrit sur le bouton, mais aussi d'identifier le bouton qui a été sollicité dans le cas où il existerait plusieurs boutons de soumission portant le même nom sur la même page.

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

Ce qui provoquera l'affichage suivant :

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

Il possède trois propriétés :

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

value retourne la valeur affichée sur le bouton.

type retourne le type de l'objet (submit).

document.FormFichier[n] qui va renvoyer l'envoi.

document.FormFichier.envoi.name qui va renvoyer l'envoi.

document.FormFichier[n].value qui va renvoyer Validez.

document.FormFichier.envoi.value qui va renvoyer Validez.

document.FormFichier[n].type qui va renvoyer submit.

document.FormFichier.envoi.type qui va renvoyer submit.

Les méthodes de l'objet SUBMIT :

La seule méthode applicable sur l'objet SUBMIT est la méthode click.

Cette méthode permet de simuler dans le script JavaScript l'action qui fait l'utilisation, en cliquant sur le bouton.

Toujours dans notre exemple, si dans une fonction JavaScript, on programme l'instruction suivante :

document.FormFichier.envoi.click()

Cela aura le même effet que d'appuyer sur le bouton.

Dans quel cas cela peut-il être utile ? Imaginons un formulaire avec un certain nombre de champs de saisie. A chaque saisie d'un champ, un programme JavaScript s'exécute, teste la validité de la donnée acquise et la stocke en mémoire. Lorsque la dernière donnée est saisie, le programme effectue automatiquement la soumission en "cliquant lui-même" sur le bouton. Le bouton SUBMIT ne sera utilisé que si on l'on souhaite envoyer le formulaire partiellement rempli.

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

L'événement associé au bouton de soumission est onClick qui permet d'exécuter une fonction lorsque l'utilisateur appuie sur le bouton de soumission.

Exemple : <INPUT NAME="envoyer" TYPE="submit" value="Valider" onClick="verifNum()">

<INPUT TYPE="CHECKBOX"> :

Le type CHECKBOX sert à définir des ensembles de cases à cocher permettant un choix multiple entre différentes valeurs attribuables à une même variable (définie par NAME) ou à des variables différentes. Ce type d'élément, dans une utilisation traditionnelle pourrait tout à fait être comparé à une liste à sélection multiple. Nous verrons dans l'exemple JavaScript que l'on peut réaliser avec cet élément des fonctionnements plus astucieux.

Les balises HTML suivantes :

<INPUT TYPE="checkbox" NAME="selection" VALUE="Mecanique auto"> Mécanique <BR>

<INPUT TYPE="checkbox" NAME="selection" VALUE="Romancier"> Écriture <BR>

<INPUT TYPE="checkbox" NAME="selection" VALUE="Physique"> Énergie <BR>

<INPUT TYPE="checkbox" NAME="selection" VALUE="Electronique" checked> Synchronisation horizontale <BR>

<INPUT TYPE="checkbox" NAME="selection" VALUE="Informatique"> JavaScript

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

                               Mécanique
                               Écriture
                               Énergie
                               Synchronisation horizontale
                               JavaScript

L'attribut NAME :

Il permet de nommer les éléments de case à cocher, avec un même nom pour plusieurs éléments ou avec des noms différents pour chaque élément.

L'attribut VALUE :

Cet attribut permet de spécifier la valeur envoyée vers le script, cette valeur étant identifiée par l'attribut NAME.

L'attribut CHECKED :

Il permet de positionner par défaut le bouton en mode validé (bouton enfoncé ou bouton coché ou encore case à cocher, selon le type de plate-forme).

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

Cet objet possède cinq propriétés :

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

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

type retourne le type de l'objet (checkbox).

checked retourne true si la case est validée, false dans le cas contraire.

defaultChecked retourne true si la case est validée par la balise (attribut CHECKED), false dans le cas contraire.

Dans notre exemple, un nom unique (selection) a été choisi pour les cinq balises ci-dessus. Cet ensemble se comporte donc comme un tableau, si bien qu'on accède aux propriétés par leurs indices. Attention, un formulaire peut être considéré comme un tableau : On a dans ce cas un tableau de tableau nécessitant deux indices [k, n] k représente l'indice de l'ensemble des balises selection, et n l'indice d'un des éléments de selection que nous avions pris comme exemple.

document.FormFichier[n].name qui renvoie la selection mais aussi :

document.FormFichier[k,n].name qui renvoie la selection

document.FormFichier.selection[n].name qui renvoie la selection

document.FormFichier.selection[n].value qui renvoie Mecanique auto pour n=0

document.FormFichier.selection[n].value qui renvoie Romancier pour n=1

document.FormFichier.selection[n].value qui renvoie Physique pour n=2

document.FormFichier.selection[n].value qui renvoie Electronique pour n=3

document.FormFichier.selection[n].value qui renvoie Informatique pour n=4

Mais aussi :

document.FormFichier.[k,n].value qui renvoie Mecanique auto pour n=0

document.FormFichier.[k,n].value qui renvoie Romancier pour n=1

document.FormFichier.[k,n].value qui renvoie Physique pour n=2

document.FormFichier.[k,n].value qui renvoie Electronique pour n=3

document.FormFichier.[k,n].value qui renvoie Informatique pour n=4

document.FormFichier.selection[n].type qui renvoie checkbox.

document.FormFichier.selection[n].checked qui renvoie true pour n=0

document.FormFichier.selection[n].defaultChecked qui renvoie true pour n=0

Ces derniers exemples peuvent bien sûr être référencés avec un double indice.

La méthode de l'objet CHECKBOX :

Il s'agit encore de la méthode Click, qui permet par une instruction du script de positionner la case en mode coché.

document.FormFichier.selection[n].Click()

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

L'événement associé à l'objet Checkbox est onClick qui permet d'exécuter une fonction lorsque l'utilisateur coche la case correspondante.

<INPUT NAME="selection" TYPE="checkbox" value="Valider" onClick="verifNum()">

Exemple de traitement d'événements sur la CHECKBOX :

Dans le TGV, il n'est possible de se faire servir un repas à sa place qu'en première classe.

Le formulaire ci-dessous fonctionne ainsi :

Si l'on coche la "Première classe", on décoche automatiquement la "Deuxième classe". On peut alors cocher la case "Demande de repas".

Si l'on coche la "Deuxième classe", on décoche automatiquement la Première classe" et on décoche aussi la case de "Demande de repas".

Si l'on coche la "Demande de repas", on décoche automatiquement la "Deuxième classe" si elle était cochée, et on coche automatiquement la "Première classe".

Voici le code HTML avec feuille de style :

<HTML>

       <HEAD>

               <TITLE> Demande Repas </TITLE>

                         <STYLE TYPE="text/css">

                               * { margin: 0; }

                               html { font: 14px / 20px Arial, sans-serif }

                               div { opacity: 1; position: absolute }

                               #div1 { opacity: 1; top: 240px; left: 220px; width: 140px; height: 18px; border: 1px dashed #696; padding: 15px; color: #FFFFFF; background-color: #000000; }

                               #div2 { opacity: 1; top: 0px; left: 171px; width: 150px; height: 18px; border: 1px dashed #696; padding: 15px; color: #FFFFFF; background-color: #FF0000; }

                               #div3 { opacity: 1; top: 0px; left: 181px; width: 145px; height: 18px; border: 1px dashed #696; padding: 15px; color: #FFFFFF; background-color: #000000; }

                               #div4 { opacity: 1; top: 30px; left: 150px; width: 900px; height: 18px; border: 1px dashed #900; padding: 20px 20px 20px; background-color: #FFDDFF }

                               body { background-color: #CCCCCC }

                         </STYLE>

                                   <SCRIPT LANGUAGE="JavaScript">

                                   function Demande_repas(NumDaniel) {

                                   // Classe[0] = 1&egrave;re classe

                                   // Classe[1] = 2&egrave;me classe

                                   if (NumDaniel==1) {

                                   // On a cliqu&eacute; sur 1&egrave;re classe qui &eacute;tait coch&eacute; ou d&eacute;coch&eacute;

                                   // On d&eacute;clique 2&egrave;me classe

                                   this.document.form1.classe[1].checked=false;

                                   if (this.document.form1.classe[0].checked=false) {

                                   // Si on d&eacute;coche, alors, on d&eacute;coche aussi repas

                                   this.document.form1.repas.checked=false;

                             }

                       }

                                   if (NumDaniel==2) {

                                   // On a cliqu&eacute; sur 2&egrave;me classe

                                   // On d&eacute;clique premi&egrave;re classe

                                   this.document.form1.classe[0].checked=false;

                                   // On d&eacute;clique repas

                                   this.document.form1.repas.checked=false;

                       }

                                   if (NumDaniel==3) {

                                   // On a cliqu&eacute; sur repas

                                   if (this.document.form1.classe[1].checked=true)

                                   // Si 2&egrave;me classe &eacute;tait coch&eacute;e, alors, on le d&eacute;coche

                                   this.document.form1.classe[1].checked=false;

                                   // Dans tous les cas, on coche alors 1&egrave;re classe

                                   this.document.form1.classe[0].checked=true;

                  }

             }

                                   </SCRIPT>

       </HEAD>

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

            <DIV ID="div4"> <font face="Arial" size="5"> <b> Les repas doivent &ecirc;tre servis uniquement qu'en premi&egrave;re classe. Eh ben oui !!! </b> </font>

            <FORM NAME="form1"> <BR> <BR> <BR>

<DIV ID="div1"> <INPUT TYPE="checkbox" name="classe" value="1" onClick="Demande_repas(1)"> <b> Premi&egrave;re classe

<DIV ID="div2"> <INPUT TYPE="checkbox" name="classe" value="2" onClick="Demande_repas(2)"> Deuxi&egrave;me classe

<DIV ID="div3"> <INPUT TYPE="checkbox" name="repas" value="3" onClick="Demande_repas(3)"> Demande Repas </b>

            </FORM> </CENTER>

            </BODY>

</HTML>

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

Les commentaires (// "couleur verte foncée") insérés dans le code source expliquent le fonctionnement du script.

<INPUT TYPE="RADIO">

On utilise généralement un ensemble de boutons radio pour choisir une et une seule option parmi n. Le fonctionnement peut encore être dans ce cas assimilé à celui d'une liste à sélection unique. Cliquer sur un bouton "déclique" automatiquement les autres. L'exemple suivant donne un choix exclusif entre Disquette, CD-Rom, Disque dur, Carte mère, Bloc d'alimentation.

<INPUT TYPE="radio" NAME="materiels" VALUE="CD" checked> CD-Rom

<INPUT TYPE="radio" NAME="materiels" VALUE="Disque"> Disquette

<INPUT TYPE="radio" NAME="materiels" VALUE="DisqueDur"> Disque dur

<INPUT TYPE="radio" NAME="materiels" VALUE="Carte"> Carte mère

<INPUT TYPE="radio" NAME="materiels" VALUE="Alimentation"> Bloc d'alimentation

Provoquerons l'affichage ci-après : CD-Rom Disquette Disque dur Carte mère Bloc d'alimentation

L'attribut NAME :

Le browser identifie un ensemble de boutons radio par le fait qu'ils possèdent chacun le même nom (attribut NAME).

L'attribut CHECKED :

Il permet de sélectionner une option par défaut ou de valider l'option la plus probable. Dans l'exemple ci-dessus, le bouton (CD-ROM) est enfoncé (ou coché).

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

Cet objet possède sept propriétés :

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

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

type retourne le type de l'objet (radio).

checked retourne true si la case est validée, false dans le cas contraire.

defaultChecked returne true si la case est validée par la balise (attribut CHECKED), false dans le cas contraire.

index dans le rang (l'indice) du bouton qui est enfoncé.

length retourne le nombre d'éléments de type radio ayant le même attribut NAME (donc définissant un bloc).

Dans notre exemple, un nom unique "materiels" a été choisi pour les cinq balises. Cet ensemble se comporte donc comme un tableau, si bien qu'on accède aux propriétés par leurs indices. On est toujours dans le cas d'un formulaire pouvant être considéré comme un tableau et on doit toujours considérer le double indice [k,n] k représente l'indice de l'ensemble des balises "materiels", et n l'indice d'un des éléments de "materiels".

document.FormFichier[n].name qui renvoie materiels. Mais aussi :

document.FormFichier[k,n].name qui renvoie materiels.

document.FormFichiermateriels[n].name qui renvoie materiels.

document.FormFichier.materiels[n].value qui renvoie CD pour n=0.

document.FormFichier.materiels[n].value qui renvoie Disque pour n=1.

document.FormFichier.materiels[n].value qui renvoie DisqueDur pour n=2.

document.FormFichier.materiels[n].value qui renvoie Carte pour n=3.

document.FormFichier.materiels[n].value qui renvoie Alimentation pour n=4.

Mais aussi :

document.FormFichier.[k,n].value qui renvoie CD pour n=0.

document.FormFichier.[k,n].value qui renvoie Disque pour n=1.

document.FormFichier.[k,n].value qui renvoie DisqueDur pour n=2.

document.FormFichier.[k,n].value qui renvoie Carte pour n=3.

document.FormFichier.[k,n].value qui renvoie Alimentation pour n=4.

document.FormFichier.materiels[n].type qui renvoie radio

document.FormFichier.materiels[n].checked qui renvoie true pour n=0.

document.FormFichier.materiels[n].defaultChecked qui renvoie true pour n=0.

Ces derniers exemples peuvent bien sûr être aussi référencés avec un double indice.

La méthode de l'objet RADIO :

Il s'agit là encore de la méthode Click, qui permet par une instruction du script, de positionner la case en mode coché.

document.FormFichier.materiels[n].click()

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

L'événement associé à l'objet RADIO est onClick, qui permet d'exécuter une fonction lorsque l'utilisateur coche la case correspondante.

<INPUT TYPE="radio" NAME="materiels" VALUE="CD" onClick="demande('cd')" checked> CD-ROM

<INPUT TYPE="radio" NAME="materiels" VALUE="Disque" onClick="demande('disk')"> Disquette

<INPUT TYPE="RESET"> :

Ce bouton permet à tout moment d'effacer les données qui sont en cours de saisie sur le formulaire.

L'attribut NAME :

C'est l'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 NAME="initialisation" TYPE="reset" VALUE="Effacer">

Donne l'affichage ci-après :  

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

Cet objet possède trois propriétés :

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

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

type qui retourne reset.

La méthode de l'objet RESET :

Il s'agit encore de la méthode Click, qui permet par une instruction du script 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.initialisation.click()

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

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

<INPUT TYPE="reset" NAME="init" value="Effacer" onClick="demandeEfface()">

Fin de ce deuxième chapitre, le prochain sera consacré "aux balises définissant les composants du formulaire qui sera la suite de cette leçon", toujours dans le même domaine HTML.







Nombre de pages vues, à partir de cette date : le 27 Décembre 2019

compteur visite blog gratuit


Mon audience Xiti



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

Version du site : 11. 5. 12 - Site optimisation 1280 x 1024 pixels - Faculté de Nanterre - Dernière modification : 02 JANVIER 2020.

Ce site Web a été Créé le, 12 JUIN 2019 et ayant Rénové, en JANVIER 2020.