Die Sammlung von Datenerfassung von Form und Formularen in HTML

Hier werden wir das Wissen über Formelemente und Formulare einführen.

Die DOM -Schnittstelle des Formularelements ist HTMLFormElement , die von HTMLElement ererbt, daher die gleichen Standardattribute wie andere HTML -Elemente, aber mehrere eindeutige Attribute und Methoden: Es selbst: es selbst:

Eingabeelement ist ein sehr weit verbreitetes Formularelement.

Texteingabe <Eingabetyp = Textname =>

Eingabe <Eingabe Typ = Senden> Senden>

Der einzelne Taste Eingabe <Eingabe type = Radio name = muss denselben Namenswert haben

Geben Sie <Eingabe type ein = Checkbox Name = Der gleiche Name Wert = unterschiedliche entsprechende Werte>

Digitaleingang <Eingabetyp = Zahl min = max => Das Eingangsfeld kann nur Zahlen eingeben und den Maximalwert und den Mindestwert festlegen.

Der Bereich Eingang <Eingabetyp = Bereich min = max => Ähnlich wie die Zahl, zeigt jedoch eine Gleitleiste anstelle des Eingangsfelds an.

Die Farbeingabe <Eingabetyp = color> wird einen Farbwähler angezeigt.

Das Datum input <Eingabe type = Datum> wird einen Datumsauswahlbericht übertreffen.

E -Mail -Eingabe <Eingabe -Typ = E -Mail> wird als Texteingangsfeld angezeigt und eine benutzerdefinierte Tastatur wird angezeigt.

Tel Input <Eingabetyp = Tel> Ähnlich wie bei der E -Mail -Eingabe

URL -Eingabe <Eingabetyp = URL> Ähnlich wie bei der E -Mail -Eingabe wird auch eine angepasste Tastatur angezeigt.

Textarea -Elemente können einen Multi -Line -Textbereich erstellen.

<textArea name = id = color = 30 Zeilen = 10> </textArea>

Die Attributwerte von Cols und Zeile repräsentieren die Breite und Höhe des Textbereichs.

Wählen Sie Elemente aus und Optionselemente können zum Erstellen eines Drop -Down -Menüs verwendet werden.

<select name = id => <option value => </option> <Option Value => </option> <Option Value => </OPLCT>

Wie gruppiert man verschiedene Namenseigenschaften

Beispiel:

<Eingabe type = Radio name = Lieblingswert = Spiele spielen> Spiele spielen

<Eingabe type = Radio name = Lieblingswert = Code schreiben> Code schreiben

<Eingabetyp = Radio Name = Sex Value = Man> Männlich

<Eingabe type = Radio name = Sex Value = Frau> weiblich, weiblich,

Dies sind die beiden Radiogruppen

Geben Sie eine Eingabeaufforderungsinformation (Hinweis) an, die den erwarteten Wert des Eingangsfeldes beschreiben kann.

Die Eingabeaufforderung wird angezeigt, wenn das Eingabefeld leer ist, und es wird verschwinden, wenn das Feld den Fokus erhält.

Definieren Sie versteckte Eingaben. Versteckte Felder sind für Benutzer nicht sichtbar. Versteckte Felder speichern normalerweise einen Standardwert, und ihre Werte können auch durch JavaScript geändert werden.

Zum Beispiel können für die Sicherheit der Name und die Wertwerte, die für Benutzer im Hintergrund nicht sichtbar sind, verwendet werden, um den Hintergrund zu überprüfen, um Fälschungsseiten zu überprüfen und zu verhindern.

Fügen Sie eine Einreichungsschaltfläche zum Formular hinzu, damit Benutzer Formulare senden können.

Die folgenden drei Schaltflächen können beim Klicken das Formular des Formulars auslösen:

 <Eingabetyp = Senden /> <Schaltfläche Typ = Senden> < /Schaltfläche> <Eingabetyp = Bild />

Der Typ -Standardwert des Schaltflächenelements in der Spezifikation ist eingereicht. Der Meditationswert liegt jedoch unter IE678. Daher muss die Eigenschaft type = Sendeneigenschaft zum Schaltflächenelement aus Kompatibilität manuell hinzugefügt werden.

Die anfängliche Person kann denken, dass die Einreichung des Formulars durch das Click -Ereignis der Einreichungstaste ausgelöst wird.

 Form.AdDeVentListener ('Submit', Funktion (e) {if (valid ()) {...} e.preventDefault ()})

Wenn es in dem Formularelement keine der drei oben genannten Schaltflächen gibt, kann der Benutzer das Formular nicht einreichen (die Eingabetaste ist ebenfalls ungültig submit() . submit()

 if (value ()) {form.submit ()}

Basierend auf der aktuellen populären AJAX+Cross -Domain Post (CORS) -Technologie verwenden wir wahrscheinlich kein Formularelement, um Daten direkt an den Server zu senden. Obwohl dies machbar ist, gibt es in den meisten Fällen ein Phänomen des Abbaus.

JavaScript kann verwendet werden, um diese Eingabedaten im HTML -Formular zu überprüfen, bevor die Daten an den Server gesendet werden.

Diese typischen Formdaten, die von JavaScript verifiziert wurden, sind:

Hat der Benutzer die erforderlichen Elemente im Formular ausgefüllt?

Ist die vom Benutzer eingegebene Mail -Adresse legal?

Hat der Benutzer ein rechtliches Datum eingegeben?

Geben Benutzer Text in numerisches Feld ein?

Die folgenden Funktionen werden verwendet, um zu prüfen, ob der Benutzer das erforderliche (oder erforderliche) Element im Formular ausgefüllt hat. Wenn die Muss ausgefüllt werden oder die Option leer ist, wird das Warnfeld angezeigt, und der Rückgabewert der Funktion ist falsch, andernfalls ist der Rückgabewert der Funktion wahr (bedeutet, dass die Daten kein Problem sind):

 Funktion Value_Required (Feld, alertTxt) {mit (field) {if (value == null || value ==) {alertTxt);

Unten finden Sie den Code mit dem HTML -Formular:

 <html> <kopf> <skript type = text/javaScript> Funktion Value_Required (Feld, alertTxt) {mit (field) {if (value == null || value ==) {alert (alert lerttxt); {Return true}} Funktion value_form (this) {mit (this) {if (value_required (E -Mail, E -Mail muss ausgefüllt werden!) {E -Mail.foc us (); return false}}} < /script> < /head> <body> <Formular Action = Subjektpage.htm OnSubmit = return validate_form (this) methode = post> E -Mail: <Eingabe typ /html>

Die folgenden Funktionen überprüfen, ob die Eingabedaten der grundlegenden Syntax der E -Mail -Adresse entsprechen.

Dies bedeutet, dass die Eingabedaten@ Symbole und Punktnummern (.) Enthalten müssen. Gleichzeitig@ nicht der erste Charakter der E -Mail -Adresse und mindestens eine Punktnummer nach@ 同时:

 Funktion Value_email (Feld, alertTxt) {mit (field) {apos = value.indexof (@) dotpos = value.lastIndexof (.) If (apos <1 || dotpos-apos <2) lert (alertTxt); Sonst {return true}}}

Unten finden Sie den vollständigen Code mit dem HTML -Formular:

 <html> <kopf> <skripttyp = text/javaScript> Funktion Value_email (Feld, alertTxt) {mit (field) {apos = value.indexof (@) dotpos = value .lastIndexof (.) if (apos <1 || dotpos-apos <2) {alert (alertTxt); = False) {E -Mail.focus (); Textname = E -Mail -Größe = 30> <Eingabetyp = Senden Wert = Senden> </Form> </body> </html>

In Abwesenheit des Formularelementpakets, auch wenn der Fokus der aktuellen Seite auf dem Formularelement liegt, löst Sie die Form des Formulars nicht aus. das ursprüngliche ursprüngliche Fließen zerstören. Die einfachste Lösung besteht darin, es mit einem Formularelement auf der Außenschicht zu wickeln und festzustellen, dass mindestens eine Einreichungs -Taste im Formularelement vorhanden ist. Zu diesem Zeitpunkt drückt der Benutzer die Eingabetaste, wenn die Eingabedomäne in der Form fokussiert ist, um die Einreichung auszulösen.

Bei der Übermittlung eines Formulars wird der Browser mit hohem Niveau, einschließlich des mobilen Browsers, Benutzer, ob Sie sich an das Benutzerkennwort erinnern müssen. In Abwesenheit eines Formelements wird der Browser das Anfragefenster nicht hochgezeigt.

Wenn wir eine Formularanmeldung entwickeln, sollten wir nicht versuchen, die Formulare zu entfernen und direkt in das Formular Element zu senden. Eingereichte Vorfallverarbeitung im Sendenereignis des Formularelements, nicht das Klickenereignis der Einreichungsschaltfläche.

Siehe:

Formelement und Formulare Form