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.
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 :
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çu dans l'argument "texte"
status="texte";
}
function verifNum(valeur) {
// Vérification que la chaîne de caractère représentée par l'argument
// "valeur" ne contient que des caractères numé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 à 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>
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.
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.
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.
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".
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.
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.
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.
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.
Leçons suivantes
Leçons précédentes
Bas de page
dans lequel on peut saisir un text de longueur supérieure à la dimention de la case (scrolling horizontal).
Haut de page