HTML <form>-Tag
Der <form>-Tag erstellt ein Webformular. Er gruppiert Eingaben und Steuerelemente und sendet sie über die Attribute action und method.
Der <form>-Tag wird verwendet, um HTML-Formulare zur Benutzereingabe in eine Webseite einzufügen. Formulare dienen dazu, die vom Benutzer eingegebenen Daten an den Server zu übertragen. Die Daten werden beim Drücken der Schaltfläche „Absenden" gesendet. Fehlt eine solche Schaltfläche, werden die Informationen beim Drücken der Taste „Enter" gesendet.
Syntax
Der <form>-Tag wird paarweise verwendet. Der Inhalt wird zwischen dem öffnenden (<form>) und dem schließenden (</form>) Tag geschrieben.
Das <form>-Element enthält weitere HTML-Tags, die die Eingabemethode für Daten definieren:
- Der
<input>-Tag definiert ein Benutzereingabefeld. - Der
<textarea>-Tag definiert ein Formularfeld für mehrzeilige Texteingaben. - Der
<button>-Tag wird verwendet, um eine Schaltfläche in ein Formular einzufügen. - Der
<select>-Tag erstellt ein Steuerelement für eine Dropdown-Liste. - Der
<option>-Tag definiert die Einträge in der vom<select>-Tag erstellten Dropdown-Liste. - Der
<optgroup>-Tag gruppiert verwandte Daten in der vom<select>-Tag erstellten Dropdown-Liste. - Der
<fieldset>-Tag gruppiert Elemente im Formular visuell, das durch den<form>-Tag festgelegt wird. - Der
<label>-Tag legt die Textbeschriftung für das<input>-Element fest. - Der
<legend>-Tag definiert die Überschrift für das<fieldset>-Element.
Beispiel des HTML-<form>-Tags:
HTML-<form>-Tag-Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="FirstName" id="fname" value="Mary"/><br /><br />
<label for="lname">Surname</label>
<input type="text" name="LastName" id="lname" value="Thomson"/><br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Ergebnis
Beispiel des HTML-<form>-Tags mit den Tags <input> und <label>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="POST" >
<label for="fname">Name</label>
<input type="text" name="Name" id="fname" value="Mary"/><br /><br />
<label for="number">Phone</label>
<input type="number" name="Phone" id="number"/><br /><br />
<label for="email">Email</label>
<input type="email" placeholder="Enter Email" name="email" required /> <br /><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>Beispiel des HTML-<form>-Tags mit dem <textarea>-Tag:
Das for-Attribut von <label> ist mit der id des <textarea>-Elements verknüpft, sodass ein Klick auf die Beschriftung den Fokus auf das Feld setzt und Screenreader es korrekt ankündigen.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Form example</h1>
<form action="/form/submit" method="POST" >
<label for="message">Message</label><br />
<textarea id="message" name="message" rows="3" cols="30" placeholder="Type some text here"></textarea><br />
<input type="submit" value="Submit"/>
</form>
</body>
</html>GET vs POST: Welche Methode sollte verwendet werden?
Das Attribut method steuert, wie der Browser die Formulardaten sendet. Die beiden Werte verhalten sich grundlegend unterschiedlich:
method="get" hängt die Formulardaten als Abfragezeichenfolge (?name=value&name=value) an die action-URL an. Verwenden Sie es, wenn:
- Die Übermittlung nur Daten liest oder filtert (Suchformulare, Filter).
- Das Ergebnis als Lesezeichen speicherbar oder teilbar sein soll — die Daten sind in der URL sichtbar.
Da die Daten in der URL gespeichert werden, hat GET echte Einschränkungen: Die URL-Länge ist durch Browser und Server begrenzt, die Werte sind in der Adressleiste und in Serverprotokollen sichtbar, und es dürfen niemals Passwörter oder andere sensible Daten übertragen werden.
method="post" sendet die Formulardaten im Rumpf der HTTP-Anfrage, nicht in der URL. Verwenden Sie es, wenn:
- Die Übermittlung etwas auf dem Server verändert (Konto erstellen, Kommentar posten, Zahlung durchführen).
- Große Datenmengen oder Dateien gesendet werden (POST hat kein praktisches Größenlimit und ist für Datei-Uploads erforderlich).
- Die Daten vertraulich sind und nicht in der URL erscheinen sollen.
POST-Übermittlungen sind nicht als Lesezeichen speicherbar, und das Neuladen der Ergebnisseite löst die Anfrage in der Regel erneut aus. Lesen Sie mehr zu HTTP-Methoden.
Dateien hochladen
Um Benutzern das Hochladen von Dateien zu ermöglichen, muss das Formular method="post" zusammen mit enctype="multipart/form-data" verwenden und ein <input type="file"> enthalten. Die Standard-Kodierung application/x-www-form-urlencoded kann keine binären Dateidaten übertragen, daher funktioniert der Upload ohne diese Einstellung nicht.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/upload" method="post" enctype="multipart/form-data">
<label for="avatar">Choose a profile picture:</label><br />
<input type="file" id="avatar" name="avatar" accept="image/png, image/jpeg" /><br /><br />
<input type="submit" value="Upload" />
</form>
</body>
</html>Beachten Sie, dass das Attribut accept (die Liste der erlaubten Dateitypen) zum <input type="file">-Element gehört, nicht zum <form>-Tag.
Validierung mit novalidate überspringen
Standardmäßig überprüfen Browser Einschränkungen wie required, type="email" oder pattern, bevor das Formular abgesendet wird. Das Hinzufügen des boolean-Attributs novalidate zum <form>-Tag weist den Browser an, diese integrierte Validierung zu überspringen und das Formular trotzdem zu senden — nützlich beispielsweise, wenn Sie die Validierung selbst mit JavaScript übernehmen.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<form action="/form/submit" method="post" novalidate>
<label for="email">Email</label>
<input type="email" id="email" name="email" required /><br /><br />
<input type="submit" value="Submit" />
</form>
</body>
</html>Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| accept-charset | character_set | Gibt die Zeichenkodierungen an, die der Server für die gesendeten Formulardaten akzeptiert. |
| action | URL | Die URL, an die die Formulardaten zur Verarbeitung gesendet werden — in der Regel ein API-Endpunkt oder eine Serverroute. Weglassen (oder auf einen leeren string setzen), um an dieselbe Seite zu senden, die das Formular enthält. |
| autocomplete | on / off | Aktiviert oder deaktiviert die automatische Vervollständigung von Formularfeldern durch den Browser. Der Standardwert ist on. |
| enctype | application/x-www-form-urlencoded / multipart/form-data / text/plain | Bestimmt, wie die Formulardaten kodiert werden, bevor sie gesendet werden. Der Standard ist application/x-www-form-urlencoded. Verwenden Sie multipart/form-data, wenn das Formular einen Datei-Upload enthält. Gilt nur, wenn method auf post gesetzt ist. |
| method | get / post | Gibt die HTTP-Methode an, die zum Absenden des Formulars verwendet wird. Der Standard ist get. Siehe GET vs POST weiter unten. |
| name | text | Definiert den Formularnamen, der zum Referenzieren des Formulars in Skripten verwendet wird. |
| novalidate | novalidate | Wenn vorhanden, validiert der Browser die Formularfelder vor dem Absenden nicht. |
| target | _blank / _self / _parent / _top / framename | Bestimmt, wo die nach dem Absenden des Formulars empfangene Antwort angezeigt wird. |
Der <form>-Tag unterstützt auch die globalen Attribute und die Ereignisattribute.