Accueil Casino argent reel Meilleur casino Nouveaux casinos Live casino

Premiers pas en JavaScript 37.1 accès éléments formulaire

copyleft   See You Why?

---

test relatifs aux formulaires (36.9) | | exercices relatifs à l'accès aux éléments d'un formulaire (37.8)

---

Contenu

I. Accès aux éléments d'un formulaire
'form' et 'input' de type 'text'

Nous avions promis un chapitre plus pratique qui consiste à mettre en application la théorie vue dans le chapitre précédent. Le voici. Nous suivrons le même ordre de présentation des balises que celui utilisé dans le chapitre précédent.

Dans une première séquence, nous étudierons le formulaire <form> et ses éléments, puis la balise <input> de type 'text' ;
dans une deuxième séquence, nous parcourrons la balise <select> avec la balise <option> pour chaque élément du choix, les balises <input> de type 'checkbox', 'hidden' et 'submit' ainsi que la balise <textarea> ;
dans une troisième séquence,

A. le formulaire <form> et ses éléments

Nous savons maintemant qu'une page (un document) peut contenir plusieurs formulaires. Imaginons donc un formulaire réduit qui demande le nom et le sexe d'un individu.

<form name="premier_formul" id="formul1">
    Votre Nom SVP : <input type="text" name="nom">
    Vous êtes de sexe : masculin <input type="radio" name="s" value="masc">
     ou féminin <input type="radio" name="s" value="fem">
</form>

Bien qu'aucun aspect pratique ne nous laisse penser que l'on puisse accéder avantageusement à l'un des formulaires d'un document, voilà cependant la réponse à la question :
a) accéder aux formulaires ;
b) accéder au nombre de formulaires ;
c) accéder au nom de chacun des formulaires ;
d) accéder au nombre d'éléments d'un formulaire ;
e) accéder au nom de chacun des éléments d'un formulaire ;
f)

a) accéder aux formulaires

Accéder à ce formulaire, objet de la page en cours 'document', pourrait se faire de différentes façons :

• soit par la formule du tableau indicé :
      document.forms[0] ;
  méthode généralement proposée dans sa documentation par Mozilla, classique et rigoureuse, mais très risquée. En effet, il suffit de créer un autre formulaire dans la même page et que ce dernier est placé avant... ce formulaire, initialement indicé 0 et devenant le deuxième devra être indicé 1...
• soit par son nom comme indice :
      document.forms["premier_formul"] ;
  semble préférable à la première méthode, mais nécessite que la balise <form> ait un attribut name spécifié...
• soit par son nom uniquement :
      document.premier_formul
  semble être la formule la plus utilisée en JS, mais je n'ai pas eu l'occasion de tester la formule avec les navigateurs les plus récents...
• soit par son id :
      document.getElementById('formul1')
  semble être une formule de plus en plus utilisée en JS, elle répond parfaitement au DOM (Document Object Method) et prépare à la disparition annoncée du paramètre name pour certains types d'objets (on parle de form, img, iframe...)

b) accéder au nombre de formulaires

Nous savons que forms est un tableau (un array) dont l'indice commence à zéro et qui s'incrémente à chaque nouvelle création d'un formulaire dans la page. Connaître le nombre de formulaires revient à calculer la longueur de cet array. Accéder au nombre de formulaires d'un document, pourrait se faire ainsi :

      document.forms.length

N'oublions pas que s'il n'y a qu'un seul element, son indice sera 0 (zéro), mais la longueur de l'array sera 1 (un).

c) accéder au nom de chacun des formulaires

Comme l'array forms est un tableau qui garde en mémoire tous les formulaires de votre document, il suffit de parcourir cet array par une boucle for et de lire la propriété name de chaque formulaire. Ce sera fait ainsi, par exemple, si votre page compte plus d'un formulaire :

    n=document.forms.length;
    for (i=0;i<n;i++) {
        x = " Nom du formulaire " + i + " : "+document.forms[i].name+"<br>";
        document.write(x);
    }

d) accéder au nombre d'éléments d'un formulaire

Comme l'array forms, JS crée un array elements dont l'indice s'incrémentera à chaque nouvel élément créé dans le formulaire en cours. Le nombre d'éléments d'un formulaire précis se notera donc :

        document.forms["premier_formul"].elements.length

Attention, car l'array elements est un tableau d'éléments qui ne s'applique qu'à un formulaire déterminé, if faut donc que le formulaire soit désigné d'une des façons précises décrites en a).

À vous de tester la balise <form> et les objets et propriétés y liées :

e) accéder au nom de chacun des éléments d'un formulaire

Rappelons que comme l'array forms, JS crée un array elements dont l'indice s'incrémentera à chaque nouvel élément créé dans le formulaire en cours. Le nom du deuxième des éléments d'un formulaire précis se notera donc :

        document.forms["premier_formul"].elements[1].name

Attention, car l'array elements est un tableau d'éléments qui ne s'applique qu'à un formulaire déterminé, if faut donc que le formulaire soit désigné d'une des façons précises décrites en a). De même, la propriété name d'un élément ne s'applique qu'à un élément déterminé, il faudra aussi désigner l'élément de façon précise, comme signalé plus haut.

Évidemment, le lecteur attentif aura remarqué que seul, par la formule ci-dessus, le deuxième élément (indice 1) 'livrera' son nom... si on veut obtenir tous les éléments du formulaire baptisé "premier_formul", il s'agira de créer une boucle portant sur l'indice des éléments... que pensez-vous d'un :

for (i = 0; i<document.forms["premier_formul"].elements.length; i++) {
      document.write(document.forms["premier_formul"].elements[i].name);
}

À vous de tester la balise <form> et les objets et propriétés y liées :

B. la balise <input> de type 'text'

L'incontournable de tous les formulaires JS. Vous ne l'ignorez pas, toutes les entrées faites par une balise <input> peuvent avoir un type différent, c'est l'occasion d'aborder le détail suivant "comment connaitre le type d'entrée d'éléments d'un formulaire" :
a) accéder aux types d'entrée des éléments d'un formulaire ;
b) vérifier que l'utilisateur a complété un champ d'un formulaire ;
c) vérifier que l'utilisateur a complété tous les <input> de type 'text' d'un formulaire ;
d) accéder aux types d'entrée des éléments d'un formulaire ;
e)

a) accéder aux types d'entrée des éléments d'un formulaire

Le chapitre précédent nous a dévoilé que les balises <input> ont toutes une propriété/attribut dénommée 'type' qui nous informe du type d'entrée de chaque élément d'un formulaire. Si nous reprenons notre exemple précédent, il suffirait d'ajouter un boucle for qui parcourt tous les éléments d'un formulaire et en donne le 'type' :

for (i=0;i<n;i++) {
  for (j=0;j<document.forms[i].elements.length;j++) {
    x += " Formulaire " +i +" element " +j +" de type : " +document.forms[i].elements[j].type+"<br>";
  }
  x += " <br>"
}

et nous connaitrons, non seulement le type des éléments d'un formulaire, mais de tous les formulaires de la page :

Essayez plutôt :

b) vérifier que l'utilisateur a complété un champ d'un formulaire

Souci majeur... les formulaires existent pour transmettre des informations que l'on désire soit corriger, soit stocker, soit vérifier... mais l'utilisateur n'est pas toujours prêt à donner ces informations, ou c'est un grand distrait et il oublie de répondre. D'où l'intérêt de vérifier s'il a complété un champ précis.

On utilisera le modèle DOM (vue en théorie ici) pour déterminer le champ que l'on veut désigner et on supposera que ce champ soit le prénom que l'on estime indispensable.

Le code de la fonction pourrait être :

function verif_prenom(){
    if(document.getElementById('prenom').value == ""){
        alert ('Vous avez oublié de saisir votre prénom!!!!');
        return false;
    }
    return true;
}

Évidemment, l'utilisateur peut encore entrer n'importe quoi comme prénom... à vous d'imaginer des contrôles plus rigoureux.

c) vérifier que l'utilisateur a complété tous les <input> de type 'text' d'un formulaire

Le problème est assez semblable au précédent... mais il faudra boucler et ne choisir que les input de type 'text'. On songera à employer la propriété type d'un input et value.length pour mesurer la logueur de la réponse donnée... d'où la source proposée :

function verif_touslestext(){
    var listeDInput = document.forms['premier_formul'].elements;
    var alertTxt = "";
    for (cetInput in listeDInput){
        if(cetInput.type=="text" && cetInput.value.length==0){
            alertTxt += "Le champ " + cetInput.name + " n'a pas été rempli \n";
            return false;
        }
        return true;
    }
    alert(alertTxt);
}

d) accéder aux types d'entrée des éléments d'un formulaire

Le chapitre précédent

C. la balise <select> avec la balise <option> pour chaque élément

S

D. la balise <input> de type 'checkbox'

S

E. la balise <input> de type 'hidden'

S

F. la balise <textarea>

S

G. la balise <input> de type 'submit'

S

B. toutes les intructions entre { et } seront exécutées

S

VIII. Exercices relatifs aux accès d'éléments d'un formulaire...

voir suite >>>

IX. Test relatif aux accès d'éléments d'un formulaire...

voir suite >>>

---

test relatifs aux formulaires (36.9) | | exercices relatifs à l'accès aux éléments d'un formulaire (37.8)

---