Das Formularelement im Detail

In einem früheren Modul haben Sie gelernt, wie Sie das <form>-Element verwenden. In diesem Modul erfahren Sie, wie ein Formular funktioniert und wann Sie es verwenden sollten.

Sollten Sie ein <form>-Element verwenden?

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Sie müssen Formularsteuerelemente nicht immer in ein <form>-Element einfügen. Sie können beispielsweise ein <select>-Element bereitstellen, damit Nutzer eine Produktkategorie auswählen können. Sie benötigen hier kein <form>-Element, da Sie keine Daten in Ihrem Backend speichern oder verarbeiten.

In den meisten Fällen sollten Sie jedoch das <form>-Element verwenden, wenn Sie Daten von Nutzern speichern oder verarbeiten. Wie Sie in diesem Modul erfahren, bietet die Verwendung von <form> viele integrierte Browserfunktionen, die Sie sonst selbst entwickeln müssten. Ein <form> bietet standardmäßig viele integrierte Bedienungshilfen. Wenn Sie vermeiden möchten, dass eine Seite neu geladen wird, wenn ein Nutzer ein Formular sendet, können Sie das <form>-Element weiterhin verwenden, es aber mit JavaScript erweitern.

Wie funktioniert <form>?

Sie haben gelernt, dass ein <form> die beste Methode für den Umgang mit Nutzerdaten ist. Sie fragen sich jetzt vielleicht, wie ein Formular funktioniert.

Das <form> ist ein Container für interaktive Formularsteuerelemente.

<form method="post">
  <label for="name">Name</label>
  <input type="text" name="name" id="name">
  <button formaction="/name">Save</button>
</form>

Wie funktioniert das Einreichen von Formularen?

Wenn Sie ein <form> einreichen, prüft der Browser die <form>-Attribute. Die Daten werden gemäß dem method-Attribut als GET- oder POST-Anfrage gesendet. Wenn kein method-Attribut vorhanden ist, wird eine GET-Anfrage an die URL der aktuellen Seite gesendet.

Wie können Sie auf die Formulardaten zugreifen und sie verarbeiten? Die eingereichten Daten können im Frontend mit JavaScript über eine GET-Anfrage oder im Backend mit Code über eine GET- oder POST-Anfrage verarbeitet werden. Weitere Informationen zu Anfragetypen und zum Übertragen von Formulardaten

Wenn das Formular gesendet wird, stellt der Browser eine Anfrage an die URL, die der Wert des Attributs action ist. Außerdem prüft der Browser, ob die Schaltfläche Senden ein formaction-Attribut hat. In diesem Fall wird die dort definierte URL verwendet.

Außerdem sucht der Browser nach zusätzlichen Attributen für das <form>-Element, um beispielsweise zu entscheiden, ob das Formular validiert werden soll (novalidate), ob die automatische Vervollständigung verwendet werden soll (autocomplete="off") oder welche Codierung verwendet werden soll (accept-charset).

Erstellen Sie ein Formular, in dem Nutzer ihre Lieblingsfarbe angeben können. Die Daten sollten als POST-Anfrage gesendet werden. Die URL, unter der die Daten verarbeitet werden, sollte /color lauten.

Formular anzeigen

Eine mögliche Lösung ist die Verwendung dieses Formulars:

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

Sorgen Sie dafür, dass Nutzer Ihr Formular senden können

Es gibt zwei Möglichkeiten, ein Formular einzureichen. Sie können auf eine Senden-Schaltfläche klicken oder Enter drücken, während Sie ein beliebiges Formularsteuerelement verwenden.

Verwenden Sie beim Erstellen der Schaltfläche Senden immer eine handlungsauffordernde Sprache. Klicken Sie beispielsweise auf Zur Zahlung oder Änderungen speichern. So können Ihre Nutzer die nächsten Schritte in Ihrem Formular besser nachvollziehen.

Sie haben verschiedene Möglichkeiten, eine Senden-Schaltfläche hinzuzufügen. Eine Möglichkeit besteht darin, ein <button>-Element in das Formular einzufügen. Solange Sie type="button" nicht verwenden, funktioniert sie wie eine Senden-Schaltfläche. Alternativ können Sie <input type="submit" value="Submit"> verwenden.

Eine dritte Option ist die Verwendung von <input type="image" alt="Submit" src="submit.png">, um eine grafische Schaltfläche Senden zu erstellen. Da Sie jetzt jedoch grafische Schaltflächen mit CSS erstellen können, wird die Verwendung von type="image" nicht mehr empfohlen.

Fügen Sie schließlich keine Zeitüberschreitungen hinzu. Geben Sie Nutzern so viel Zeit wie nötig, um ein Formular einzureichen. Zeitüberschreitungen führen zu Datenverlust und frustrieren Ihre Nutzer. W3C-Richtlinien für das Zeitlimit für Formulare

Nutzern das Einreichen von Dateien erlauben

Mit <input type="file"> können Sie Nutzern ermöglichen, Dateien hochzuladen und einzureichen.

<label for="file">Choose file to upload</label>
<input type="file" id="file" name="file" multiple>

Fügen Sie Ihrem Formular zuerst ein <input>-Element mit type="file" hinzu. Fügen Sie das Attribut multiple hinzu, wenn Nutzer mehrere Dateien hochladen können sollen.

Damit Nutzer Dateien hochladen können, müssen Sie noch eine weitere Änderung vornehmen: Legen Sie das Attribut enctype für Ihr Formular fest. Der Standardwert ist application/x-www-form-urlencoded.

<form method="post" enctype="multipart/form-data">
...
</form>

Ändern Sie den Wert in multipart/form-data, damit Dateien eingereicht werden können. Ohne diese Codierung können Dateien nicht mit einer POST-Anfrage gesendet werden.

Wissen testen

Ihr Wissen zum Formularelement testen

Welchen Wert für enctype benötige ich, um Dateien einzureichen?

multipart/form-data
🎉
multipart/form-files
Versuch es noch einmal.
form-data
Versuch es noch einmal.
form-files
Versuch es noch einmal.

Ist es möglich, Nutzerdaten ohne <form> zu senden?

Nein
Versuch es noch einmal.
Ja, mit JavaScript.
🎉
Ja, mit Flash.
Versuch es noch einmal.
Ja, mit HTML5.
Versuch es noch einmal.

Wie kann ich ein <form> einreichen?

Klicken Sie auf ein <button>.
Versuch es noch einmal.
Drücken Sie Enter.
Versuch es noch einmal.
Klicken Sie auf ein <input type="image">.
Versuch es noch einmal.
Alle Antworten sind richtig.
🎉

Ressourcen