SELFHTML: JavaScript / Référence objet / elements

SELFHTML/Aides à la navigation

JavaScript/DOM

Référence objet

elements

elements: généralités sur l'utilisation

Propriétés:

checked (coché)
defaultChecked (coché par défaut)
defaultValue (valeur entrée par défaut)
form (nom du formulaire)
name (nom de l'élément)
type (type de l'élément)
value (valeur/contenu de l'élément)

Méthodes:

blur() (quitter l'élément)
click() (cliquer sur l'élément)
focus() (positionner sur l'élément)
handleEvent() ((traiter l'événement)
select() (sélectionner du texte)

Sous-objets:

options

elements: généralités sur l'utilisation

Avec l'objet elements, qui se trouve sous l'objet forms dans la hiérarchie JavaScript, vous avez accès aux éléments d'un formulaire.

Les manières suivantes sont à votre disposition pour adresser un élément déterminé d'un formulaire avec JavaScript:

Schéma 1 / exemple 1:

document.forms[#].elements[#].propriété
document.forms[#].elements[#].méthode()

document.forms[0].elements[0].value = "ineptie";
document.forms[0].elements[0].blur();

Schéma 2 / exemple 2:

document.nom_formulaire.nom_element.propriété
document.nom_formulaire.nom_element.méthode()

document.Testformular.Eingabe.value = "ineptie";
document.Testformular.Eingabe.blur();

Explication:

vous pouvez adresser des éléments de formulaire de l'une des façons suivantes:

avec un numéro d'index (comme dans le schéma 1 /exemple 1)
Pour l'utilisation de numéros d'index, mentionnez document.forms suivi, entre crochets, du numéro d'ordre du formulaire que vous voulez adresser dans le fichier. Pensez que le compteur commence à 0, c'est à dire qu'il vous faut adresser le premier formulaire avec forms[0], le deuxième avec forms[1] etc... Pour compter, prévaut l'ordre dans lequel les commandes <form> sont notées dans le fichier. Puis suit la mention elements, à la suite de laquelle vous notez à nouveau un numéro d'index entre crochets. Là aussi, le compteur commence à 0, c'est à dire que le premier élément d'un formulaire a le numéro d'index 0, le deuxième le numéro d'index 1 etc...
avec des noms (comme dans le schéma 2 /exemple 2)
Pour cela, mentionnez avec document.nom_formulaire.nom_element le nom du formulaire et de l'élément que vous avez mentionnés lors de la définition du formulaire et de l'élément dans les repères HTML correspondants dans l'attribut name=.

Attention:

Derrière ce qui est désigné ici comme objet élément, se cachent en réalité plusieurs objets JavaScript assurément très semblables. Ainsi, il y a des objets pour les champs de saisie, pour les listes de choix, différentes sortes de boutons. Tous ces éléments sont cependant résumés en "elements-Array" (tableaux d'éléments). Tous ces objets sont adressés de la même manière. Ils ne se distinguent en fin de compte que par leurs propriétés et méthodes. Pour cette raison, il est toujours noté, pour les propriétés et méthodes traitées dans cette partie de la documentation, à quels objets elles s'appliquent. Les mentions suivantes y seront distinguées (les liens mènent aux descriptions correspondantes dans la documentation HTML):

boutons pouvant être cliqués cases à cocher champs pour fichier à transmettre éléments cachés dans les formulaires Champs de saisie pour mot de passe cases d'option Boutons pour interrompre Boutons pour envoyer champs de saisie à une ligne champs de saisie à plusieurs lignes

Pour les propriétés et méthodes de l'objet elements, il sera indiqué à chaque fois sur lequel de ces types d'éléments la propriété ou la méthode peut être utilisée.

Éléments de groupe:

Les cases à cocher et les cases d'option forment en principe des groupes de plusieurs éléments apparentés, qui ont la même mention pour name= et qui ne se distinguent que par la mention value=. De tels groupes portant le même nom forment à leur tour un tableau en JavaScript.

Exemple:

Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<form name="formulaire" action="" method="get">
<input type="radio" name="favoris" value="Daniel">
<input type="radio" name="favoris" value="Antoine">
<input type="radio" name="favoris" value="Gisèle">
</form>
<script type="text/javascript">
<!--
 document.formulaire.favoris[2].checked = true;
//-->
</script>
</body></html>

Explication:

Dans l'exemple est défini un formulaire avec plusieurs cases d'option. Le groupe de cases d'option apparentées a le même nom. En JavaScript, il vous est possible d'adresser séparément de telles cases, en adressant l'élément (en tant que groupe). Derrière le nom d'élément notez ensuite, entre crochets, le numéro d'index de l'élément désiré. Dans l'exemple c'est favoris[2] qui est adressé. C'est le troisième élément du groupe.

Attention:

Les listes de choix n'apparaissent pas ici. Pour accéder à de telles listes avec JavaScript, vous disposez du sous-objet options.

checked

Sauvegarde si ou qu'une case à cocher ou une case d'option est activée ou non. Les valeurs possibles sont true ou 1 ou false ou 0.

Peut être utilisé sur: boutons pouvant être cliqués cases à cocher cases d'option

Exemple:

Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Ensuite() {
 if(document.formulaire_test.mode[0].checked == true)
  window.location.href="fichierfrm.htm"
 else if(document.formulaire_test.mode[1].checked == true)
  window.location.href="fichier.htm"
 else
  alert("Veuillez faire un choix");
}
//-->
</script>
</head><body>
<form name="formulaire_test" action="">
<input type="radio" name="mode" value="avec"> avec cadres
<input type="radio" name="mode" value="sans"> sans cadres
<br><input type="button" value="Lancer" onClick="Ensuite()">
</form>
</body></html>

Explication:

L'exemple contient un formulaire avec deux cases d'option. L'utilisateur peut ainsi choisir s'il veut voir les pages suivantes avec ou sans cadres. En cliquant sur le bouton Lancer la fonction Ensuite() est appelée. Cette fonction vérifie si l'une des deux cases d'option est activée. Selon laquelle des deux est activée, un fichier différent sera appelé ( location.href). Si aucune des deux cases d'option n'est activée, un message d'erreur sera sorti.

Attention:

Vous ne pouvez, avec Opera 5.12 sous Windows, modifier la propriété checked pour les cases d'option que lorsque la construction de la page est terminée.

defaultChecked

Sauvegarde si ou qu' une case à cocher ou une case d'option est activée par défaut ou non. Les valeurs possibles sont true ou 1, ou false ou 0.

Peut être utilisé sur: cases à cocher cases d'option

Exemple:

Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Ensuite() {
 if(document.formulaire_test.mode[0].checked == true)
  window.location.href="fichierfrm.htm"
 else
  window.location.href="fichier.htm"
}
//-->
</script>
</head><body>
<form name="formulaire_test" action="">
<input type="radio" name="mode" value="avec"> avec DHTML
<input type="radio" name="mode" value="sans"> sans DHTML
<br><input type="button" value="Lancer" onClick="Ensuite()">
</form>
<script language="JavaScript" type="text/javascript">
<!--
dhtml = false;
if(document.layers || document.all || document.getElementById) dhtml = true;
if(dhtml == true && document.formulaire_test.mode[0].defaultChecked == false)
   document.formulaire_test.mode[0].checked = true;
//-->
</script>
</body></html>

Explication:

L'exemple contient un formulaire avec deux cases d'option. L'utilisateur peut ainsi choisir s'il veut voir les pages suivantes du projet avec HTML dynamique ou sans HTML dynamique. En cliquant sur le bouton Lancer, la fonction Ensuite() est appelée. Cette fonction vérifie si l'une des deux cases d'option est activée. Selon laquelle des deux est activée, un fichier différent sera appelé ( location.href).
Cependant, un autre passage JavaScript est encore noté sous le formulaire. S'il est placé dessous, c'est parce que le code qu'il contient doit être exécuté tout de suite tout en posant comme condition préalable l'existence du formulaire. Il est demandé si l'un des objets typiques pour HTML dynamique document.layers ou bien document.all ou bien la méthode typique document.getElementById est disponible. Si oui, une variable dhtml se voit affecter la valeur true. De plus, il est demandé avec defaultChecked si la possibilité de choisir d'utiliser DHTML est activée comme choix par défaut dans le formulaire ou non. Si non, et si DHTML est disponible (donc si dhtml a été fixé sur true), la possibilité de choix pour DHTML sera cochée a posteriori.

Attention:

Opera 5.12 sous Windows interprète certes, la propriété defaultChecked, n'exécute toutefois pas l'exemple ci-dessus, étant donné que la modification de l'état de la case à cocher intervient avant la fin du chargement de la page. Opera 5.02 ne connaît pas encore la propriété defaultChecked.

defaultValue

Sauvegarde le texte par défaut d'un champ de saisie.

Peut être utilisé sur: champs de saisie à une ligne champs de saisie à plusieurs lignes

Exemple:

Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<form name="formulaire_test" action="">
URI: <input size="40" name="uri" value="http://www.xy.fr/">
<input type="button" value="Vas-y"
onClick="window.location.href=document.formulaire_test.uri.value">
</form>
<script type="text/javascript">
<!--
if(navigator.userAgent.indexOf("en") > 0)
{
 document.formulaire_test.url.defaultValue = "http://www.xy.com/";
 document.formulaire_test.url.value = document.formulaire_test.url.defaultValue;
}
//-->
</script>
</body></html>

Explication:

L'exemple contient un formulaire avec un champ de saisie et un bouton. Le champ de saisie est occupé par défaut avec http://www.xy.fr/. En cliquant sur le bouton, la valeur du champ de saisie est affectée à window. location.href. C'est ainsi que l'adresse URI correspondante sera appelée..
Cependant, avant même que l'utilisateur puisse seulement éditer le champ, est exécuté dés la lecture du fichier le passage JavaScript situé sous le formulaire. S'il est placé dessous, c'est parce que le code qu'il contient doit être exécuté tout de suite tout en posant comme condition préalable l'existence du formulaire. Il y est demandé si dans l'identification du navigateur ( navigator.userAgent) apparaît la composante en ( indexOf()). Si oui, il s'agit d'un navigateur en langue anglaise. Dans ce cas là, defaultValue du champ de saisie sera modifié en http://www.xy.com/. La valeur modifiée ne sera toutefois visible que lorsqu'elle sera affectée à la propriété value. Cela s'obtient avec la deuxième instruction. Le champ de saisie du formulaire est alors occupé http://www.xy.fr/ ou http://www.xy.com/ - en rapport avec la langue du navigateur.

Attention:

Opera 5.02 ne connaît pas encore la propriété defaultValue. Pourtant, ce navigateur interprète aussi l'exemple. Cela est dû au fait qu'avec l'affectation defaultValue="http://www.xy.com/" la valeur de la propriété est entrée manuellement. Dès lors cependant que vous désirez faire dépendre un JavaScript de la valeur originale, il vous faut considérer que cette propriété n'existe pas.

form

Sauvegarde le formulaire à l'intérieur duquel se trouve l'élément. Derrière la propriété form, vous pouvez encore noter toutes les propriétés et méthodes de l'objet forms.

Peut être utilisé sur: boutons pouvant être cliqués cases à cocher champs pour fichier à transmettre éléments cachés dans les formulaires Champs de saisie pour mot de passe cases d'option Boutons pour interrompre Boutons pour envoyer champs de saisie à une ligne champs de saisie à plusieurs lignes

Exemple:

Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<form name="formulaire_test" action="">
<input type="button" name="lebouton" value="Test"
onClick="alert(document.formulaire_test.lebouton.form.name)">
</form>
</body></html>

Explication:

L'exemple contient un formulaire avec un bouton qui lorsqu'on le clique sort le nom du formulaire.

name

Sauvegarde le nom d'un élément comme il a été affecté en HTML lors de le définition de l'élément avec l'attribut name=.

Exemple:

Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<form name="formulaire_test" action="">
<input type="button" name="lebouton" value="Test"
onClick="alert(document.formulaire_test.lebouton.name)">
</form>
</body></html>

Explication:

L'exemple contient un formulaire avec un bouton qui lorsqu'on le clique sort le nom du bouton.

type

Sauvegarde le type d'élément d'un élément de formulaire.

Exemple:

Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<form name="formulaire_test" action="">
<input type="radio" name="auto" value="Renault"> Renault<br>
<input type="radio" name="auto" value="Mercedes"> Mercedes<br>
Nom: <input size="30" name="Nom"><br>
<input type="submit" name="bouton_envoi" value="Envoyer">
</form>
<script type="text/javascript">
<!--
for(var i=0;i<document.formulaire_test.length;++i)
 {
  document.write("<br>Nom d'élément: " + document.forms[0].elements[i].name);
  document.write(", type d'élément: " + document.forms[0].elements[i].type);
 }
//-->
</script>
</body></html>

Explication:

L'exemple contient un formulaire avec différents éléments. Aux fins du test est noté sous le formulaire un passage JavaScript. S'il est placé dessous, c'est parce que le code qu'il contient doit être exécuté tout de suite tout en posant comme condition préalable l'existence du formulaire. Dans le Script, le nom de l'élément et le type de l'élément seront écrits dans le fichier pour tous les éléments avec document.write().

value

Sauvegarde la valeur qui a été entrée dans un élément de formulaire ou affectée à un élément de formulaire.

Exemple:

Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<form name="formulaire_test" action="">
Name: <input size="30" name="Name">
<input type="submit" name="bouton_envoi" value="Envoyer">
<input type="hidden" name="navigateur" value="">
</form>
<script type="text/javascript">
<!--
 document.formulaire_test.navigateur.value = navigator.userAgent;
 document.write(document.formulaire_test.Browser.value);
//-->
</script>
</body></html>

Explication:

L'exemple contient un formulaire avec, entre autres, un champ caché (<input type="hidden">). Sous le formulaire est noté un passage JavaScript. S'il est placé dessous, c'est parce que le code qu'il contient doit être exécuté tout de suite tout en posant comme condition préalable l'existence du formulaire. Dans le Script, le type de navigateur de l'utilisateur (document.formulaire_test.navigateur.value) est affecté à la valeur du champ caché du formulaire ( navigator.userAgent). Ce contenu du formulaire créé de façon dynamique sera transmis quand l'utilisateur enverra le formulaire. Dans l'exemple ci-dessus la valeur du champ caché est écrite dans le document pour démonstration avec la méthode document.write().

blur()

Retire le curseur ou la zone de saisie active de l'élément concerné. N'attend pas de paramètres.

Exemple:

Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<form name="formulaire_test" action="">
<input name="champ" size="30" onFocus="this.blur()">
</form>
</body></html>

Explication:

L'exemple contient un formulaire avec un champ. Si l'utilisateur veut positionner le curseur dans un champ le curseur sera aussitôt retiré du champ avec this.blur(). Par le mot-clé this il est fait référence à l'objet actuel, dans ce cas l'élément champ, et la méthode est appliquée à cet objet. Une telle mesure peut être judicieuse si vous voulez utiliser un champ exclusivement comme champ de sortie dans lequel l'utilisateur doit ne rien pouvoir éditer.

Attention:

Le curseur n'est pas toujours retiré du champ de saisie. La saisie d'un contenu est cependant empêchée.

Opera 5.12 "connaît" certes la méthode blur(), cependant elle reste sans effet. Sous Opera 5.02 l'application de cette méthode crée une erreur JavaScript.

click()

Provoque un cliquement automatique sur le bouton concerné. N'attend aucun paramètre.

Peut être utilisé sur: boutons pouvant être cliqués cases à cocher champs pour fichier à transmettre Boutons pour interrompre Boutons pour envoyer

Exemple:

Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<form name="formulaire_test" action="">
En quelle année est mort Goethe?<br>
<input size="6" name="annee_mort">
<input type="button" name="lebouton" value="Ensuite" onClick="Check()">
</form>
<script type="text/javascript">
<!--
function Check() {
 if(document.formulaire_test.annee_mort.value != "1832")
  window.location.href = "rien.htm";
 else
  window.location.href = "succes.htm";
}
window.setTimeout("document.formulaire_test.lebouton.click()",10000);
//-->
</script>
</body></html>

Explication:

L'exemple contient un formulaire dans lequel l'utilisateur doit entrer l'année de la mort de Goethe. Si l'utilisateur ne clique pas dans les 10 secondes sur le bouton Ensuite, cela se passe automatiquement. C'est à cela que sert la dernière instruction dans le Script noté sous le formulaire. S'il est placé dessous, c'est parce que le code qu'il contient doit être exécuté tout de suite tout en posant comme condition préalable l'existence du formulaire. Avec document.formulaire_test.lebouton.click(), le cliquement du bouton sera effectué sans intervention de l'utilisateur. L'appel de la méthode est incorporé dans window.setTimeout() avec un retard de 10000 millièmes de secondes, soit 10 secondes.
Lors du cliquement sur le bouton, peu importe s'il s'est fait automatiquement ou par l'utilisateur, la fonction Check() est appelée. Cette fonction vérifie si, dans le champ de saisie pour l'année de la mort, se trouve la bonne valeur. Selon le cas, une autre page est appelée ( location.href).

focus()

positionne le curseur ou la zone de saisie active sur l'élément concerné. N'attend pas de paramètre.

Exemple:

Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Check() {
 if(document.formulaire_test.annee_mort.value != "1832")
 {
  alert("Vous ne le savez pas tout simplement!");
  document.formulaire_test.annee_mort.focus();
 }
 else
 {
  alert("Bravo!");
  window.location.href = "succes.htm";
 }
}
//-->
</script>
</head><body>
<form name="formulaire_test" action="">
En quelle année est mort Goethe?<br>
<input size="6" name="annee_mort">
<input type="button" value="Ensuite" onClick="Check()">
</form>
</body></html>

Explication:

L'exemple contient un formulaire dans lequel l'utilisateur doit entrer l'année de la mort de Goethe. Quand l'utilisateur clique sur le bouton Ensuite, la fonction Check() est appelée. Cette fonction vérifie si la valeur correcte pour la mort de Goethe a été entrée dans le champ de saisie. En fonction de cela, soit un message acidulé sera sorti avec alert(), soit c'est "Bravo" qui sera sorti avec l'appel d'une autre page ( location.href). Si l'utilisateur reste sur la page parce que la saisie manque ou qu'elle est fausse, le curseur est positionné avec document.formulaire_test.annee_mort.focus() sur le champ de saisie pour l'année de la mort.

handleEvent()

Transmet un événement à un élément en mesure de réagir à cet événement. Fonctionne exactement comme handleEvent() pour l'objet window pour l'objet window (pour plus d'informations, s'y reporter).

select()

Sélectionne tout le texte contenu dans le champ. N'attend pas de paramètres.

Peut être utilisé sur: Champs de saisie pour mot de passe champs de saisie à une ligne champs de saisie à plusieurs lignes

Exemple:

Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<form name="formulaire_test" action="">
Copiez le texte suivant dans la ligne d'adresse URL de votre navigateur:<br>
<input type="text" size="40" name="Code" value="javascript:top.close()">
</form>
<script type="text/javascript">
<!--
 document.formulaire_test.Code.focus();
 document.formulaire_test.Code.select();
//-->
</script>
</body></html>

Explication:

L'exemple contient un formulaire avec un seul champ. Le champ est occupé par défaut par la valeur "javascript:top.close()" (Notez bien que ce n'est pas une instruction JavaScript mais seulement un contenu de champ). Sous le formulaire se trouve un passage JavaScript. S'il est placé dessous, c'est parce que le code qu'il contient doit être exécuté tout de suite tout en posant comme condition préalable l'existence du formulaire. Là, le curseur est positionné dans un premier temps avec document.formulaire_test.Code.focus() sur le champ du formulaire. Car la sélection de texte n'est possible que lorsque le champ est actif. Le texte par défaut du champ de formulaire est ensuite sélectionné avec document.formulaire_test.Code.select().


	options
	forms

SELFHTML/Aides à la navigation

JavaScript/DOM

Référence objet