Renvoie au chapitre d'origine SELFHTML/Aides à la navigation Renvoie au chapitre d'origine JavaScript/DOM Renvoie au chapitre d'origine Référence objet
SELFHTML

forms

Page d'information: vue d'ensemble

vers le bas forms: généralités sur l'utilisation

Propriétés:

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

Méthodes:

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

Sous-objets:

Autre page d'information elements
 vers le bas 

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

Avec l'objet forms, qui se trouve sous l'objet Autre page d'information 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[#].propriété
document.forms[#].méthode()

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

Schéma 2 / exemple 2:

document.forms["nom_formulaire"].propriété
document.forms["nom_formulaire"].méthode

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

Schéma 3 / exemple 3:

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

cible = document.formulaire_test.action;
document.formulaire_test.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 Autre page d'information elements avec ses sous objets.

 vers le hautvers le bas 

JavaScript 1.0Netscape 2.0MS IE 3.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:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function confirmation() {
 var x = window.confirm("Ce formulaire est envoyé à  " + document.formulaire_test.action);
 return x;
}
//-->
</script>
</head><body>
<form name="formulaire_test" action="mailto:toi-meme@cheztoi.com"
onSubmit="return confirmation()">
<input type="text" size="40" name="saisie">
<input type="submit" value="Envoyer">
</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 le Autre page d'information gestionnaire d'événement 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 Autre page d'information 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 le gestionnaire d'événement qui a appelé la fonction attend ce genre de valeur.

Attention:

L'utilisation de mailto: comme cible d'un formulaire occasionne souvent des problèmes. De plus amples détails dans la partie sur les Autre page d'information formulaires en tant que courriel.

Vous pouvez également mentionner, comme adresse cible d'un formulaire, un fichier HTML et traiter les données du formulaire avec JavaScript. Tenez ici compte que JavaScript n'a alors accès aux données que si la méthode get a été employée.
Opera 5.12 affiche dans le protocole file le texte source du fichier cible.

 vers le hautvers le bas 

JavaScript 1.0Netscape 2.0MS IE 3.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:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function type_code() {
 if(document.formulaire_test.action.indexOf("@") > 0)
  document.formulaire_test.encoding = "text/plain";
 else
  document.formulaire_test.encoding = "x-application/x-www-form-urlencoded";
 return true;
}
//-->
</script>
</head><body>
<form name="formulaire_test" action="mailto:toi-meme@cheztoi.com"
onSubmit="return type_code()">
<input type="text" size="40" name="saisie">
<input type="submit" value="Envoyer">
</form>
</body></html>

Explication:

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

Dans la fonction type_code() est recherché si, dans la mention action du formulaire, le signe @ qui trahit une adresse électronique 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 type_code() renvoie true car le gestionnaire d'événement 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 Autre page d'information string.

Attention:

L'utilisation de mailto: comme cible d'un formulaire occasionne souvent des problèmes. De plus amples détails dans la partie sur les Autre page d'information formulaires en tant que courriel..

 vers le hautvers le bas 

DOM 1.0JavaScript 1.0Netscape 2.0MS IE 3.0Lesen length

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

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<form name="formulaire_test" action="mailto:toi-meme@cheztoi.com">
<input type="hidden" value="Daniel">
<input type="submit" value="Daniel">
</form>
<form name="formulaire_test" action="mailto:toi-meme@cheztoi.com">
<input type="hidden" value="Antoine">
<input type="submit" value="Antoine">
</form>
<script type="text/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 Autre page d'information document.write() combien de formulaires y sont définis.

 vers le hautvers le bas 

JavaScript 1.0Netscape 2.0MS IE 3.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:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function Methode() {
 if(document.formulaire_test.action.indexOf("@") > 0)
  document.formulaire_test.method = "post";
 else
  document.formulaire_test.method = "get";
 return true;
}
//-->
</script>
</head><body>
<form name="formulaire_test" action="mailto:toi-meme@cheztoi.com"
onSubmit="return Methode()">
<input type="text" size="40" name="saisie">
<input type="submit" value="Envoyer">
</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 électronique 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 le gestionnaire d'événement 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 Autre page d'information string.

Attention:

L'utilisation de mailto: comme cible d'un formulaire occasionne souvent des problèmes. De plus amples détails dans la partie sur les Autre page d'information formulaires en tant que courriel.

 vers le hautvers le bas 

JavaScript 1.0Netscape 2.0MS IE 3.0lecture/écriture name

Sauvegarde le nom d'un formulaire.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<form name="formulaire_test" action="mailto:toi-meme@cheztoi.com">
<input type="text" size="40" name="saisie">
<input type="submit" value="Envoyer">
</form>
<script type="text/javascript">
<!--
 document.formulaire_test.saisie.value = document.formulaire_test.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 formulaire_test.

 vers le hautvers le bas 

JavaScript 1.0Netscape 2.0MS IE 3.0lecture/écriture target

Sauvegarde quelle fenêtre, dans le cas d'un jeu de cadres, doit devenir active après l'envoi. Cela peut être intéressant pour des fenêtres cadres 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:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
<script type="text/javascript">
<!--
function cible() {
 document.formulaire_test.target = "bas";
 return true;
}
//-->
</script>
</head><body>
<form name="formulaire_test" action="fichier.htm"
onSubmit="return cible()">
<input type="text" size="40" name="saisie">
<input type="submit" value="Envoyer">
</form>
</body></html>

Explication:

L'exemple suppose que le fichier avec le formulaire se trouve dans un jeu de cadres dans lequel il y a une autre fenêtre cadre 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 la sortie HTML se fasse dans la fenêtre cadre bas.

 vers le hautvers le bas 

JavaScript 1.2Netscape 4.0 handleEvent()

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

 vers le hautvers le bas 

JavaScript 1.1Netscape 3.0MS IE 4.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:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<form name="formulaire_test" action="">
<input type="text" size="40" name="champ1"><br>
<input type="text" size="40" name="champ2"><br>
</form>
<a href="javascript:document.formulaire_test.reset()">vider 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.

 vers le hautvers le bas 

JavaScript 1.0Netscape 2.0MS IE 3.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 groupe de nouvelles qui y est mentionné, la méthode ne fonctionne pas.

Exemple:

Démonstration - nouvelle fenêtre Exemple d'affichage: aperçu

<html><head><title>Test</title>
</head><body>
<form name="formulaire_test" 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 type="text/javascript">
<!--
 function on_y_va()
 {
  document.formulaire_test.submit();
 }
 window.setTimeout("on_y_va()",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 Autre page d'information setTimeout(). Après 60000 millièmes de secondes, donc après une minute, la fonction on_y_va() est appelée. Celle-ci envoie le formulaire avec submit().

 vers le haut
page suivante Autre page d'information elements
page précédente Autre page d'information applets
 
Renvoie au chapitre d'origine SELFHTML/Aides à la navigation Renvoie au chapitre d'origine JavaScript/DOM Renvoie au chapitre d'origine Référence objet

© 2002 Adresse électronique selfhtml@fr.selfhtml.org