Formulare verwenden, um Daten von Nutzern zu erhalten

In dieser Einführung in das Formularelement erfahren Sie die Grundlagen der Verwendung eines Formulars im Web.

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

In HTML können Sie das mit dem Formularelement (<form>), einem <input> mit einem <label> und einem <button> zum Senden erstellen.

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

Was ist ein Formularelement?

Das Formularelement besteht aus dem Starttag <form>, optionalen Attributen, die im Starttag definiert sind, und einem Endtag </form>.

Zwischen dem Start- und dem 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 reagieren und die Daten verarbeiten.

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

Angenommen, Sie möchten, dass ein Script unter https://web.dev ausgeführt wird, um die Formulardaten zu verarbeiten. Wie würden Sie hierzu vorgehen? Auf CodePen 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-Backend 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 gesendeten Daten an die URL angehängt werden. Wenn ein Nutzer im vorherigen Beispiel „Frosch“ eingibt, sendet der Browser eine Anfrage an die folgende URL:

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

In diesem Fall können Sie über die URL auf die Daten im Frontend oder Backend zugreifen.

Wenn Sie möchten, dass das Formular eine POST-Anfrage verwendet, können Sie das Attribut „method“ ändern.

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

Bei Verwendung von POST werden die Daten in den Text der Anfrage eingefügt.

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, in denen sensible Daten verarbeitet werden, die Methode POST. Die Daten werden verschlüsselt (wenn Sie HTTPS verwenden) und sind nur für das Backend-Skript zugänglich, das die Anfrage verarbeitet. Die Daten sind in der URL nicht sichtbar. Ein häufiges 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, da sie in der URL enthalten sind. Das wird häufig in Suchformularen verwendet. So können Sie eine Suchergebnisseite mit einem Lesezeichen versehen.

Nachdem Sie nun das Formularelement selbst kennengelernt haben, erfahren Sie, wie Sie Formularfelder hinzufügen, um Ihre Formulare interaktiv zu gestalten.

Wissen testen

Ihr Wissen zum Formularelement testen

Ressourcen

Das <form>-Element