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()
La propriété forms de Document retourne une collection (HTMLCollection) des éléments <form> présents dans la page actuelle.
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.
<form name="exemple"> <input type="text" name="nom" placeholder="Saisir votre nom">
<input type="text" name="prenom" placeholder="Saisir votre prénom">
</form>- 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
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>
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
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.