Das Formularelement im Detail

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

Sollte ich ein <form>-Element verwenden?

Browser Support

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

Source

Sie müssen Formularsteuerelemente nicht immer in einem <form>-Element platzieren. Sie können beispielsweise ein <select>-Element verwenden, über das Nutzer eine Produktkategorie auswählen können. Hier ist kein <form>-Element erforderlich, da du keine Daten in deinem Backend speicherst oder verarbeitest.

Wenn Sie jedoch Daten von Nutzern speichern oder verarbeiten, sollten Sie in den meisten Fällen das Element <form> verwenden. Wie Sie in diesem Modul erfahren, bietet die Verwendung eines <form> viele integrierte Funktionen von Browsern, die Sie sonst selbst erstellen müssten. Ein <form> bietet außerdem standardmäßig viele Bedienungshilfen. Wenn Sie ein Seitenaktualisieren vermeiden möchten, wenn ein Nutzer ein Formular einreicht, können Sie das <form>-Element weiterhin verwenden, es aber mit JavaScript ergänzen.

Wie funktioniert ein <form>?

Sie haben gelernt, dass eine <form> der beste Weg ist, mit Nutzerdaten umzugehen. 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 die Formulareinreichung?

Wenn Sie eine <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 gesendeten Daten können mit JavaScript im Frontend mit einer GET-Anfrage oder mit Code im Backend mit einer GET- oder POST-Anfrage verarbeitet werden. Weitere Informationen zu Anfragetypen und der Übertragung von Formulardaten

Wenn das Formular gesendet wird, stellt der Browser eine Anfrage an die URL, die dem Wert des Attributs action entspricht. 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 ruft der Browser zusätzliche Attribute des <form>-Elements ab, um beispielsweise zu entscheiden, ob das Formular validiert (novalidate), die automatische Vervollständigung verwendet (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 und die URL, unter der die Daten verarbeitet werden, sollte /color sein.

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 die Schaltfläche Senden klicken oder während der Verwendung eines Formularkontrollelements die Taste Enter drücken.

Es gibt verschiedene Möglichkeiten, eine Schaltfläche Senden hinzuzufügen. Eine Möglichkeit besteht darin, ein <button>-Element in Ihrem Formular zu verwenden. Solange Sie type="button" nicht verwenden, funktioniert es als Schaltfläche Senden. Alternativ können Sie auch <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 aber grafische Schaltflächen mit CSS erstellen können, wird die Verwendung von type="image" nicht mehr empfohlen.

Nutzern das Einreichen von Dateien ermöglichen

Mit <input type="file"> können Sie Nutzern ermöglichen, bei Bedarf 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, ist noch eine weitere Änderung erforderlich: Legen Sie das Attribut enctype in Ihrem 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 über das Formularelement testen

Welcher Wert für enctype ist erforderlich, 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>

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 eine <form> einreichen?

Klicken Sie auf ein <button>.
Versuch es noch einmal.
Drücken Sie Enter.
Versuch es noch einmal.
Klicken Sie auf einen <input type="image">.
Versuch es noch einmal.
Das alles stimmt.
🎉

Ressourcen