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

Detaillierte Erläuterung mehrerer Befehle in Linux zum Abrufen detaillierter Hardwareinformationen

Zusammenfassung verschiedener Übermittlungsmethoden für HTML-Formulare

Detaillierte Erläuterung mehrerer Befehle in Linux zum Abrufen detaillierter Hardwareinformationen

JavaScript zum Erzielen eines Zeitbereichseffekts

Überblick über die grundlegenden Bestandteile von HTML-Webseiten

So legen Sie die Position des Blockelements in der Mitte des Fensters fest

15 Zeilen CSS-Code können zum Absturz von Apple-Geräten führen, und das neueste iOS 12 ist nicht immun

MySQL 5.7.21 dekomprimierte Version des Tutorials zum Wiederherstellen von Daten über das historische Datenverzeichnis

Details der benutzerdefinierten Vue-Anweisung

Detaillierte Erläuterung der Generierung dynamischer Bibliotheken unter Linux und Anleitung zur Verwendung

Häufig verwendete HTML-Format-Tags_Powernode Java Academy

Die umfassendste package.json-Analyse

Artikel empfehlen

So stellen Sie ElasticSearch in Docker bereit

Grafisches Tutorial zur Installation und Konfiguration der Dekomprimierungsversion von MySQL 8.0.25

So importieren Sie CSS-Stile in externe HTML-Stylesheets

Drei Methoden zum Ändern des Hostnamens von Centos7

Die JS-Methode hasOwnProperty() erkennt, ob eine Eigenschaft die eigene Eigenschaft eines Objekts ist.

Beispiel für die Anpassung des Vue-Projekts an den großen Bildschirm

Beispielcode zur Implementierung von Follow Ads mit JavaScript

Detaillierte Erklärung der Methode getBoundingClientRect() in js

Verwendung des Node.js-HTTP-Moduls

Ein tiefes Verständnis der spitzen Klammern in Bash (für Anfänger)

Implementierungscode zum Hinzufügen von Links zu FLASH über HTML (Div-Ebene)

Verhindern Sie, dass HTML- und JSP-Seiten zwischengespeichert und erneut vom Webserver abgerufen werden.

Lernen Sie, wie Sie mit charAt() in JavaScript die am häufigsten vorkommenden Zeichen und deren Anzahl zählen.

Konfigurationsschema für die MySQL-Master-Slave-Synchronisierung unter dem Centos7-System

Tutorial zur MySQL-Infrastruktur: Detaillierte Erläuterung des Ausführungsprozesses von Abfrageanweisungen