1. Einführung in die Form
Form <form> ist eine der interaktivsten Formulare auf Webseiten. Es empfängt Benutzerdaten über verschiedene Formulare, einschließlich Dropdown-Listenfelder, Optionsfeldschaltflächen, Kontrollkästchen und Textfelder. Dieser Artikel führt hauptsächlich häufig verwendete Eigenschaften und Methoden in Formularen ein.
JavaScript kann sehr bequem sein, um Formulare zu betreiben, z. B. das Abrufen von Formulardaten zur effektiven Überprüfung, das automatische Zuweisen von Werten für Formulare, Verarbeitungsformularereignisse usw.
Zu diesem Zeitpunkt wird jede Form in ein Objekt analysiert, das heißt Objekte. Diese Objekte können über die Sammlung von Dokument. Zum Beispiel kann eine Form mit einem NAMA -Attribut von Form1 verwendet werden
Kopieren Sie den Code wie folgt: document.forms ["Form1"]
Darüber hinaus können Sie sich auch auf Formularobjekte über den Index des Formulars im Dokument beziehen. Zum Beispiel
Kopieren Sie den Code wie folgt: document.forms [1]
Repräsentiert das Objekt der zweiten Formular im Referenzdokument
Das Folgende ist ein Formularelement, das mehrere Formularelemente enthält. Jedes Element verfügt über ein Etikett -Tag, das an das Element gebunden ist, sodass Sie durch Klicken auf den Text es festlegen und in die Tabelle auswählen können, wodurch die Benutzererfahrung verbessert wird.
Die Codekopie lautet wie folgt:
<form method = "post" name = "myForm1" action = "addInfo.aspx">
<p> <Label für = "Name"> Bitte geben Sie Ihren Namen ein: </label> <br> <Eingabe type = "text" name = "name" id = "name"> </p>
<p> <Label für = "PassWD"> Bitte geben Sie Ihr Passwort ein: </label> <br> <Eingabe type = "password" name = "passwd" id = "passwd"> </p>
<p> <Label für = "color"> Bitte wählen Sie Ihre Lieblingsfarbe: </Label> <br>
<select name = "color" id = "color">
<option value = "rot"> rot </option>
<Option Value = "Green"> Green </Option>
<Option Value = "Blue"> Blue </Option>
<Option Value = "Yellow"> Yellow </Option>
<option value = "cyan"> qing </option>
<option value = "lila"> lila </option>
</select> </p>
<P> Bitte wählen Sie Ihr Geschlecht: <br>
<Eingabe type = "Radio" name = "sex" id = "male" value = "male"> <label für = "male"> männlich </label> <br>
<Eingabe type = "Radio" name = "sex" id = "weiblich" value = "weiblich"> <label für = "weiblich"> weiblich </label> </p>
<p> Was machst du gerne: <br>
<Eingabe type = "CheckBox" name = "hobby" id = "book" value = "book"> <label for = "book"> lesing </label>
<Eingabe type = "CheckBox" name = "hobby" id = "net" value = "net"> <label für = "net"> im Internet </label>
<input type = "checkbox" name = "hobby" id = "sleep" value = "sleep"> <label für = "sleep"> sleep </label> </p>
<p> <Label für = "Kommentare"> Ich möchte eine Nachricht hinterlassen: </label> <br> <textarea name = "comments" id = "comments" cols = "30" rows = "4"> </textarea> </p>
<P> <Eingabe type = "surug" name = "btnsubmit" id = "btnsubmit" value = "subieren">
<Eingabe type = "reset" name = "btnreset" id = "btnreset" value = "reset"> </p>
</form>
Normalerweise sollte jedes Formularelement Namen und ID -Attribute haben, der Name wird verwendet, um dem Server zu übergeben, und ID wird zur Bindung und Funktionsfilterung verwendet.
2. Zugang zu Elementen in der Form
Elemente im Formular, ob Textfelder, Optionsfelder, Dropdown-Schaltflächen, Dropdown-Listenfelder oder andere Inhalte, sind in der Sammlung von Formular Elements enthalten. Sie können die Position des Elements in der Sammlung oder das Namensattribut des Elements verwenden, um einen Verweis auf das Element zu erhalten.
Die Codekopie lautet wie folgt:
var Oform = document.Forms ["Form1"] // Formular abrufen
var eTextForm = OfOrM.elemente [0]; // Erhalten Sie das erste Element
var eTextPasswd = OfOrm.element
Zitieren Sie die effektivste und intuitivste Methode:
Kopieren Sie den Code wie folgt: var EthtComments = OfOrM.Elements.coms; // Erhalten Sie das Element mit den Namensattribut -Kommentaren
3.. Öffentliche Eigenschaften und Methoden
Alle Elemente in der Form (außer verborgenen Elementen) haben einige gemeinsame Eigenschaften und Methoden. Hier sind einige häufig verwendete Listen
Die Codekopie lautet wie folgt:
var Oform = document.Forms ["Form1"]; // Formular bekommen
var ImagestComments = OfOrM.Elements.comMents; // Erhalten Sie das Element mit den Namensattribut -Kommentaren
Alarm (Oform.Type); // Elementtyp anzeigen
var eTextPasswd = OFOrM.elemente ["passwd"]; // Erhalten Sie das Element mit dem Namensattribut Passwd
foxtPasswd.focus (); // Konzentrieren Sie sich auf bestimmte Elemente
4. Einreichung von Formularen
Die Einreichung in Form wird durch Tasten oder Bilder mit Schaltflächenfunktionen abgeschlossen
Die Codekopie lautet wie folgt:
<Eingabe type = "surug" name = "btnsubmit" id = "btnsubmit" value = "arrang">
<Eingabe type = "Bild" name = "picsubmit" id = "picsSubmit" src = "subgg">
Wenn der Benutzer die Eingabetaste drückt oder auf eine der Schaltflächen klickt, kann das Formular ohne zusätzlichen Code eingereicht werden. Sie können das Aktionsattribut in Formular verwenden, um festzustellen, ob Sie einreichen möchten.
Kopieren Sie den Code wie folgt: <form method = "post" name = "Form1" action = "JavaScript: alert ('eingebaut')"> </form>
Benutzer können während des Einreichungsvorgangs wiederholt auf die Schaltfläche Senden klicken, da die Netzwerkgeschwindigkeit zu langsam ist. Dies ist eine große Belastung für den Server und kann durch die Verwendung des behinderten Attributs verboten werden. Zum Beispiel:
Kopieren Sie den Code wie folgt: <input type = "button" value = "subieren" />