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

autocomplete Ob das Formularelement automatisch vervollständigt werden soll

Eingabeelement

Eingabeelement wird sehr häufig verwendet. Formularelemente haben je nach Wert des Typattributs die folgenden allgemeinen Verwendungszwecke:

Texteingabe9c0277ee990771d30fd543a38aca6c0e

Eingabe sendenf9f7c6f4b3828831e895f30b0536400d
Optionsfeldeingabecca1d179302968b02e06aa8a20155740
Checkbox input3e15438b3da54e35303721f739543b21
Nummer input2c01953a7522c810f1fa66d627cf180c Das Eingabefeld kann nur eine Zahl eingeben, um den Maximalwert und den Minimalwert festzulegen.
Bereichseingabe 7a4313034c807dc840f651e5c24969b6 Ähnlich wie bei Zahl, es wird jedoch ein Schieberegler anstelle eines Eingabefelds angezeigt.
Durch die Farbeingabe d0335cf169d1c69d5fb760bfbec3b54d wird eine Farbauswahl angezeigt.
Datumseingabe6e290236d7c77fdce98cb15bf0dfeea2 öffnet eine
Datumsauswahl. E-Mail-Eingabe e8dc7451c84937575e38c52150e3cc83 wird als Texteingabefeld angezeigt und eine benutzerdefinierte Tastatur wird angezeigt.
Tel-Eingabe85f46f0e8aaaa3b9a68adb2fc5e483a4 ähnelt der E-Mail-Eingabe
URL-Eingabe b62e2bff68c9b56c3471a9e06cd94f80 ähnelt der E-Mail-Eingabe und es wird eine benutzerdefinierte Tastatur angezeigt. Das
textarea-Element kann einen mehrzeiligen Textbereich erstellen.
368b3d164100ae4e96620a1520b7c46040587128eee8df8f03d0b607fe983014
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.
701d81aaa14b8afd38d7545721c937f2 aba78b0dcb1db399ec615ce176d67bce4afa15d3069109ac30911f04c56f3338 ">4afa15d3069109ac30911f04c56f3338 18bb6ffaf0152bbe49cd8a3620346341

radio

Wie gruppiere ich? Einfach verschiedene Namensattribute festlegen

Beispiel:

< ;input type="radio" name="favourite" value="Spiele spielen">Spiele spielen

bde7bf8acbf9cc6f029a7263385354a4Code schreiben

c179a68332954c65bd5a26509d7f8801Männlich

a4353ce1cb381171d2d6de3681550745Weiblich ,
Hierbei handelt es sich um zwei Radio-

Platzhalter

, die Hinweise liefern, die den erwarteten Wert des Eingabefelds beschreiben.

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

type=hidden

Versteckte Eingabe definieren. Ausgeblendete Felder sind für den Benutzer nicht sichtbar. Versteckte Felder speichern normalerweise einen Standardwert und ihre Werte können auch von JavaScript geändert werden.

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.

Senden-Button

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!