Tutoriel sur les bases du DOM : Utiliser DOM pour contrôler Forms

Tutoriel sur les bases du DOM : Utiliser DOM pour contrôler Forms_Basic Knowledge

WBOY

Libérer： 2016-05-16 16:18:45

original

1045 Les gens l'ont consulté

1. Présentation du formulaire

Formulaire

est l'un des formulaires les plus interactifs d'une page Web. Il reçoit les données utilisateur via divers formulaires, notamment des zones de liste déroulante, des boutons radio, des cases à cocher et des zones de texte. Cet article présente principalement les formulaires couramment utilisés. attributs et méthodes utilisés
Vous pouvez facilement utiliser des formulaires en JavaScript, comme obtenir des données de formulaire pour une vérification efficace, attribuer automatiquement des valeurs aux champs de formulaire, traiter les événements de formulaire, etc.
À ce stade, chaque formulaire est analysé en un objet, c'est-à-dire un objet de formulaire. Ces objets peuvent être référencés via la collection document.forms. Par exemple, un formulaire avec un attribut nama de form1 peut utiliser

Copier le code Le code est le suivant :

document.forms["form1"]

Non seulement cela, vous pouvez également référencer l'objet formulaire via son index dans le document. Par exemple

Copier le code Le code est le suivant :

document.forms[1]

représente le deuxième objet formulaire dans le document de référence

Ce qui suit est un formulaire contenant plusieurs éléments de formulaire. Chaque élément a une balise d'étiquette et est lié à l'élément de cette façon, le formulaire peut être défini et sélectionné en cliquant sur le texte, ce qui améliore l'expérience utilisateur.

Copier le code Le code est le suivant :

Veuillez saisir votre nom :
< ; /p>

Veuillez saisir votre mot de passe :
< ; /p>

Veuillez choisir votre couleur préférée :

Veuillez sélectionner votre sexe :

male

female

Qu'aimez-vous faire :

Lecture
en ligne
sleep

Je souhaite laisser un message :

Habituellement, chaque élément de formulaire doit avoir des attributs name et id, le nom est utilisé pour le transmettre au serveur et l'identifiant est utilisé pour la liaison et le filtrage des fonctions.

2. Accéder aux éléments du formulaire

Les éléments du formulaire, qu'il s'agisse de zones de texte, de boutons radio, de boutons déroulants, de zones de liste déroulante ou d'autres contenus, sont inclus dans la collection d'éléments du formulaire. Vous pouvez utiliser la position de l'élément dans le formulaire. collection ou l'attribut name de l'élément pour obtenir une référence à cet élément.

Copier le code Le code est le suivant :

var oForm = document.forms["form1"]//Obtenir le formulaire

          var otextForm = oForm.elements[0] //Obtenir le premier élément 

           var otextPasswd = oForm.elements["passwd"] //Récupère l'élément dont l'attribut name est passwd

Citer en utilisant la méthode la plus efficace et la plus intuitive :

Copier le code Le code est le suivant :

var otextcomments = oForm.elements.comments //Get l'attribut name comme élément de commentaires 

3. Propriétés et méthodes publiques

Tous les éléments du formulaire (à l'exception des éléments masqués) ont des attributs et des méthodes communs. En voici quelques-uns couramment utilisés

Copier le code Le code est le suivant :

var oForm = document.forms["form1"]; //Obtenir le formulaire

                 var otextcomments = oForm.elements.comments; //Récupère l'élément dont l'attribut name est comments 

               alert(oForm.type); //Afficher le type d'élément

                var otextPasswd = oForm.elements["passwd"] //Récupère l'élément dont l'attribut name est passwd

​​​​​​otextPasswd.focus(); //Se concentrer sur un élément spécifique

4. Soumission du formulaire

La soumission dans le formulaire est complétée par des boutons ou des images avec des fonctions de bouton

Copier le code Le code est le suivant :

Lorsque l'utilisateur appuie sur la touche Entrée ou clique sur l'un des boutons, la soumission du formulaire peut être complétée sans code supplémentaire. Vous pouvez vérifier s'il faut soumettre via l'attribut d'action dans le formulaire.

Copier le code Le code est le suivant :

Pendant le processus de soumission du formulaire, l'utilisateur peut cliquer à plusieurs reprises sur le bouton d'envoi en raison de la lenteur du réseau, ce qui représente une énorme charge pour le serveur. Ce comportement peut être interdit en utilisant l'attribut désactivé. Par exemple :

Copier le code Le code est le suivant :