HTML-Formulare existieren seit den frühen 1990er Jahren. Anfangs waren sie schlicht, mit nur Textfeldern, Buttons und Checkboxen. Mit HTML4 kamen neue Input-Typen, die Validierung erleichterten. HTML5 führte spezialisierte Typen (email, date, range) und Elemente wie <datalist> oder <output> ein, um nutzerfreundliche, interaktive Formulare ohne externe Skripte zu ermöglichen. Heute sind Formulare zentral für Web-Interaktionen.
HTML-Formulare ermöglichen die Interaktion zwischen Benutzer:innen und Webanwendungen, z. B. Eingabe von Text, Auswahl von Optionen oder Datei-Uploads. Sie bestehen aus Formular-Elementen wie Textfeldern, Buttons, Checkboxen und Dropdowns. Formulare senden Daten über HTTP (GET, POST oder dialog) an Server oder JavaScript‑Funktionen.
Diese Übersicht ist wie folgt gegliedert:
- Grundstruktur eines Formulars
- HTTP-Methoden im Formular
- Wichtige Input-Typen
- Weitere Formular-Elemente
1. Grundstruktur eines Formulars
<code><form action="/submit" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="Absenden">
</form></code>Attribute des <form>-Tags:
| Attribut | Beschreibung |
|---|---|
action | URL, an die die Formulardaten gesendet werden |
method | HTTP-Methode (GET, POST, dialog) |
enctype | Codierung der Daten (z. B. multipart/form-data für Datei-Upload) |
autocomplete | Steuert die automatische Vervollständigung von Eingabefeldern (on/off) |
novalidate | Deaktiviert die HTML5-Formularvalidierung |
2. HTTP-Methoden im Formular
| Methode | Beschreibung |
|---|---|
GET | Formulardaten werden an die URL angehängt (z. B. ?name=Max&email=max@example.com) |
POST | Formulardaten werden im HTTP-Body gesendet; sicherer für vertrauliche Daten |
dialog | Speziell für Formulare innerhalb von <dialog>-Elementen; schließt das Dialogfenster ohne Daten zu senden oder zu löschen |
3. Wichtige Input-Typen
| Typ | Beschreibung / Verwendung |
|---|---|
text | Einfaches einzeiliges Textfeld |
password | Textfeld, Eingabe wird verdeckt |
email | E-Mail-Adresse, mit Validierung |
number | Zahlenfeld, optional mit min, max, step |
checkbox | Auswahlfeld, Mehrfachauswahl möglich |
radio | Auswahlfeld, nur eine Option wählbar |
file | Datei-Upload |
date, time, datetime-local | Datums- oder Uhrzeitauswahl |
range | Schieberegler |
submit | Absende-Button |
reset | Setzt alle Formularwerte zurück |
button | Beliebiger Button, meist für JavaScript-Events |
4. Weitere Formular-Elemente
| Element | Beschreibung |
|---|---|
<textarea> | Mehrzeiliges Textfeld |
<select> | Dropdown-Menü, <option> als Auswahlmöglichkeiten |
<label> | Beschriftung für Eingabefelder, verbessert Accessibility |
<fieldset> | Gruppiert verwandte Eingaben visuell und semantisch |
<legend> | Beschriftung für ein <fieldset> |
<datalist> | Vordefinierte Auswahlmöglichkeiten für Input-Felder |
<output> | Anzeige von berechneten Werten |
Blog-Beitrag: JS-Formulare