Back

Accéder aux éléments d’un formulaire

Accéder aux éléments d’un formulaire

  1. Objectifs

    • Savoir utiliser la méthode getElemementById de l’objet document




  2. 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
    • La propriété forms de Document retourne une collection (HTMLCollection) des éléments <form> présents dans la page actuelle.

    • 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()
  3. Accéder aux formulaires d’une page

    1. 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"] ou
        • document.forms[0] ou
        • document.general
    2. 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>
        
  4. 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"] ou
      • document.forms["exemple"].elements[0] ou
      • document["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.



Riadh HAJJI

Abonnez vous à notre chaîne YouTube gratuitement