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

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:

Bitte geben Sie Ihren Namen ein:
< ; /p>

Bitte geben Sie Ihr Passwort ein:
< ; /p>

Bitte wählen Sie Ihre Lieblingsfarbe:


红
Grün
blue
黄
青
purple

Bitte wählen Sie Ihr Geschlecht:

male

female

Was machst du gerne:

Lesen
online
sleep

Ich möchte eine Nachricht hinterlassen:

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

zu

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:

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn