Tutorial zu DOM-Grundlagen: Verwenden von DOM zur Steuerung von Formularen

Tutorial zu DOM-Grundlagen: Verwenden von DOM zur Steuerung von Formularen_Grundkenntnisse

WBOY

Freigeben： 2016-05-16 16:18:45

Original

1040 Leute haben es durchsucht

1. Formulareinführung

Formular ist eines der interaktivsten Formulare auf einer Webseite. Es empfängt Benutzerdaten über verschiedene Formulare, einschließlich Dropdown-Listenfelder, Optionsfelder und Textfelder. In diesem Artikel werden hauptsächlich die Formulare vorgestellt verwendete Attribute und Methoden
Sie können Formulare problemlos in JavaScript bedienen, z. B. Formulardaten für eine effektive Überprüfung abrufen, Formularfeldern automatisch Werte zuweisen, Formularereignisse verarbeiten usw.
Zu diesem Zeitpunkt wird jedes Formular in ein Objekt analysiert, d. h. ein Formularobjekt, auf das über die document.forms-Sammlung verwiesen werden kann. Ein Formular mit dem Namensattribut form1 kann beispielsweise

verwenden

Code kopieren Der Code lautet wie folgt:

document.forms["form1"]

Darüber hinaus können Sie das Formularobjekt auch über seinen Index im Dokument referenzieren. Zum Beispiel

Code kopieren Der Code lautet wie folgt:

document.forms[1]

stellt das zweite Formularobjekt im Referenzdokument

dar

Das Folgende ist ein Formular, das mehrere Formularelemente enthält. Jedes Element verfügt über ein Beschriftungs-Tag und ist an das Element gebunden. Auf diese Weise kann das Formular durch Klicken auf den Text festgelegt und ausgewählt werden, was die Benutzererfahrung verbessert.

Code kopieren Der Code lautet wie folgt:

Normalerweise sollte jedes Formularelement über Namens- und ID-Attribute verfügen, der Name wird für die Übergabe an den Server verwendet und die ID wird für die Bindung und Funktionsfilterung verwendet.

2. Greifen Sie auf Elemente im Formular

Die Elemente im Formular, ob Textfelder, Optionsschaltflächen, Dropdown-Schaltflächen, Dropdown-Listenfelder oder andere Inhalte, sind in der Elementsammlung des Formulars enthalten. Sie können die Position des Elements im verwenden Sammlung oder das Namensattribut des Elements, um einen Verweis auf dieses Element abzurufen.

Code kopieren Der Code lautet wie folgt:

var oForm = document.forms["form1"]//Holen Sie sich das Formular

          var otextForm = oForm.elements[0] //Das erste Element abrufen 

           var otextPasswd = oForm.elements["passwd"] //Das Element abrufen, dessen Namensattribut passwd ist

Zitat mit der effektivsten und intuitivsten Methode:

Code kopieren Der Code lautet wie folgt:

var otextcomments = oForm.elements.comments; //Get das Namensattribut als Kommentarelement 

3. Öffentliche Eigenschaften und Methoden

Alle Elemente im Formular (außer versteckten Elementen) haben einige gemeinsame Attribute und Methoden. Hier sind einige häufig verwendete

Code kopieren Der Code lautet wie folgt:

var oForm = document.forms["form1"]; //Formular abrufen

                 var otextcomments = oForm.elements.comments; //Das Element abrufen, dessen Namensattribut comments ist 

               Alert(oForm.type); //Elementtyp anzeigen

                var otextPasswd = oForm.elements["passwd"] //Das Element abrufen, dessen Namensattribut passwd ist

​​​​​​otextPasswd.focus(); //Auf ein bestimmtes Element konzentrieren

4. Einreichung des Formulars

Die Übermittlung im Formular wird durch Schaltflächen oder Bilder mit Schaltflächenfunktionen vervollständigt

Code kopieren Der Code lautet wie folgt:

Wenn der Benutzer die Eingabetaste drückt oder auf eine der Schaltflächen klickt, kann die Formularübermittlung ohne zusätzlichen Code abgeschlossen werden. Sie können anhand des Aktionsattributs im Formular überprüfen, ob eine Übermittlung erfolgen soll.

Code kopieren Der Code lautet wie folgt:

Während des Absendens des Formulars klickt der Benutzer aufgrund der langsamen Netzwerkgeschwindigkeit möglicherweise wiederholt auf die Schaltfläche „Senden“, was eine enorme Belastung für den Server darstellt. Dieses Verhalten kann durch die Verwendung des Attributs „disabled“ verhindert werden. Zum Beispiel:

Code kopieren Der Code lautet wie folgt: