Das Formularelement im Detail

In einem vorherigen Modul haben Sie erfahren, 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?

Unterstützte Browser

  • 1
  • 12
  • 1
  • 1

Quelle

Sie müssen Formularsteuerelemente nicht immer in ein <form>-Element einfügen. Du kannst beispielsweise ein <select>-Element angeben, über das Nutzer eine Produktkategorie auswählen können. Sie benötigen hier kein <form>-Element, da Sie keine Daten auf Ihrem Back-End speichern oder verarbeiten.

Wenn Sie Daten von Nutzern speichern oder verarbeiten, sollten Sie jedoch in den meisten Fällen das Element <form> verwenden. Wie Sie in diesem Modul lernen werden, bietet Ihnen die Verwendung von <form> viele integrierte Funktionen von Browsern, die Sie sonst selbst erstellen müssten. Ein <form> hat auch standardmäßig viele integrierte Bedienungshilfen. Wenn du verhindern möchtest, dass die Seite neu geladen wird, wenn ein Nutzer ein Formular einreicht, kannst du weiterhin das <form>-Element verwenden, aber es mit JavaScript optimieren.

Wie funktioniert ein <form>?

Sie haben gelernt, dass ein <form> die beste Möglichkeit ist, um Nutzerdaten zu verarbeiten. Sie fragen sich jetzt vielleicht, wie ein Formular funktioniert.

<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 Senden von Formularen?

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

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

Wenn das Formular gesendet wird, sendet 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.

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

Versuchen Sie, ein Formular zu erstellen, über das die Nutzer ihre Lieblingsfarbe einreichen können. Die Daten sollten als POST-Anfrage gesendet werden und die URL, unter der die Daten verarbeitet werden, sollte /color lauten.

Formular anzeigen

Eine mögliche Lösung ist dieses Formular:

<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>

Dafür sorgen, dass Nutzer das Formular senden können

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

Es gibt verschiedene Möglichkeiten, die Schaltfläche Senden hinzuzufügen. Eine Möglichkeit besteht darin, ein <button>-Element im Formular zu verwenden. Solange Sie type="button" nicht verwenden, funktioniert die Schaltfläche Senden. Alternativ können Sie <input type="submit" value="Submit"> verwenden.

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

Nutzern erlauben, Dateien einzureichen

Verwenden Sie <input type="file">, damit Nutzer bei Bedarf Dateien hochladen und einreichen können.

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

Fügen Sie dem 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 Änderung erforderlich. Legen Sie dazu das Attribut enctype in Ihrem Formular fest. Der Standardwert ist application/x-www-form-urlencoded.

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

Damit Dateien eingereicht werden können, ändere die Angabe zu „multipart/form-data“. Ohne diese Codierung können Dateien nicht mit einer POST-Anfrage gesendet werden.

Wissen testen

Testen Sie Ihr Wissen über das Formularelement

Welcher Wert muss für enctype eingegeben werden, 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.

Können Nutzerdaten auch ohne <form> gesendet werden?

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

Wie können Sie eine <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.
Das alles stimmt.
🎉

Ressourcen