Dokumentation
HTML

HTML Formulare

Formularelemente, Labels, Eingabetypen, Validierung und Barrierefreiheit.

HTML Formulare

Formularelemente, Labels, Eingabetypen, Validierung und Barrierefreiheit. Diese Seite ist als Lernunterlage, Nachschlagewerk und Prüfungsvorbereitung für die CAP-Ausbildung gedacht.

Lernziele

  • Formulare mit form, label, input, textarea, select und button aufbauen
  • method, action, required und passende Eingabetypen verwenden
  • barrierearme Formularstrukturen schreiben

Erklärung

Formulare sammeln Eingaben. Ein gutes Formular verbindet jedes Eingabefeld mit einem sichtbaren Label. Das name-Attribut ist wichtig, damit Daten beim Absenden eindeutig benannt sind.

HTML bietet eingebaute Validierung wie required, type="email" oder minlength. Diese hilft Benutzern sofort, ersetzt aber keine serverseitige Prüfung.

Beispiele

<form action="/kontakt" method="post">
  <label for="email">E-Mail</label>
  <input id="email" name="email" type="email" required>

  <label for="message">Nachricht</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">Senden</button>
</form>

Das Label ist über for mit der ID des Eingabefelds verbunden.

<label>
  <input type="checkbox" name="privacy" required>
  Ich akzeptiere die Datenschutzbedingungen.
</label>

Bei Checkboxen kann das Eingabefeld direkt im Label stehen.

Typische Fehler

  • Nur Placeholder verwenden und sichtbare Labels weglassen.
  • Buttons ohne type schreiben und unbeabsichtigt Formulare absenden.
  • Clientseitige Validierung als Sicherheitsmaßnahme missverstehen.

Best Practices

  • Jedes Feld braucht ein Label.
  • Nutze passende Typen wie email, number, date oder password.
  • Zeige Fehlermeldungen klar und in der Nähe des betroffenen Feldes an.

Kleine Übung

Baue ein Kontaktformular mit Name, E-Mail, Betreff-Auswahl, Nachricht und Datenschutz-Checkbox. Ergänze sinnvolle Pflichtfelder.

Zusammenfassung

HTML ist dann gut, wenn die Bedeutung der Inhalte klar erkennbar ist. Saubere Struktur, passende Elemente und barrierearme Grundregeln machen Seiten robuster, verständlicher und leichter prüfbar.

Weiterführende Seiten

Zuletzt aktualisiert: 7. Juni 2026

Einführung

Zweck, Rolle und Grundidee von HTML als Auszeichnungssprache.

Grundstruktur

DOCTYPE, html, head, body, title, meta charset, viewport und lang-Attribut.