HTML-Formulare
HTML-Formulare: das form-Element, action und method (GET vs. POST), Labels, Inputs, textarea, select, Schaltflächen und HTML5-Validierung.
Ein HTML-Formular erfasst Benutzereingaben und sendet sie zur Verarbeitung an einen Server. Ein Formular ist ein Container — das <form>-Element — das ein oder mehrere Steuerelemente wie Textfelder, Kontrollkästchen, Optionsfelder, Dropdown-Listen und Senden-Schaltflächen enthält. Diese Seite behandelt das <form>-Element selbst, die darin enthaltenen Steuerelemente, wie Daten gesendet werden (GET vs. POST) und wie Eingaben beschriftet und validiert werden.
Das <form>-Element
Jedes Formular beginnt mit dem <form>-Tag. Die Steuerelemente, die ein Benutzer ausfüllt, befinden sich zwischen dem öffnenden <form>- und dem schließenden </form>-Tag. Zwei Attribute übernehmen den Großteil der Arbeit:
action— die URL, die die Formulardaten empfängt, wenn der Benutzer das Formular absendet.method— die HTTP-Methode, mit der die Daten gesendet werden: entwederGEToderPOST.
<form action="/subscribe" method="POST">
<!-- form controls go here -->
<button type="submit">Subscribe</button>
</form>Wenn Sie action weglassen, sendet das Formular die Daten zurück an die URL der aktuellen Seite. Wenn Sie method weglassen, verwendet der Browser standardmäßig GET.
Steuerelemente beschriften
Jedes Eingabefeld sollte ein <label> haben. Verbinden Sie das Label mit seinem Steuerelement, indem Sie dem Steuerelement eine id geben und das for-Attribut des Labels auf dieselbe id verweisen lassen:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Text Input Example</h2>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" />
<label for="surname">Surname:</label>
<input type="text" id="surname" name="surname" />
</form>
</body>
</html>Verwenden Sie ein echtes <label> anstelle von einfachem Text wie Name:<br />. Ein verknüpftes Label wird von Screenreadern vorgelesen und vergrößert den anklickbaren Bereich, sodass das Antippen des Labels den Fokus auf das Feld setzt. Mehr dazu im Kapitel HTML <label>-Tag.
Das HTML-<input>-Element
Das <input>-Element ist das häufigste Formularelement. Sein type-Attribut bestimmt Aussehen und Verhalten — text, email, password, number, checkbox, radio, file, submit und viele mehr.
Sehen wir uns einige der Input-Typen an.
Text-Eingabe
<input type="text"> erstellt ein einzeiliges Textfeld. Das name-Attribut ist der Schlüssel, der zusammen mit dem Wert des Felds an den Server gesendet wird.
Beispiel für die Text-Eingabe:
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" />
</form>Optionsfeld-Eingabe
<input type="radio"> ermöglicht es dem Benutzer, genau eine Option aus einer Gruppe auszuwählen. Optionsfelder teilen sich denselben name, sodass die Auswahl eines Felds die anderen in dieser Gruppe aufhebt.
Beispiel für die Optionsfeld-Eingabe:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Radio Button Example</h2>
<form>
<input type="radio" id="football" name="game" value="football" checked />
<label for="football">Football</label>
<input type="radio" id="basketball" name="game" value="basketball" />
<label for="basketball">Basketball</label>
</form>
</body>
</html>Senden-Eingabe
<input type="submit"> (oder eine <button type="submit">) sendet die Formulardaten an den Formular-Handler — die Server-URL, die im action-Attribut des Formulars angegeben ist.
Beispiel für die Senden-Eingabe:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>HTML Form Example</h2>
<form action="/form/submit" method="POST">
<label for="firstname">Name:</label>
<input type="text" id="firstname" name="firstname" value="Tom" />
<label for="lastname">Surname:</label>
<input type="text" id="lastname" name="lastname" value="Brown" />
<label for="age">Age:</label>
<input type="number" id="age" name="age" value="21" />
<input type="submit" value="Submit" />
</form>
<p>Click the Submit button to send the form data to the action page.</p>
</body>
</html>Weitere Formularsteuerelemente
Inputs sind nicht die einzigen Steuerelemente. Diese Elemente bieten mehrzeiligen Text, Dropdowns, benutzerdefinierte Schaltflächen und eine Möglichkeit, zusammengehörige Felder zu gruppieren.
Mehrzeiliger Text mit <textarea>
Verwenden Sie <textarea> für längeren Text, wie Kommentare oder Nachrichten. Im Gegensatz zu <input> hat es separate öffnende und schließende Tags, und rows/cols legen die sichtbare Größe fest.
<form>
<label for="message">Your message:</label>
<textarea id="message" name="message" rows="4" cols="40"></textarea>
</form>Dropdown-Listen mit <select>
Ein <select>-Element erstellt eine Dropdown-Liste. Jede Auswahl ist eine <option>; der value wird beim Absenden übermittelt, und selected legt den Standardwert fest.
<form>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="us">United States</option>
<option value="uk" selected>United Kingdom</option>
<option value="ca">Canada</option>
</select>
</form>Das <button>-Element
Das <button>-Element ist flexibler als <input type="submit">, da es HTML (Text, Icons) enthalten kann. Setzen Sie immer seinen type: submit sendet das Formular, reset setzt es zurück, und button tut von sich aus nichts (verwenden Sie es mit JavaScript).
<form>
<button type="submit">Send</button>
<button type="reset">Clear</button>
</form>Gruppierung mit <fieldset> und <legend>
Umschließen Sie zusammengehörige Steuerelemente mit einem <fieldset> und beschreiben Sie die Gruppe mit einer <legend>. Dies zeichnet einen beschrifteten Rahmen und hilft Screenreader-Benutzern zu verstehen, wie die Felder zusammenhängen — nützlich beispielsweise für einen Adressblock oder eine Gruppe von Optionsfeldern.
<form>
<fieldset>
<legend>Contact details</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email" />
<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" />
</fieldset>
</form>Das action-Attribut
Das action-Attribut gibt die URL an, an die die Formulardaten beim Absenden des Formulars gesendet werden. Wenn der Benutzer auf die Senden-Schaltfläche klickt, bündelt der Browser die Werte der Steuerelemente und sendet sie an diese URL.
<form action="/form/submit">Das target-Attribut
Das target-Attribut legt fest, wo das Formularergebnis geöffnet wird — in einem neuen Browser-Tab, einem Frame oder dem aktuellen Fenster.
_self(Standard) öffnet das Ergebnis im aktuellen Fenster._blanköffnet das Ergebnis in einem neuen Browser-Tab.
<form action="/form/submit" target="_blank">Das method-Attribut
Das method-Attribut legt die HTTP-Methode — GET oder POST — fest, mit der die Formulardaten gesendet werden. Die Wahl beeinflusst, wohin die Daten gehen und welche Absicht die Anfrage signalisiert.
Beispiel der GET-Methode:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the GET Method</h2>
<form action="/form/submit" method="GET">
<label for="g-name">Name:</label>
<input type="text" id="g-name" name="name" value="Tom" />
<label for="g-surname">Surname:</label>
<input type="text" id="g-surname" name="surname" value="Brown" />
<label for="g-age">Age:</label>
<input type="number" id="g-age" name="age" value="21" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Nach dem Absenden erscheinen die Daten im Query-String der URL, z. B. /form/submit?name=Tom&surname=Brown&age=21.
Beispiel der POST-Methode:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The method Attribute With the Post Method</h2>
<form action="/form/submit" method="POST">
<label for="p-name">Name:</label>
<input type="text" id="p-name" name="name" value="Tom" />
<label for="p-surname">Surname:</label>
<input type="text" id="p-surname" name="surname" value="Brown" />
<label for="p-age">Age:</label>
<input type="number" id="p-age" name="age" value="21" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Bei POST werden die Daten im Anfrage-Body übertragen, sodass sie nicht in der URL erscheinen.
GET vs. POST
Die beiden Methoden senden Daten auf unterschiedliche Weise und signalisieren dem Server unterschiedliche Absichten.
GET fügt die Formulardaten als Query-String an die URL an:
- Die Daten sind in der Adressleiste sichtbar und können als Lesezeichen gespeichert oder geteilt werden.
- URLs haben eine Längenbeschränkung (häufig etwa 2048 Zeichen), daher ist GET für große Datenmengen nicht geeignet.
- GET ist idempotent — das Wiederholen derselben Anfrage sollte nichts auf dem Server ändern. Verwenden Sie es für Suchen und Filter, die nur Daten lesen.
Verwenden Sie GET nicht zum Senden von Passwörtern oder anderen sensiblen Daten — diese werden in der URL, im Browser-Verlauf und in Server-Logs sichtbar.
POST sendet die Daten im Anfrage-Body:
- Die Daten werden nicht in der URL angezeigt, und es gibt keine praktische Größenbeschränkung, sodass POST große Datenmengen und Datei-Uploads verarbeiten kann.
- POST-Übermittlungen können nicht als Lesezeichen gespeichert werden.
- POST ist für Anfragen gedacht, die den Server-Status ändern (ein Konto erstellen, einen Kommentar posten, eine Bestellung aufgeben).
Faustregel: Verwenden Sie GET zum Lesen oder Nachschlagen und POST zum Erstellen oder Ändern.
Benutzereingaben validieren
HTML5 kann Eingaben im Browser prüfen, bevor das Formular abgesendet wird — ohne JavaScript. Fügen Sie diese Attribute zu Ihren Steuerelementen hinzu:
| Attribut | Funktion |
|---|---|
required | Das Feld muss ausgefüllt sein, bevor das Formular abgesendet werden kann. |
minlength / maxlength | Minimale / maximale Zeichenanzahl für Textfelder. |
min / max | Kleinster / größter zulässiger Wert für Zahlen, Bereiche und Datumsangaben. |
pattern | Ein regulärer Ausdruck, dem der Wert entsprechen muss. |
type | Einige Typen validieren das Format automatisch: email, url, number, tel. |
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Form Validation Example</h2>
<form action="/form/submit" method="POST">
<label for="user">Username (3–12 letters):</label>
<input type="text" id="user" name="user"
required minlength="3" maxlength="12" pattern="[A-Za-z]+" />
<label for="mail">Email:</label>
<input type="email" id="mail" name="mail" required />
<label for="qty">Quantity (1–10):</label>
<input type="number" id="qty" name="qty" min="1" max="10" />
<input type="submit" value="Submit" />
</form>
</body>
</html>Wenn ein Wert eine Regel nicht erfüllt, blockiert der Browser das Absenden und zeigt eine Meldung an. Um diese eingebaute Prüfung zu deaktivieren, fügen Sie das novalidate-Attribut zum <form>-Element hinzu.
Das enctype-Attribut
Das enctype-Attribut legt fest, wie Formulardaten kodiert werden, wenn sie mit POST gesendet werden:
application/x-www-form-urlencoded— der Standard; Feldnamen und Werte werden URL-kodiert. Geeignet für gewöhnliche Textformulare.multipart/form-data— erforderlich, wenn das Formular einen Datei-Upload enthält (<input type="file">), damit die Binärdaten der Datei korrekt übertragen werden.
<form action="/upload" method="POST" enctype="multipart/form-data">
<label for="photo">Profile photo:</label>
<input type="file" id="photo" name="photo" />
<button type="submit">Upload</button>
</form>Weitere Attribute
Im Folgenden sind weitere nützliche <form>-Attribute aufgeführt:
| Attribut | Beschreibung |
|---|---|
accept-charset | Der Zeichensatz, der im abgesendeten Formular verwendet wird (Standard: der Seitenzeichensatz). |
autocomplete | Ob der Browser das Formular automatisch ausfüllen darf (Standard: on). |
enctype | Wie die übermittelten Daten kodiert werden (Standard: application/x-www-form-urlencoded). |
name | Ein Name zur Identifizierung des Formulars. |
novalidate | Weist den Browser an, das Formular beim Absenden nicht zu validieren. |
Verwandte Kapitel
- HTML
<form>-Tag - HTML
<input>-Tag - HTML
<label>-Tag - HTML
<textarea>-Tag - HTML
<select>-Tag - HTML
<button>-Tag - HTML
<fieldset>-Tag