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 :
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è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è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é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électionnant plusieurs noms par exemple ! </b> </font>
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 <<.
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ç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)">
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écapitulatif des Options </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function Creation_Options() {
// Cré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électionné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élection est le N° " + i);
}
}
function Deselection_Options() {
// Désélection de toutes les options sélectionnées
for (i=0; i<document.forms[0].elements[0].options.length; i++) {
if (document.forms[0].elements[0].options[i].selected)
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.
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...
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" :
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 !
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.
Leçons suivantes
Leçons précédentes
Bas de page
Haut de page