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).

VMWare15 installiert Mac OS-System (grafisches Tutorial)

Zusammenfassung verschiedener Übermittlungsmethoden für HTML-Formulare

VMWare15 installiert Mac OS-System (grafisches Tutorial)

Beispiel für die Verwendung eines CSS-Filters zum Schreiben von Mouseover-Effekten

Detaillierte Erläuterung geplanter Aufgaben und verzögerter Aufgaben unter Linux

Nach dem Klickereignis des HTML-Hyperlinks a wird zur Adresse gesprungen, auf die href zeigt.

Detaillierte Schritte zur Installation von JDK und Tomcat auf einem Linux-Cloud-Server (empfohlen)

Zusammenfassung einiger Punkte, die bei der Registrierung von Tomcat als Dienst zu beachten sind

Zusammenfassung gängiger Befehle zum Erstellen von ZooKeeper3.4-Middleware unter CentOS7

Einige Indikatoren für exzellentes Web-Frontend-Design

Erste Zusammenfassung des Website-Erstellungs-Tutorials für Anfänger

Installieren und erstellen Sie eine Serverumgebung aus PHP+Apache+MySQL auf CentOS

Artikel empfehlen

JavaScript imitiert den Jingdong-Karusselleffekt

So gehen Sie mit verstümmelten Zeichen in der MySQL-Datenbank um

Nginx: Lernen, wie man einen Dienst zum Schutz von Datei-Hotlinks erstellt – Beispiel

Detaillierte Erklärung, warum die langsame Abfrageprotokollzeit von MySQL 5.7 8 Stunden hinter der Systemzeit liegt

Beispiele für minimalistisches Website-Design

Mehrere Situationen, in denen Div durch Iframe abgedeckt ist, und ihre Lösungen

JavaScript-Code zur Implementierung der Weibo-Batch-Unfollow-Funktion

MySQL-Lernen (VII): Detaillierte Erläuterung des Implementierungsprinzips des Innodb Storage Engine-Index

Was soll ich tun, wenn ich die Quelldatei einer Webseite nicht anzeigen kann?

HTML implementiert ein schreibgeschütztes Textfeld und kann den Inhalt nicht ändern

Docker führt Vorgänge mit dem angegebenen Speicher aus

Zusammenfassung der Unterschiede zwischen globalen Objekten in Node.js und Browsern

Beim Upgrade von MySQL auf 5.7 meldet WordPress beim Importieren von Daten den Fehler 1067

Lösung für den ineffektiven globalen Stil der benutzerdefinierten Miniprogrammkomponente

【Webdesign】Teilen Sie E-WebTemplates exquisite Vorlagen für ausländische Webseiten (FLASH + PSD-Quelldatei + HTML).