So verwenden Sie die HTML-Formularübermittlung in HTML

Dieses Mal zeige ich Ihnen, wie Sie die HTML-Formularübermittlung in HTML verwenden. Was sind die Vorsichtsmaßnahmen bei der Verwendung der HTML-Formularübermittlung?

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

Formularelement

Die DOM-Schnittstelle des Formularelements ist HTMLFormElement, das von HTMLElement erbt, sodass es dieselben Standardattribute wie andere HTML-Elemente hat, aber auch mehrere eindeutige 🎜>Attribute und Methoden:

Attributwert

Beschreibung

akzeptieren- charset Der Zeichensatz, den der Server verarbeiten kann.

action Die URL, die die Anfrage akzeptiert. Dieser Wert kann durch das formaction-Attribut des Eingabe- oder Schaltflächenelements überschrieben werden element.

elements Sammlung aller Steuerelemente im Formular (HTMLCollection)

enctype Der angeforderte Kodierungstyp kann durch die Eingabe im Formularelement oder dem formenctype-Attribut der Schaltfläche überschrieben werden Element

Länge Die Anzahl der Steuerelemente im Formular

Methode Der zu sendende HTTP--Anforderungstyp , normalerweise „get“ oder „post“. durch das formmethod-Attribut des Eingabe- oder Schaltflächenelements im Formularelement

name Der Name des Formulars

reset() Setzt alle Formularfelder auf Standardwerte zurück

subscribe() Senden Sie das Formular

target Der Name des Fensters, das zum Senden von Anforderungen und Empfangen von Antworten verwendet wird. Dieser Wert kann durch das formtarget-Attribut des Eingabe- oder Schaltflächenelements im Formularelement

Eingabe senden
Optionsfeldeingabe
Checkbox input< input type="checkbox" name="Gleicher Name" value="Unterschiedliche entsprechende Werte">
Nummer input Das Eingabefeld kann nur eine Zahl eingeben, um den Maximalwert und den Minimalwert festzulegen.
Bereichseingabe Ähnlich wie bei Zahl, es wird jedoch ein Schieberegler anstelle eines Eingabefelds angezeigt.
Durch die Farbeingabe wird eine Farbauswahl angezeigt.
Datumseingabe öffnet eine
Datumsauswahl. E-Mail-Eingabe wird als Texteingabefeld angezeigt und eine benutzerdefinierte Tastatur wird angezeigt.
Tel-Eingabe ähnelt der E-Mail-Eingabe
URL-Eingabe ähnelt der E-Mail-Eingabe und es wird eine benutzerdefinierte Tastatur angezeigt. Das
textarea-Element kann einen mehrzeiligen Textbereich erstellen.

Die Attributwerte von cols und row stellen die Zeichen dar Breite und Höhe des Textbereichs.
Das Select-Element und das Option-Element werden zusammen verwendet, um ein Dropdown-Menü zu erstellen.
">

Code schreiben

Weiblich ,
Hierbei handelt es sich um zwei Radio-

Dieser Tooltip erscheint, wenn das Eingabefeld leer ist und verschwindet, wenn das Feld den Fokus erhält.

Es dient beispielsweise Sicherheitszwecken und überträgt für den Benutzer unsichtbare Namens- und Wertwerte an den Hintergrund, sodass der Hintergrund eine Überprüfung durchführen kann, um Seitenfälschungen zu verhindern.

Fügen Sie dem Formular eine Schaltfläche zum Senden hinzu, damit Benutzer das Formular senden können.

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

<input type="submit" />
<button type="submit"></button>
<input type="image" />

Der Standardwert des Typs des Schaltflächenelements in der Spezifikation ist „Submit“, unter IE678 jedoch der Standardwert Der Wert ist button. Aus Kompatibilitätsgründen ist es daher erforderlich, das Attribut type="submit" manuell zum Button-Element hinzuzufügen.

Senden-Ereignis

Anfänger denken vielleicht, dass das Senden des Formulars durch das Klick-Ereignis der Schaltfläche „Senden“ ausgelöst wird. Dies ist jedoch nicht der Fall Ereignisse des Formulars werden in verschiedenen Browsern in unterschiedlicher Reihenfolge ausgeführt. Um das Formularübermittlungsereignis genau zu steuern, werden wir zunächst die Überprüfung und andere Vorgänge im Übermittlungsereignis des Formulars durchführen.

form.addEventListener('submit', function (e) {
  if (valid()) {
    ...
  }
  e.preventDefault()
})

Wenn im Formularelement keine der oben genannten drei Schaltflächen vorhanden ist, kann der Benutzer das Formular nicht absenden (die Eingabetaste ist in diesem Fall ebenfalls ungültig). ()-Methode des Formularelements verwendet werden kann, ist zu beachten, dass der Aufruf der Submit()-Methode nicht das Submit-Ereignis des Formularelements auslöst und andere Vorgänge vor dem Aufruf ausgeführt werden sollten Methode „submit()“.

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

Formularübermittlung und Benutzererfahrung

Basierend auf der beliebten Ajax + Cross-Domain POST (CORS)-Technologie werden wir Daten wahrscheinlich direkt an den Server übermitteln, ohne das Formularelement zu verwenden . Dies funktioniert zwar, beeinträchtigt jedoch in den meisten Fällen das Erlebnis.

JavaScript Formularvalidierung

JavaScript kann verwendet werden, um Eingabedaten in HTML-Formularen zu validieren, bevor die Daten 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 eingegebene E-Mail-Adresse legal?
Hat der Benutzer ein gültiges Datum eingegeben?
Hat der Benutzer Text in das numerische Feld eingegeben?
Erforderliche (oder erforderliche) Elemente

Mit der folgenden Funktion wird überprüft, ob der Benutzer die erforderlichen (oder erforderlichen) Elemente im Formular ausgefüllt hat. Wenn das erforderliche Feld oder das erforderliche Feld leer ist, wird ein Warnfeld angezeigt und der Rückgabewert der -Funktion ist falsch, andernfalls ist der Rückgabewert der Funktion wahr (was bedeutet, dass kein Problem damit vorliegt). Daten):

function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
  {alert(alerttxt);return false}
else {return true}
}
}

<html>
<head>
<script type="text/javascript">
 
function validate_required(field,alerttxt)
{
with (field)
  {
  if (value==null||value=="")
    {alert(alerttxt);return false}
  else {return true}
  }
}
 
function validate_form(thisform)
{
with (thisform)
  {
  if (validate_required(email,"Email must be filled out!")==false)
    {email.focus();return false}
  }
}
</script>
</head>
 
<body>
<form action="submitpage.htm" onsubmit="return validate_form(this)" method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
 
</html>

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So fügen Sie Videos in eine HTML-Webseite ein

So formatieren und geben Sie JSON-Daten in HTML aus

So verwenden Sie HTML, um ein mobiles, festes, schwebendes, durchsichtiges Suchfeld zu erstellen

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die HTML-Formularübermittlung in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!