Eine Sammlung von Informationen zu Formularen und Formularübermittlungsvorgängen in HTML

Hier stellen wir das Wissen über Formularelemente und Formularübermittlung vor.

Das Formular-Element

Die DOM-Schnittstelle des Formularelements ist HTMLFormElement , das von HTMLElement erbt. Daher hat es die gleichen Standardeigenschaften wie andere HTML-Elemente, aber auch mehrere einzigartige Eigenschaften und Methoden:

Eingabeelement

Das Eingabeelement ist ein weit verbreitetes Formularelement. Abhängig vom Wert des Typattributs hat es die folgenden allgemeinen Verwendungszwecke:

Texteingabe <input type="text" name="">
Eingabe senden <input type="submit">
Radiobutton-Eingabe <input type="radio" name="muss den gleichen Namen haben" value="der Wert sollte übereinstimmen">
Kontrollkästchen-Eingabe <input type="checkbox" name="gleicher Name" value="anderer entsprechender Wert">
Zahleneingabe <input type="number" min="" max=""> In das Eingabefeld können nur Zahlen eingegeben werden, außerdem können Maximal- und Minimalwerte eingestellt werden.
Die Bereichseingabe <input type="range" min="" max=""> ähnelt der Zahl, zeigt aber einen Schieberegler statt eines Eingabefelds an.
Die Farbeingabe <input type="color"> öffnet eine Farbauswahl.
Die Datumseingabe <input type="date"> öffnet ein Datumsauswahlfeld.
Die E-Mail-Eingabe <input type="email"> wird als Texteingabefeld angezeigt und eine benutzerdefinierte Tastatur wird eingeblendet.
Die Tel-Eingabe <input type="tel"> ähnelt der E-Mail-Eingabe
Die URL-Eingabe <input type="url"> ähnelt der E-Mail-Eingabe und es wird eine benutzerdefinierte Tastatur angezeigt.
Das Textarea-Element erstellt einen mehrzeiligen Textbereich.
<textarea name="" id="" cols="30" rows="10"></textarea>
Die Attributwerte von Spalten und Zeilen repräsentieren jeweils die Zeichen der Breite und Höhe des Textbereichs.
Das Auswahlelement wird in Verbindung mit dem Optionselement verwendet, um ein Dropdown-Menü zu erstellen.
<Name auswählen="" ID=""> <Optionswert=""></Option> <Optionswert=""></Option> <Optionswert=""></Option> </Auswählen>

Radio

Wie gruppieren? Einfach unterschiedliche Namensattribute festlegen

Beispiel:

<input type="radio" name="favourite" value="play games">Spiele spielen
<input type="radio" name="favourite" value="write code">Code schreiben

<input type="radio" name="sex" value="man">Männlich
<input type="radio" name="sex" value="woman">Weiblich,
Dies sind zwei Funkgeräte

Platzhalter

Bietet einen Hinweis, der den erwarteten Wert eines Eingabefelds beschreibt.
Der Hinweis erscheint, wenn das Eingabefeld leer ist, und verschwindet, wenn das Feld den Fokus erhält.

Typ=versteckt

Definiert einen versteckten Eingang. Ausgeblendete Felder sind für den Benutzer nicht sichtbar. Versteckte Felder speichern normalerweise einen Standardwert und ihr Wert kann auch durch JavaScript geändert werden.
Beispielsweise werden aus Sicherheitsgründen für den Benutzer unsichtbare Namens- und Wertewerte an den Hintergrund übermittelt, damit dieser eine Überprüfung durchführen und Seitenfälschungen verhindern kann.

Schaltfläche „Senden“

Durch Hinzufügen einer Schaltfläche zum Senden zum Formular kann der Benutzer das Formular übermitteln.

Die folgenden drei Schaltflächen können beim Anklicken das Übermittlungsereignis des Formulars auslösen:

<Eingabetyp="Senden" />
<button type="senden"></button>
<Eingabetyp="Bild" />

Der Standardwert für den Typ des Schaltflächenelements in der Spezifikation lautet „Senden“, der Standardwert in IE678 lautet jedoch „Button“. Aus Kompatibilitätsgründen muss dem Schaltflächenelement daher manuell das Attribut „type=‚submit‘“ hinzugefügt werden.

Veranstaltung einreichen

Anfänger denken vielleicht, dass das Absenden des Formulars durch das Klickereignis der Schaltfläche „Senden“ ausgelöst wird. Tatsächlich werden das Klickereignis des Schaltflächenelements und das Absendenereignis des Formulars in verschiedenen Browsern in unterschiedlicher Reihenfolge ausgeführt. Um das Absendenereignis des Formulars genau zu steuern, führen wir daher Überprüfungen und andere Vorgänge im Absendenereignis des Formulars durch.

form.addEventListener('senden', Funktion (e) {
  wenn (gültig()) {
    ...
  } 
  e.preventDefault()
})

Wenn das Formularelement keine der drei oben genannten Schaltflächen hat, kann der Benutzer das Formular nicht absenden (die Eingabetaste ist ebenfalls ungültig). Zu diesem Zeitpunkt können Sie die für das Formularelement eindeutige Methode submit() verwenden, um das Formular abzusenden. Es ist zu beachten, dass der Aufruf der Methode „submit()“ nicht das Absendeereignis des Formularelements auslöst. Formularvalidierung und andere Vorgänge sollten vor dem Aufruf submit() durchgeführt werden.

wenn (gültig()) {
  form.submit()
}

Formularübermittlung und Benutzererfahrung

Basierend auf der beliebten Ajax+Cross-Domain-POST-Technologie (CORS) können wir das Formularelement nicht verwenden, um Daten direkt an den Server zu übermitteln. Dies ist zwar möglich, das Erlebnis wird jedoch in den meisten Fällen beeinträchtigt.

JavaScript-Formularvalidierung

Mithilfe von JavaScript können die Eingabedaten in HTML-Formularen validiert werden, bevor sie an den Server gesendet werden.

Typische durch JavaScript validierte Formulardaten sind:

Hat der Benutzer die erforderlichen Felder im Formular ausgefüllt?
Ist die vom Benutzer angegebene E-Mail-Adresse gültig?
Hat der Benutzer ein gültiges Datum eingegeben?
Hat der Benutzer Text in das numerische Feld eingegeben?
Erforderliche (oder optionale) Elemente

Mit der folgenden Funktion wird überprüft, ob der Benutzer die erforderlichen (oder obligatorischen) Elemente im Formular ausgefüllt hat. Wenn ein erforderliches Feld oder ein erforderliches Feld leer ist, wird ein Warnfeld angezeigt und der Rückgabewert der Funktion ist „false“, andernfalls ist der Rückgabewert der Funktion „true“ (was bedeutet, dass kein Problem mit den Daten vorliegt):

Funktion validate_required(Feld, Alerttxt)
{
mit (Feld)
{
wenn (Wert==null||Wert=="")
  {alert(alerttxt);return false}
sonst {return true}
}
}

Hier ist der Code zusammen mit dem HTML-Formular:

<html>
<Kopf>
<Skripttyp="text/javascript">

Funktion validate_required(Feld, Alerttxt)
{
mit (Feld)
  {
  wenn (Wert==null||Wert=="")
    {alert(alerttxt);return false}
  sonst {return true}
  }
}

Funktion validate_form(diesesFormular)
{
mit (dieser Form)
  {
  if (validate_required(email,"E-Mail muss ausgefüllt werden!")==false)
    {email.focus();return false}
  }
}
</Skript>
</Kopf>

<Text>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
E-Mail: <input type="text" name="email" size="30">
<input type="submit" value="Senden"> 
</form>
</body>

</html>

E-Mail-Verifizierung

Die folgende Funktion prüft, ob die Eingabedaten der grundlegenden Syntax einer E-Mail-Adresse entsprechen.

Dies bedeutet, dass die Eingabedaten das @-Symbol und den Punkt (.) enthalten müssen. Außerdem darf @ nicht das erste Zeichen einer E-Mail-Adresse sein und nach @ muss mindestens ein Punkt stehen:

Funktion validate_email(Feld, Alerttxt)
{
mit (Feld)
{
apos=Wert.indexOf("@")
dotpos=Wert.letzterIndexVon(".")
wenn (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
sonst {return true}
}
}

Hier ist der vollständige Code zusammen mit dem HTML-Formular:

<html>
<Kopf>
<Skripttyp="text/javascript">
Funktion validate_email(Feld, Alerttxt)
{
mit (Feld)
{
apos=Wert.indexOf("@")
dotpos=Wert.letzterIndexVon(".")
wenn (apos<1||dotpos-apos<2) 
  {alert(alerttxt);return false}
sonst {return true}
}
}

Funktion validate_form(diesesFormular)
{
mit (dieser Form)
{
if (validate_email(email,"Keine gültige E-Mail-Adresse!")==false)
  {email.focus();return false}
}
}
</Skript>
</Kopf>

<Text>
<form action="submitpage.htm" onsubmit="return validate_form(this);" method="post">
E-Mail: <input type="text" name="email" size="30">
<input type="submit" value="Senden"> 
</form>
</body>

</html>

Übermittlung per Tastenkombination

Wenn kein Formularelement-Wrapper vorhanden ist, wird das Formular durch Drücken der Eingabetaste nicht gesendet, auch wenn der Fokus der aktuellen Seite auf dem Formularelement liegt. Benutzer müssen von der Tastatursteuerung auf die Maus-/Gestensteuerung umsteigen, wodurch die ursprüngliche Sprachverständlichkeit zerstört wird. Die einfachste Lösung besteht darin, es mit einem Formularelement auf der äußeren Ebene zu umschließen und sicherzustellen, dass im Formularelement mindestens eine Schaltfläche zum Senden vorhanden ist. Wenn zu diesem Zeitpunkt das Eingabefeld im Formular den Fokus erhält, drückt der Benutzer die Eingabetaste, um die Übermittlung auszulösen.

Der Browser merkt sich das Kontopasswort

Beim Absenden eines Formulars fragen fortgeschrittene Browser, einschließlich mobiler Browser, den Benutzer, ob er sich sein Benutzerkonto und sein Passwort merken muss. Für normale Benutzer ist dies eine sehr nützliche Funktion, insbesondere auf mobilen Geräten, die Benutzern viel Zeit sparen kann. Wenn kein Formularelement vorhanden ist, öffnet der Browser das Abfragefenster nicht.

Zusammenfassen

Wenn wir eine Formularanwendung entwickeln, sollten wir nicht versuchen, das Formularelement zu entfernen und direkt zu übermitteln. Das Formularelement sollte eine Übermittlungsschaltfläche enthalten. Wenn es sich um ein Schaltflächenelement handelt, sollte das Attribut type="submit" manuell hinzugefügt werden. Das Übermittlungsereignis wird im Übermittlungsereignis des Formularelements behandelt, nicht im Klickereignis der Übermittlungsschaltfläche.

siehe:

Formularelement und Formularübermittlung