Formulare verwenden, um Daten von Nutzern zu erhalten

In dieser Einführung lernen Sie die Grundlagen der Verwendung von Formularen im Web kennen. -Elements.

Angenommen, Sie möchten die Nutzer auf Ihrer Website nach ihrem Lieblingstier fragen. Zuerst benötigen Sie eine Möglichkeit, die Daten zu erfassen.

Wie gehen Sie hierzu mit HTML vor?

In HTML können Sie dieses mit dem Formularelement (<form>) erstellen, ein <input> mit einem <label> und ein <button> senden.

Was ist ein Formularelement?

<form>
  <label for="animal">What is your favorite animal?</label>
  <input type="text" id="animal" name="animal">
  <button>Save</button>
</form>

Das Formularelement besteht aus dem Start-Tag <form>, optionale Attribute, die im Start-Tag definiert sind, und ein End-Tag </form>.

Zwischen dem Start- und dem End-Tag kannst du Formularelemente wie <input> und <textarea> einfügen für verschiedene Arten von Nutzereingaben. Im nächsten Modul erfahren Sie mehr über Formularelemente.

Wo werden die Daten verarbeitet?

Wenn ein Formular gesendet wird, z. B. wenn der Nutzer auf die Schaltfläche Senden klickt: der Browser eine Anfrage sendet. Ein Skript kann auf diese Anfrage antworten und die Daten verarbeiten.

Standardmäßig erfolgt die Anfrage an die Seite, auf der das Formular angezeigt wird.

Angenommen, ein Skript soll unter https://web.dev ausgeführt werden. um die Formulardaten zu verarbeiten – wie würden Sie das tun? Jetzt ausprobieren

<form action="https://example.com/animals">
...
</form>

Im vorherigen Beispiel wird eine Anfrage an https://example.com/animals gesendet. Ein Skript im example.com-Back-End kann Anfragen an /animals verarbeiten und verarbeiten Daten aus dem Formular.

Wie werden die Daten übertragen?

Standardmäßig werden Formulardaten als GET-Anfrage gesendet, wobei die eingereichten Daten an die URL angehängt werden. Wenn ein Nutzer „Frosch“ einreicht Im obigen Beispiel sendet der Browser eine Anfrage an die folgende URL:

https://example.com/animals?animal=frog

In diesem Fall können Sie auf die Daten im Frontend oder Backend zugreifen, indem Sie die Daten aus der URL abrufen.

Wenn Sie möchten, können Sie das Formular anweisen, eine POST-Anfrage zu verwenden, indem Sie das Methodenattribut ändern.

<form method="post">
...
</form>

Bei Verwendung von POST werden die Daten in die Text der Anfrage.

Die Daten sind in der URL nicht sichtbar und können nur über ein Frontend- oder Backend-Skript aufgerufen werden.

Welche Methode sollten Sie verwenden?

Für beide Methoden gibt es Anwendungsfälle.

Verwenden Sie für Formulare, in denen sensible Daten verarbeitet werden, die Methode POST. Die Daten sind verschlüsselt (bei Verwendung von HTTPS) und nur über das Back-End-Skript zugänglich, das die Anfrage verarbeitet. Die Daten sind in der URL nicht sichtbar. Ein gängiges Beispiel ist ein Anmeldeformular.

Wenn die Daten freigegeben werden können, können Sie die Methode GET verwenden. Die Daten werden dann Ihrem Browserverlauf hinzugefügt, wenn sie in der URL enthalten sind. Dies wird häufig in Suchformularen verwendet. So können Sie eine Suchergebnisseite als Lesezeichen speichern.

Sie kennen nun das Formularelement. Formularfelder, um Ihre Formulare interaktiv zu gestalten.

Wissen testen

Testen Sie Ihr Wissen über Formularelemente

Ressourcen

Das Element <form>.