SELFHTML/Quickbar  JavaScript  Référence objet

forms
Cette page est un document avec du texte et des informations

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

Propriétés:

  action (adresse du destinataire lors d'un envoi)
  encoding (type de codification)
  length (nombre de formulaires dans un fichier)
  method (méthode de transmission)
  name (nom du formulaire)
  target (fenêtre cible pour réponses CGI)

Méthodes:

  handleEvent() (traiter un évènement)
  reset() (réinitialiser le formulaire)
  submit() (envoyer le formulaire)

Sous-objets:

  elements
 

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

Avec l'objet forms, qui se trouve sous l'objet  document dans la hiérarchie JavaScript, vous avez accès aux formulaires définis dans un fichier HTML.

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

Schéma 1 / exemple 1:

document.forms[#].propriete
document.forms[#].methode()

cible = document.forms[0].action;
document.forms[0].reset();

Schéma 2 / exemple 2:

document.forms["nomformulaire"].propriete
document.forms["nomformulaire"].methode

cible = document.forms["formulairetest"].action;
document.forms["formulairetest"].reset();

Schéma 3 / exemple 3:

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

cible = document.formulairetest.action;
document.formulairetest.reset();

Explication:

Vous pouvez adresser des formulaires de trois façons:

Les propriétés et méthodes de l'objet forms ne concernent que les parties constituantes du formulaire global comme par exemple la méthode de codification. Pour accéder à des champs de saisie distincts, des boutons etc. vous disposez de l'objet  elements avec ses sous objets

 

JavaScript 1.0Netscape2.0MS IE3.0Lecture/Écriture action

Sauvegarde la valeur qui figure lors de la définition du formulaire dans l'attribut action=, donc une mention mailto ou un programme serveur qui traite les données.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function confirmation()
{
 x = window.confirm("Ce formulaire est destiné à " + document.formulairetest.action);
 return x;
}
</script>
</head><body>
<form name="formulairetest" action="mailto:toimeme@ton.com" 
onSubmit="return confirmation()">
<input type=text size=40 name="entree">
<input type=submit value="envoi">
</form>
</body></html>

Explication:

L'exemple contient un formulaire. Si l'utilisateur envoie le formulaire en cliquant sur le bouton d'envoi, la fonction confirmation() est appelée, parce que l'  Event-Handler onSubmit= est noté dans le repère d'introduction <form>. Celui-ci recherche la valeur renvoyée par la fonction confirmation(). Si la valeur est true, le formulaire est envoyé, si elle est false il ne l'est pas.

Dans la fonction confirmation() l'utilisateur reçoit, affichée dans une boite de dialogue avec la méthode  confirm, la valeur affectée à la mention de formulaire action. Les fenêtres Confirm ont toujours deux boutons, un pour confirmer et l'autre pour interrompre. Le bouton pour confirmer renvoie lorsqu'il est cliqué la valeur true, le bouton interrompre renvoie la valeur false. La valeur renvoyée est sauvegardée dans l'exemple dans la variable x. Celle-ci à son tour est renvoyée par la fonction confirmation() car l'Event-Handler qui a appelé la fonction attend ce genre de valeur.

 

JavaScript 1.0Netscape2.0MS IE3.0Lecture/Écriture encoding

Sauvegarde la valeur qui figure lors de la définition du formulaire dans l'attribut encoding=, donc par exemple "text/plain".

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function typecode()
{
 if(document.formulairetest.action.indexOf("@") > 0)
  document.formulairetest.encoding = "text/plain";
 else
  document.formulairetest.encoding = "x-application/x-www-form-urlencoded";
 return true;
}
</script>
</head><body>
<form name="formulairetest" action="mailto:toimeme@ton.com" 
onSubmit="return typecode()">
<input type=text size=40 name="entree">
<input type=submit value="envoi">
</form>
</body></html>

Explication:

L'exemple contient un formulaire. Si l'utilisateur envoie le formulaire en cliquant sur le bouton d'envoi la fonction typecode() est appelée 

Dans la fonction typecode() est recherché si, dans la mention action du formulaire, le signe @ qui trahit une adresse E-Mail apparaît. Si oui, le type de codage est réglé sur text/plain, si non, pour le type de codage habituel pour programmes CGI x-application/x-www-form-urlencoded. La fonction typecode() renvoie true car l'Event-Handler onSubmit= noté dans le repère d'introduction <form> qui a appelé la fonction attend cette valeur. Le formulaire n'est envoyé que si la valeur retournée est true.

Pour rechercher un ou plusieurs signes dans une chaîne de caractères comme dans l'exemple avec la méthode indexOf(), lisez la partie sur l'objet  string.

 

JavaScript 1.0Netscape2.0MS IE3.0Lecture length

Sauvegarde le nombre de formulaires définis dans un fichier.

Exemple:

<html><head><title>Test</title>
</head><body>
<form name="formulairetest" action="mailto:toimeme@ton.com">
<input type=hidden value="Daniel">
<input type=submit value="Daniel">
</form>
<form name="formulairetest" action="mailto:toimeme@ton.com">
<input type=hidden value="Antoine">
<input type=submit value="Antoine">
</form>
<script language="JavaScript">
 document.write(document.forms.length + " formulaires");
</script>
</body></html>

Explication:

Dans l'exemple, deux petits formulaires sont définis. Ensuite est écrit dans le fichier, pour la démonstration, à l'aide de  document.write() combien de formulaires y sont définis.

 

JavaScript 1.0Netscape2.0MS IE3.0Lecture/Écriture method

Sauvegarde la valeur qui figure lors de la définition du formulaire dans l'attribut method= - en principe, "get" ou "post".

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function Methode()
{
 if(document.formulairetest.action.indexOf("@") > 0)
  document.formulairetest.method = "post";
 else
  document.formulairetest.method = "get";
 return true;
}
</script>
</head><body>
<form name="formulairetest" action="mailto:toimeme@ton.com" 
onSubmit="return Methode()">
<input type=text size=40 name="entree">
<input type=submit value="envoi">
</form>
</body></html>

Explication:

L'exemple contient un formulaire Si l'utilisateur envoie le formulaire en cliquant sur le bouton d'envoi la fonction Methode() est appelée. 

Dans la fonction Methode() est recherché si dans la mention action du formulaire le signe @ qui trahit une adresse E-Mail apparaît. Si oui, la méthode d'envoi est réglée sur post, si non, sur get. La fonction Methode() renvoie true car l'Event-Handler onSubmit= noté dans le repère d'introduction <form>. qui a appelé la fonction attend ce genre de valeur. Le formulaire n'est envoyé que si la valeur retournée est true.

Pour rechercher un ou plusieurs signes dans une chaîne de caractères comme dans l'exemple avec la méthode indexOf(), lisez la partie sur l'objet  string.

 

JavaScript 1.0Netscape2.0MS IE3.0Lecture/Écriture name

Sauvegarde le nom d'un formulaire.

Exemple:

<html><head><title>Test</title>
</head><body>
<form name="formulairetest" action="mailto:toimeme@ton.com">
<input type=text size=40 name="entree">
<input type=submit value="envoi">
</form>
<script language="JavaScript">
 document.formulairetest.entree.value = document.formulairetest.name;
</script>
</body></html>

Explication:

L'exemple contient un formulaire avec un champ de saisie. Sous le formulaire, se trouve un script qui écrit pour le contrôle le nom du formulaire dans le champ de saisie. Dans l'exemple le nom est formulairetest.

 

JavaScript 1.0Netscape2.0MS IE3.0Lecture/Écriture target

Sauvegarde quelle fenêtre, dans le cas d'un jeu de frames, doit devenir active après l'envoi. Cela peut être intéressant pour des fenêtres frames ou pour une deuxième fenêtre séparée. Au cas où un programme CGI renvoie du code HTML au navigateur, par exemple avec un "merci pour l'envoi du formulaire", alors la sortie se fait dans la fenêtre qui porte le nom mentionné.

Exemple:

<html><head><title>Test</title>
<script language="JavaScript">
function cible()
{
 document.formulairetest.target = "bas";
 return true;
}
</script>
</head><body>
<form name="formulairetest" action="/cgi-bin/formulairetest.pl" 
onSubmit="return cible()">
<input type=text size=40 name="entree">
<input type=submit value="envoi">
</form>
</body></html>

Explication:

L'exemple suppose que le fichier avec le formulaire se trouve dans un jeu de frames dans lequel il y a une autre fenêtre frame du nom de bas. Le fichier d'exemple contient un formulaire. Si l'utilisateur envoie le formulaire en cliquant sur le bouton d'envoi la fonction cible() est appelée.

Dans la fonction cible() il est spécifié que le retour de code HTML du programme CGI formulairetest.pl se fasse dans la fenêtre frame bas.

 

JavaScript 1.2Netscape4.0 handleEvent()

Transmet un évènement à un élément qui est en mesure de réagir à l'évènement. Fonctionne exactement comme pour  handleEvent() pour l'objet window (s'y reporter pour des informations plus précises).

 

JavaScript 1.1Netscape3.0MS IE4.0 reset()

Efface toutes les saisies dans un formulaire et a le même effet qu'un bouton ayant été défini en HTML avec type=reset.

Exemple:

<html><head><title>Test</title>
</head><body>
<form name="formulairetest">
<input type=text size=40 name="champ1"><br>
<input type=text size=40 name="champ2"><br>
</form>
<a href="javascript:document.formulairetest.reset()">initialiser le formulaire</a>
</body></html>

Explication:

L'exemple contient un formulaire avec deux champs de saisie. Sous le formulaire se trouve un lien. En cliquant sur le lien, toutes les entrées saisies dans le formulaire sont effacées.

 

JavaScript 1.0Netscape2.0MS IE3.0 submit()

Envoie un formulaire et a le même effet qu'un bouton ayant été défini en HTML avec type=submit. Cependant, cette méthode JavaScript ne fonctionne depuis Netscape 3.0 qu'uniquement si le formulaire est traité par un programme, c'est à dire si, dans le repère d'ouverture <form> pour la mention action=, un programme CGI, par exemple, est appelé. Si c'est une adresse de courrier électronique ou un newsgroups qui y est mentionné, la méthode ne fonctionne pas.

Exemple:

<html><head><title>Test</title>
</head><body>
<form name="formulairetest" action="/cgi-bin/estime.pl" method=get>
<input type=text size=40 name="champ1"><br>
<input type=text size=40 name="champ2"><br>
</form>
<script language="JavaScript">
 function onyva()
 {
  document.formulairetest.submit();
 }
 window.setTimeout("onyva()",60000);
</script>
</body></html>

Explication:

L'exemple contient un formulaire avec des champs de saisie. En dessous se trouve un script JavaScript qui lance un compte à rebours avec la méthode setTimeout(). Après 60000 millièmes de secondes, donc après une minute, la fonction onyva() est appelée. Celle-ci envoie le formulaire avec submit().

après: elements
avant: applets
 

SELFHTML/Quickbar  JavaScript  Référence objet

© 1998 Stefan Münz / © 2001 Traduction  Serge François, 13405@free.fr