HTML Formulare

6 Kernkonzepte
Die wichtigsten HTML-Formularelemente: form · input · select · textarea · button · Validation HTML-Formulare sind die Grundlage für die Benutzerinteraktion im Web. Sie ermöglichen die Erfassung und Übermittlung von Benutzerdaten an den Server.

form – Das Formular-Container-Element

<form> · action · method · enctype
<form action="/send" method="POST"> <!-- Formularelemente --> </form>

Das form-Element dient als Container für alle Formularelemente. Es definiert, wohin die Daten gesendet werden (action) und mit welcher Methode (method).

Wichtige form-Attribute

Attribut Beschreibung
action Ziel-URL für die Formulardaten
method HTTP-Methode (GET oder POST)
enctype Codierung der Daten (z.B. multipart/form-data für Datei-Uploads)
target Ziel-Fenster für die Antwort (z.B. _blank)
autocomplete Autovervollständigung aktivieren/deaktivieren
novalidate Deaktiviert die browserinterne Validierung
Beispiele
<!-- Einfaches Formular -->
<form action="/register" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Senden">
</form>
<!-- File-Upload mit enctype -->
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="datei">
<input type="submit">
</form>
Tipp: Verwenden Sie method="POST" für Daten, die den Server verändern (z.B. Registrierung). Verwenden Sie method="GET" für Suchformulare oder Filter.

input – Die vielseitigen Eingabefelder

type · name · value · placeholder
<input type="text" name="vorname" placeholder="Vorname"> <input type="email" name="email" required> <input type="checkbox" name="accept" value="ja">

Das input-Element ist das vielseitigste Formularelement. Der type-Attribut bestimmt die Art der Eingabe – von Text über Zahlen bis zu Datumsauswahl.

Die wichtigsten input-Typen

Typ Beschreibung Beispiel
text Einzeiliger Text <input type="text">
password Passwort (verdeckt) <input type="password">
email E-Mail-Adresse (Validierung) <input type="email">
number Numerische Eingabe <input type="number">
tel Telefonnummer <input type="tel">
url URL (Validierung) <input type="url">
date Datum (Kalenderauswahl) <input type="date">
time Uhrzeit <input type="time">
datetime-local Datum + Uhrzeit <input type="datetime-local">
checkbox Kontrollkästchen <input type="checkbox">
radio Auswahlknopf (Gruppe) <input type="radio">
file Datei-Upload <input type="file">
range Schieberegler <input type="range">
color Farbauswahl <input type="color">
hidden Verstecktes Feld <input type="hidden">
submit Absende-Button <input type="submit">
reset Zurücksetzen-Button <input type="reset">
Beispiele
<!-- Text-Feld -->
<input type="text" name="username" placeholder="Benutzername" maxlength="20">
<!-- E-Mail mit Validierung -->
<input type="email" name="email" required placeholder="name@domain.de">
<!-- Zahl mit min/max -->
<input type="number" name="alter" min="18" max="99">
<!-- Checkbox -->
<label>
<input type="checkbox" name="newsletter" value="ja"> Newsletter abonnieren
</label>
<!-- Radio-Buttons (gleicher name = Gruppe) -->
<input type="radio" name="geschlecht" value="m" id="m">
<label for="m">Männlich</label>
<input type="radio" name="geschlecht" value="w" id="w">
<label for="w">Weiblich</label>
Tipp: Verwenden Sie die modernen input-Typen wie email, tel, number – sie bieten integrierte Validierung und auf mobilen Geräten optimierte Tastaturen.

select & option – Dropdown-Listen

<select> · <option> · <optgroup>
<select name="land" required> <option value="de">Deutschland</option> <option value="at">Österreich</option> <option value="ch">Schweiz</option> </select>

select erstellt eine Dropdown-Liste. Die Auswahloptionen werden mit option-Elementen definiert. optgroup gruppiert Optionen.

Beispiele
<!-- Einfache Auswahl -->
<select name="farbe">
<option value="rot">Rot</option>
<option value="grün" selected>Grün</option>
<option value="blau">Blau</option>
</select>
<!-- Mit optgroup (Gruppierung) -->
<select name="essen">
<optgroup label="Vorspeisen">
<option>Salat</option>
<option>Suppe</option>
</optgroup>
<optgroup label="Hauptgerichte">
<option>Pizza</option>
<option>Pasta</option>
</optgroup>
</select>
<!-- Mehrfachauswahl -->
<select name="interessen" multiple size="3">
<option>Sport</option>
<option>Musik</option>
<option>Lesen</option>
</select>
Tipp: Mit multiple können Sie mehrere Optionen auswählen (Strg+Klick). size legt die Anzahl der sichtbaren Optionen fest.

textarea – Mehrzeilige Texteingabe

<textarea> · rows · cols · wrap
<textarea name="nachricht" rows="5" cols="40" placeholder="Ihre Nachricht..."> </textarea>

textarea ermöglicht mehrzeilige Texteingaben. rows und cols steuern die Größe, wrap das Zeilenumbruch-Verhalten.

Beispiele
<!-- Einfaches Textarea -->
<textarea name="beschreibung" rows="6" cols="50" placeholder="Beschreibung...">
</textarea>
<!-- Mit Vorausgefülltem Inhalt -->
<textarea name="kommentar" rows="4" cols="30">
Standardtext für den Kommentar...
</textarea>
<!-- Maximal Länge begrenzen -->
<textarea name="nachricht" maxlength="500" required>
</textarea>
Tipp: Mit maxlength können Sie die maximale Zeichenzahl begrenzen. Mit CSS können Sie die Größe flexibler steuern (width, height).

button – Interaktive Buttons

<button> · type · <input type="button">
<button type="submit">Absenden</button> <button type="reset">Zurücksetzen</button> <button type="button" onclick="alert('Hallo')">Klick mich</button>

Das button-Element erzeugt klickbare Schaltflächen. Es ist flexibler als <input type="submit">, da es HTML-Inhalt enthalten kann.

button-Typen

Typ Beschreibung
submit Sendet das Formular ab (Standard)
reset Setzt das Formular auf die Standardwerte zurück
button Standard-Button ohne automatische Aktion (für JavaScript)
Beispiele
<!-- Submit-Button -->
<button type="submit">
<i class="fas fa-paper-plane"></i> Absenden
</button>
<!-- Reset-Button -->
<button type="reset">Zurücksetzen</button>
<!-- JavaScript-Button -->
<button type="button" onclick="console.log('Geklickt!')">
<img src="icon.svg" alt="Icon"> Klick
</button>
<!-- Input-Alternative -->
<input type="submit" value="Absenden">
<input type="button" value="Klick mich" onclick="alert('Hallo')">
Tipp: Verwenden Sie <button> für flexible Gestaltung mit HTML-Inhalt (Icons, Bilder). Verwenden Sie <input type="submit"> für einfache Text-Buttons.

Validierung – required, pattern, min, max

required · pattern · min · max · step
<input type="text" required minlength="3" maxlength="20"> <input type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"> <input type="number" min="18" max="99" step="1">

HTML5-Validierung ermöglicht clientseitige Eingabevalidierung ohne JavaScript. Die Attribute required, pattern, min, max und step steuern die Validierung.

Wichtige Validierungs-Attribute

Attribut Beschreibung Beispiel
required Feld muss ausgefüllt sein <input required>
minlength Minimale Zeichenzahl minlength="3"
maxlength Maximale Zeichenzahl maxlength="20"
pattern Regulärer Ausdruck (Regex) pattern="[A-Za-z]+"
min Minimaler Wert (number, date) min="18"
max Maximaler Wert (number, date) max="99"
step Schrittweite (number) step="5"
type Built-in Validierung (email, url, etc.) type="email"
Beispiele
<!-- required + minlength -->
<input type="text" name="name" required minlength="2" maxlength="50">
<!-- pattern für Postleitzahl (5 Ziffern) -->
<input type="text" name="plz" pattern="[0-9]{5}" title="Bitte 5-stellige Postleitzahl">
<!-- Zahlen mit min/max -->
<input type="number" name="alter" min="18" max="99" step="1">
<!-- Datum mit min/max -->
<input type="date" name="geburtstag" min="1900-01-01" max="2010-12-31">
<!-- type email mit pattern (benutzerdefiniert) -->
<input type="email" name="email" required pattern=".+@.+\.(de|com|org)">
Tipp: Die HTML5-Validierung ist eine erste Sicherheitsschicht. Sie ersetzen keine serverseitige Validierung! Verwenden Sie title für hilfreiche Fehlermeldungen.

HTML Formulare im Überblick

<form> Formular-Container
action, method, enctype
<input> Eingabefelder
text, email, number, checkbox
<select> Dropdown-Listen
option, optgroup
<textarea> Mehrzeilige Eingabe
rows, cols
<button> Schaltflächen
submit, reset, button
required Validierung
pattern, min, max

Quick Summary

form
Container
input
Eingabefelder
select
Dropdown
textarea
Mehrzeilig
button
Schaltflächen
required
Validierung
<form action="/send" method="POST"> · <input type="text" required> · <button type="submit">Senden</button>
Alle Cheatsheets Impressum Datenschutz
Zum Drucken
© ITGrundlagen.com · HTML Formulare Cheatsheet · Befehlsübersicht · Schnellreferenz