Das Formularelement im Detail

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

Sollte ein <form>-Element verwendet werden?

Sie müssen Formularsteuerelemente nicht immer in ein <form>-Element einfügen. Sie können beispielsweise ein <select>-Element bereitstellen, mit dem 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 jedoch Nutzerdaten speichern oder verarbeiten, sollten Sie das Element <form> verwenden. Wie Sie in diesem Modul erfahren werden, erhalten Sie mit einem <form> viele integrierte Funktionen aus Browsern, die Sie sonst selbst erstellen müssten. Ein <form> verfügt außerdem standardmäßig über viele integrierte Bedienungshilfen. Wenn Sie verhindern möchten, dass die Seite beim Senden eines Formulars neu geladen wird, können Sie das Element <form> weiterhin verwenden, aber mit JavaScript:

Wie funktioniert ein <form>?

Sie haben gelernt, dass eine <form> die beste Möglichkeit ist, mit Nutzerdaten umzugehen. 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 Einreichen von Formularen?

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

Wie können Sie auf die Formulardaten zugreifen und sie verarbeiten? Die eingereichten Daten können von JavaScript im Front-End mit einer GET-Anfrage verarbeitet werden. oder mithilfe einer GET- oder POST-Anfrage im Back-End Code generieren. Weitere Informationen über Anfragetypen und Übertragung 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 enthält. In diesem Fall wird die dort definierte URL verwendet.

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

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

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

Sicherstellen, 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 Enter drücken, während Sie ein Steuerelement verwenden.

Sie können die Schaltfläche Senden auf verschiedene Arten hinzufügen. Eine Möglichkeit besteht darin, ein <button>-Element in Ihrem Formular zu verwenden. Solange Sie nicht type="button" verwenden, funktioniert sie als Senden-Schaltfläche. Eine weitere Möglichkeit ist die Verwendung von <input type="submit" value="Submit">.

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

Nutzern erlauben, Dateien einzureichen

Verwenden Sie <input type="file">, um anderen Nutzern das Hochladen und Einreichen von Dateien zu ermöglichen.

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

Eine weitere Änderung ist erforderlich, damit Nutzer Dateien hochladen können. 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, ändern Sie sie zu multipart/form-data. Ohne diese Codierung können Dateien nicht mit einer POST-Anfrage gesendet werden.

Wissen testen

Testen Sie Ihr Wissen über Formularelemente

Ressourcen

• HTML-Element des Formulars
• Best Practices für die Schaltfläche „Senden“