Accéder aux éléments d’un formulaire
Accéder aux éléments d’un formulaire
-
Objectifs
- Savoir utiliser la méthode getElemementById de l’objet document
-
Introduction
- En respectant la hiérarchie des objets, chaque formulaire peut être adressé via javascript par la collection forms[ ]:
- document.forms[i] , i étant le iième formulaire compté depuis i=0
- document.forms["nomFormulaire"] , où "nomFormulaire’ est la valeur de l ’attribut NAME de la balise <form name="nomFormulaire">.
- On peut aussi écrire: document.nomFormulaire
- Pour chaque formulaire, des propriétés sont lues ou écrites, des méthodes sont appliquées, des événements sont détectés:
- document.nomFormulaire.propriété
- document.nomFormulaire.méthod()
-
Accéder aux formulaires d’une page
-
Méthodes d’accès
- En partant d’un formulaire (balise form en HTML), il est possible d’accéder à chacun des champs en utilisant leur attribut name.
- Comme on a précisé dans l’introduction on peut accéder à ce formulaire de trois méthodes différentes
- Soit:
document.forms["exemple"]oudocument.forms[0]oudocument.general-
Informations sur le formulaire
- Syntaxe:
document.forms[indice_form].propriete-
Accéder aux éléments d’un formulaire
- Maintenant, pour accéder aux champs de texte de notre formulaire, on peut écrire :
- Soit:
document.forms["exemple"].elements["nom"]oudocument.forms["exemple"].elements[0]oudocument["exemple"].nom
La propriété forms de Document retourne une collection (HTMLCollection) des éléments <form> présents dans la page actuelle.
<form name="exemple">
<input type="text" name="nom" placeholder="Saisir votre nom">
<input type="text" name="prenom" placeholder="Saisir votre prénom">
</form>| propriétés | rôle |
|---|---|
| elements | tableau des contrôles de formulaire |
| length | nombre de contrôles de formulaire |
| action | valeur de l’attribut action du formulaire |
| method | valeur de l’attribut method du formulaire |
| name | valeur de l’attribut name du formulaire |
| target | valeur de l’attribut target du formulaire |
| acceptCharset | liste de jeu de caractères supportés par le serveur |
| enctype | type MIME des données du formulaire |
Exemple:
<!DOCTYPE html>
<html lang="fr">
<head>
<title>Lire une valeur dans un champs de texte</title>
<meta charset="utf-8">
<style>
#bouton {margin-top: 12px;}
</style>
<script>
function controle(){
document.forms["form1"].elements["input"].value=document.forms[0].length;
alert(document.forms[0].length);
}
</script>
<body>
<h2>Lire une valeur dans un champs de texte</h2>
<form name="form1">
<b>Nombre de formulaire dans la pade est : </b><input type="text" id="input" name="input" value=""size="2"><br>
<input type="button" id="bouton" value="Contrôler" onclick="controle()">
</form>
</body>
</html>
elements est le tableau de tous les éléments du formulaire. On peut accéder à un élément par son nom ou par son indice, ou directement par son nom.
