Formularaktion Javascript

| | | | | | | | | | | | | | | | | | | | | | |

Das HTML-Formularaktionsattribut definiert, was mit den Daten passieren soll, wenn ein Formular auf einer Webseite übermittelt wird. Der Wert des Aktionsattributs sollte die URL der Webressource sein, die den Inhalt des Formulars verarbeitet.

Wenn Sie Formulare erstellen und Daten auf Ihrer Website oder Webanwendung anfordern, müssen Sie häufig Sie wollen etwas mit Ihren Daten machen, oder? Hier kommt das Form-Aktionsattribut ins Spiel .

Sie sollten die Grundlagen zum Erstellen eines Formulars in HTML kennen. Grundsätzlich packen Sie den Inhalt des Formulars in das Element-Tag

. Im öffnenden Tag gibt es einige Attribute, die wir verwenden können, und eines davon ist die Aktion.

Das Aktionsattribut wird verwendet, um anzugeben, wohin wir die Formulardaten senden möchten, wenn das Formular gesendet wird. Der Aktionswert ist also die Seite, die das Formular verarbeitet.

HTML-Formular-Aktionsattribut

Das Aktionsattribut des HTML-Formulars gibt die URL an, die den Inhalt eines Formulars verarbeitet . Sie müssen sicherstellen, dass die Webressource, auf die das action-Attribut zeigt, die Methode akzeptiert, die Sie in Ihrem "method"-Attribut angeben.

Lassen Sie uns einen Blick auf die Syntax des action-Attributs werfen: .

action-Attribut erscheint zwischen unserem öffnenden -Label. Dieses Attribut wird häufig mit dem Methodenattribut verwendet.

Standardmäßig ist das Methodenattribut auf "get" gesetzt. Das bedeutet, dass Ihr Formular Daten bei einer HTTP GET-Anforderung sendet, wenn es gesendet wird. Sie können die Methode ändern, indem Sie "method = `post`" in Ihrem öffnenden -Tag

Formulardaten werden an die "Aktions"-URL gesendet, wenn auf eine Senden-Schaltfläche geklickt wird

Beispielaktion aus einem HTML-Formular

Sehen Sie sich ein Beispiel an:

Oben sendet die Aktion den Benutzernamen und die E-Mail-Daten an eine Seite namens process.html. der Benutzername und die E-Mail-Daten haben den Typ d ‚Eingabe „Text“. Wir definieren eine Schaltfläche mit der Eingabeart „Senden“. Wenn Sie darauf klicken, markiert diese Schaltfläche unsere Daten unter unserer „Aktions-URL“. p>

Geben Sie nun das obige Formularbeispiel ein - .it in eine eigentliche HTML-Datei dann .erstellen Sie im gleichen Ordner eine Datei namens process.html Diese Datei muss folgenden Inhalt haben:

Dieser Code definiert eine einfache Webseite, die einen Textabschnitt anzeigt, wenn die Seite geladen wird Online-Formular, dass wir zuvor definiert und kompilieren es:

OWvTniC0yol39X klicken sie auf 2XOWvTniC0XP> OwvTniC0yo l.ht.ht . Sie haben also die URL-Leiste bemerkt, was sind all diese zusätzlichen Daten? die Daten nach dem "?"-Symbol sind Abfrageparameter und wir haben die Anfrage als GET angegeben, die Daten werden als Abfrageparameter übergeben

 Screenshot 10 2020.08.02 34 02 PM „> </ figure> <p> Mit diesem Beispiel könnte man denken, es ist nicht sehr sinnvoll. Was wahr ist . Im Allgemeinen wird das Aktionsattribut verwendet, um den Inhalt des Formulars an die Serverseiten zu senden. zum Beispiel könnten wir eine PHP-Datei namens process.php verwenden.</p><p>process.php wird dann die ganze Magie mit Daten machen. Diese Seite könnte unsere Daten in einer Datenbank speichern oder sich für Ihre Lieblingsveranstaltung anmelden, wie Sie es nennen. PHP ist eine leistungsstarke Server-Skriptsprache, die häufig in der Webentwicklung verwendet wird. Wenn Sie WordPress schon einmal verwendet haben, werden wahrscheinlich einige verarbeitete Daten von PHP verarbeitet.</p> </a> </div> <p>Weitere Informationen zu PHP finden Sie in unserem <a href= PHP-Lernleitfaden .

Ist das Aktionsattribut erforderlich?

In HTML4 wäre die Antwort ja. von heute mit HTML5 ist es nicht erforderlich, ein Aktionsattribut anzugeben. Sie haben ein Formular-Tag ohne Aktionsattribut, dann werden die Daten an eine eigene Seite gesendet.

Warum sollten wir das tun? Mit dem Aufkommen von Single Page Applications (ZPS) , möchten wir unsere Formulardaten möglicherweise mit JavaScript verarbeiten. Oder wir möchten unsere Daten möglicherweise mit einem anderen Framework wie React / Angular verarbeiten.

Wenn wir Vanilla JavaScript verwenden, fügen wir häufig JavaScript-Auditor-Ereignis wenn das Formular gesendet wurde.

Fazit

Das Aktionsattribut des HTML-Formulars definiert, was mit dem Inhalt eines Formulars passiert, wenn das Formular gesendet wird. Das Aktionsattribut akzeptiert eine URL als Argument.

Sind Sie daran interessiert, Webentwickler zu werden? Sehen Sie sich unseren vollständigen Leitfaden zum Erlernen von HTML an. Sie finden Expertentipps zum Erlernen von HTML sowie eine Liste der besten Online-Kurse und Lernressourcen .