Zusammenfassung verschiedener Übermittlungsmethoden für HTML-Formulare

Zusammenfassung verschiedener Übermittlungsmethoden für HTML-Formulare
Die gebräuchlichste, am häufigsten verwendete und allgemeinste Methode ist die Verwendung des Submit-Typs. Siehe den Code:

Code kopieren
Der Code lautet wie folgt:

<Formularname=”Formular” Methode=”Post” Aktion=”#">
<Eingabetyp=”Senden” Name=”Senden” Wert=”Senden">
</form>

Eine weitere gängige Methode ist die Verwendung von Bildern:

Code kopieren
Der Code lautet wie folgt:

<Formularname=”Formular” Methode=”Post” Aktion=”# ">
<Eingabetyp=”Bild” Name=”Senden” src=”btnSubmit.jpg”>
</form>

Die dritte Methode besteht darin, einen Link zum Senden des Formulars zu verwenden. Dabei kommt das JavaScript-DOM-Modell zum Einsatz:

Code kopieren
Der Code lautet wie folgt:

<Formularname=”Formular” Methode=”Post” Aktion=”#”>
<a href="javascript:form.submit();">Senden</a>
</form>

Diese Methode ruft tatsächlich eine JavaScript-Funktion auf. Die Verwendung einer JavaScript-Funktion zum Senden eines Formulars bietet viele flexible Möglichkeiten. Sie können sie beispielsweise dem Onclick-Ereignis eines beliebigen Tags hinzufügen:

Code kopieren
Der Code lautet wie folgt:

<Formularname=”Formular” Methode=”Post” Aktion=”#”>
<div onclick="javascript:form.submit();">
<span>Senden</span>
</div>
</form>

Was aber, wenn ein Formular mehrere Senden-Schaltflächen haben muss?
Beispielsweise verweisen die Absende-Schaltflächen in einem Formular auf unterschiedliche Verarbeitungsseiten. Da die Verarbeitungsseite der Formulardaten bei der Definition des Formulars festgelegt wurde, führt das einfache Platzieren mehrerer Absende-Schaltflächen im Formular nicht zum gewünschten Ergebnis. Dies erfordert JavaScript.
Definieren Sie zunächst eine Funktion:

Code kopieren
Der Code lautet wie folgt:

<Skriptsprache=Javascript>
Funktion Abfrage(){
form.action=”query.php”;
form.submit();}
Funktion update(){
form.action=”update.php”;
form.submit();}
</Skript>

Indem Sie den Wert des Aktionsattributs des Formulars über JavaScript ändern, können Sie mehrere Senden-Schaltflächen mit unterschiedlichen Funktionen implementieren. Der Code auf der Seite lautet wie folgt:

Code kopieren
Der Code lautet wie folgt:

<Formularname=”Formular” Methode=”Post” Aktion=”#”>
<Eingabetyp=”Schaltfläche” Name=”Abfrage” Onclick=”Abfrage();” Wert=”Abfrage”>
<Eingabetyp=”Schaltfläche” Name=”Aktualisieren” bei Klick=”Aktualisieren();” Wert=”Aktualisieren”>
</form>

Der obige Code verwendet eine normale Schaltfläche und die Übermittlungsfunktion wird durch den Aufruf einer JavaScript-Funktion in ihrem Onclick-Ereignis implementiert.
Ich denke, dass die oben beschriebenen Methoden zum Senden von Formularen für die Bearbeitung komplexer Formulare ausreichend sind.

<<:  Detaillierte Erklärung zum MySQL-Dateispeicher

>>:  Mögliche Gründe, warum das Eingabetag type="reset" in HTML ungültig ist (nicht funktioniert).

Artikel empfehlen

Implementierungsschritte zur Kapselung von Komponenten basierend auf React

Inhaltsverzeichnis Vorwort Wie kapselt Antd Kompo...

Eine kurze Analyse verschiedener Möglichkeiten zum Konfigurieren statischer IP-Adressen in RHEL8

Beim Arbeiten an einem Linux-Server ist das Zuwei...

Antworten auf mehrere häufig gestellte MySQL-Interviewfragen

Vorwort: Bei Vorstellungsgesprächen für verschied...

Reagieren Sie Homepage langsames Laden Problem Leistungsoptimierung Fall detaillierte Erklärung

Nachdem ich React eine Weile studiert habe, möcht...

So unterstützen Sie vollständiges Unicode in MySQL/MariaDB

Inhaltsverzeichnis Einführung in utf8mb4 Fehler b...

JavaScript-Canvas zum Erzielen von Regentropfeneffekten

In diesem Artikelbeispiel wird der spezifische Co...

Detaillierte Erläuterung gängiger Vorgänge für Docker-Images und -Container

Bildbeschleuniger Manchmal ist es schwierig, Bild...

Ajax löst domänenübergreifende Probleme durch Festlegen eines CORS-Antwortheaders, um eine domänenübergreifende Fallstudie zu erreichen

1. Legen Sie den CORS-Antwortheader fest, um domä...

Sechs wichtige Selektoren in CSS (merken Sie sie sich in drei Sekunden)

Von: https://blog.csdn.net/qq_44761243/article/de...

SQL-Implementierung von LeetCode (175. Zwei Tabellen verbinden)

[LeetCode] 175.Zwei Tabellen kombinieren Tabelle:...

Drei Möglichkeiten, in CSS3 eine Hintergrundunschärfe zu erzielen (Zusammenfassung)

1. Normale Hintergrundunschärfe Code: <Stil>...

Installieren Sie Kafka unter Linux

Inhaltsverzeichnis 1.1 Java-Umgebung als Vorausse...

Drei Möglichkeiten zur Realisierung der horizontalen Zentrierung von Elementen und zum Verständnis der Konzepte von festem Layout und fließendem Layout

Die Eigenschaft, Text in CSS zu zentrieren, lässt ...

Implementierung von Nginx Hot Deployment

Inhaltsverzeichnis Semaphor Nginx-Hot-Bereitstell...

mysql8.0.23 msi Installation super ausführliches Tutorial

1. Laden Sie MySql herunter und installieren Sie ...