Formulare verwenden, um Daten von Nutzern zu erhalten

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

Stellen Sie sich vor, Sie möchten Nutzer auf Ihrer Website nach ihrem Lieblingstier fragen. Zunächst benötigen Sie eine Möglichkeit, die Daten zu erfassen.

Wie gehen Sie dabei mit HTML vor?

In HTML können Sie dies mit dem Formularelement (<form>), einem <input> mit <label> und einem Sende-<button> erstellen.

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>, optionalen, im Start-Tag definierten Attributen und einem End-Tag </form>.

Zwischen dem Start- und End-Tag können Sie Formularelemente wie <input> und <textarea> für verschiedene Arten von Nutzereingaben einfügen. 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, stellt der Browser eine Anfrage. Ein Skript kann auf diese Anfrage antworten und die Daten verarbeiten.

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

Angenommen, Sie möchten ein Skript, das unter https://web.dev ausgeführt wird, um die Formulardaten zu verarbeiten. Wie würden Sie das tun? Jetzt ausprobieren!

Antwort ein-/ausblenden

Mit dem Attribut action können Sie die Position des Skripts auswählen.

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

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

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 im obigen Beispiel den Begriff „Frosch“ einreicht, stellt der Browser eine Anfrage an 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>

Mit POST werden die Daten in den Anfragetext eingeschlossen.

Die Daten sind nicht in der URL 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, die sensible Daten verarbeiten, die Methode POST. Die Daten sind verschlüsselt (wenn Sie HTTPS verwenden) 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. So werden die Daten zu Ihrem Browserverlauf hinzugefügt, da er in der URL enthalten ist. Suchformulare werden oft verwendet. So können Sie eine Suchergebnisseite als Lesezeichen speichern.

Sie haben nun das Formularelement selbst kennengelernt. Als Nächstes lernen Sie Formularfelder kennen, mit denen Sie Ihre Formulare interaktiv gestalten können.

Wissen testen

Testen Sie Ihr Wissen über das Formularelement

Wie sieht das Start-Tag des Formularelements aus?

</form>
Fast, das ist das End-Tag des <form>-Elements.
<form-container>
Versuch es noch einmal.
<form>
🎉
<form-element>
Versuch es noch einmal.

Mit welchem Attribut können Sie festlegen, wo die <form> verarbeitet wird?

where
Versuch es noch einmal.
action
Ja, das Attribut action definiert, wo die <form> verarbeitet wird.
href
Versuch es noch einmal.
url
Versuch es noch einmal.

Was ist die Standardanfragemethode?

GET
🎉
POST
Versuch es noch einmal.

Ressourcen

Das <form>-Element.