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

SELFHTML/Quickbar JavaScript 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éthode:

blur() (quitter l'élément)
click() (cliquer 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[#].propriete
document.forms[#].elements[#].methode()

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

Schéma 2 / exemple 2:

document.nomformulaire.nomelement.propriete
document.nomformulaire.nomelement.methode()

document.formulairetest.entree.value = "ineptie";
document.formulairetest.entree.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 le nom du formulaire (comme dans le schéma 2 /exemple 2)
Pour cela, mentionnez avec document.nomformulaire.nomelement 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 élément objet, 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 boites de vérification boutons-fichiers éléments cachés champs de saisie pour mot de passe boutons radio 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 boites de vérification et les boutons radio 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 Array en JavaScript

Exemple:

document.formulaire.favoris[2].checked = true;

Explication:

L'exemple accepte les commandes HTML suivantes:
input type=radio name="favoris" value="Daniel"
input type=radio name="favoris" value="Antoine"
input type=radio name="favoris" value="Marianne"
Le groupe de boutons radio apparentés a le même nom. En JavaScript, il vous est possible d'adresser séparément de tels boutons, 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'un bouton radio ou de vérification est activé ou non. Les valeurs possibles sont true (ou 1) ou false (ou 0).

Peut être utilisé sur: boutons pouvant être cliqués boites de vérification boutons radio

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function plusloin()
{
 if(document.formulairetest.mode[0].checked == true)
  window.location.href="contenufrm.htm"
 else if(document.formulairetest.mode[1].checked == true)
  window.location.href="contenu.htm"
 else
  alert("Veuillez faire un choix");
}
</script>
</head><body>
<form name="formulairetest">
<input type=radio name="mode" value="avec"> avec frames
<input type=radio name="mode" value="sans"> sans frames
<br><input type=button value="démarrer" onClick="plusloin()">
</form>
</body></html>

Explication:

L'exemple contient un formulaire avec deux boutons radio. L'utilisateur peut ainsi choisir s'il veut voir les pages suivantes avec ou sans frames. En cliquant sur le bouton demarrer la fonction plusloin() est appelée. Cette fonction vérifie si l'un des deux boutons radio est activé. Selon lequel des deux est activé, un fichier différent sera appelé ( location.href). Si aucun des deux boutons n'est activé, un message d'erreur sera sorti.

defaultChecked

Sauvegarde si ou qu'un bouton radio ou de vérification est activé par défaut ou non. Les valeurs possibles sont true (ou 1) ou false (ou 0).

Peut être utilisé sur: boites de vérification boutons radio

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function plusloin()
{
 if(document.formulairetest.mode[0].checked == true)
  window.location.href="contenufrm.htm"
 else
  window.location.href="contenu.htm"
}
</script>
</head><body>
<form name="formulairetest">
<input type=radio name="mode" value="avec"> avec DHTML
<input type=radio name="mode" value="sans"> sans DHTML
<br><input type=button value="demarrer" onClick="plusloin()">
</form>
<script language="JavaScript">
dhtml = false;
if(document.layers || document.all) dhtml = true;
if(dhtml == true && document.formulairetest[0].defaultChecked == false)
   document.formulairetest.mode[0].checked = true;
</script>
</body></html>

Explication:

L'exemple contient un formulaire avec deux boutons radio. 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 demarrer, la fonction plusloin() est appelée. Cette fonction vérifie si l'un des deux boutons radio est activé. Selon lequel des deux est activé, 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 document.all, 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.

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:

<html><head><title>Test</title>
</head><body>
<form name="formulairetest">
URL: <input size=40 name="url" value="http://www.xy.fr/">
<input type=button value="vasy"
onClick="window.location.href=document.formulairetest.url.value">
</form>
<script language="JavaScript">
if(navigator.userAgent.indexOf("en") > 0)
{
 document.formulairetest.url.defaultValue = "http://www.xy.com/";
 document.formulairetest.url.value = document.formulairetest.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 URL 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 la, defaultValue du champ de saisie sera modifiée 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é avec http://www.xy.fr/ ou http://www.xy.com/ - en rapport avec la langue du navigateur.

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 boites de vérification boutons-fichiers éléments cachés champs de saisie pour mot de passe boutons radio boutons pour interrompre boutons pour envoyer champs de saisie à une ligne champs de saisie à plusieurs lignes

Exemple:

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

Explication:

L'exemple contient un formulaire avec un bouton. En cliquant sur le bouton, le nom du formulaire est sorti.

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:

<html><head><title>Test</title>
</head><body>
<form name="formulairetest">
<input type=button name="lebouton" value="Test"
onClick="alert(document.formulairetest.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:

<html><head><title>Test</title>
</head><body>
<form name="formulairetest">
<input type=radio name="Auto" value="Porsche"> Porsche<br>
<input type=radio name="Auto" value="Peugeot"> Peugeot<br>
Name: <input size=30 name="Name"><br>
<input type=submit name="boutonenvoi" value="envoyer">
</form>
<script language="JavaScript">
for(i=0;i<document.formulairetest.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:

<html><head><title>Test</title>
</head><body>
<form name="formulairetest">
Name: <input size=30 name="nom">
<input type=submit name="boutonenvoi" value="envoyer">
<input type=hidden name="navigateur" value="">
</form>
<script language="JavaScript">
 document.formulairetest.navigateur.value = navigator.userAgent;
</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 ( navigator.userAgent) est affecté à la valeur du champ caché du formulaire (document.formulairetest.Browser.value). Ce contenu du formulaire créé de façon dynamique sera transmis quand l'utilisateur enverra le formulaire.

blur()

Retire le curseur ou le focus de l'élément concerné. N'attend pas de paramètres.

Peut être utilisé sur: boutons pouvant être cliqués boites de vérification boutons-fichiers champs de saisie pour mot de passe boutons radio boutons pour interrompre boutons pour envoyer champs de saisie à une ligne champs de saisie à plusieurs lignes

Exemple:

<html><head><title>Test</title>
</head><body>
<form name="formulairetest">
<input name="champ" size=30 onFocus="this.form.champ.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 blur(). 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.

click()

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

Peut être utilisé sur: boutons pouvant être cliqués boites de vérification boutons-fichiers boutons radio boutons pour interrompre boutons pour envoyer

Exemple:

<html><head><title>Test</title>
</head><body>
<form name="formulairetest">
En quelle ann�e mour�t Goethe?<br>
<input size=6 name="anneemort">
<input type=button name="lebouton" value="ensuite" onClick="Check()">
</form>
<script language="JavaScript">
function Check()
{
 if(document.formulairetest.anneemort.value != "1832")
  window.location.href = "rien.htm";
 else
  window.location.href = "gagne.htm";
}
window.setTimeout("document.formulairetest.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.formulairetest.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()

Met le curseur ou le focus sur l'élément concerné. N'attend pas de paramètre.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function Check()
{
 if(document.formulairetest.anneemort.value != "1832")
 {
  alert("Vous ne le savez pas, tout simplement!");
  document.formulairetest.anneemort.focus();
 }
 else
 {
  alert("Bravo!");
  window.location.href = "fichier2.htm";
 }
}
</script>
</head><body>
<form name="formulairetest">
En quelle ann�e mourut Goethe?<br>
<input size=6 name="anneemort">
<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.formulairetest.anneemort.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 plus d'informations, s'y reporter).

select()

Sélectionne tout le texte contenu dans un 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:

<html><head><title>Test</title>
</head><body>
<form name="formulairetest">
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 language="JavaScript">
 document.formulairetest.Code.focus();
 document.formulairetest.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.formulairetest.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.formulairetest.Code.select().


après:	options
avant:	forms

SELFHTML/Quickbar JavaScript Référence objet