Formulare in HTML

Formulare ermöglichen die Interaktion zwischen Benutzer und Website. Sie sind die Grundlage für Login-Systeme, Suchfelder, Kontaktformulare und Dateneingaben.

1. Grundidee von Formularen

Ein HTML-Formular sammelt Eingaben des Benutzers und sendet sie zur Verarbeitung weiter (z.B. an einen Server).

HTML ist nur für die Struktur zuständig – die eigentliche Verarbeitung erfolgt meist durch Server-Code oder JavaScript.

2. Das <form>-Element

Das <form>-Element umschließt alle Eingabefelder eines Formulars. 
<form action="submit.php" method="post">
  ...
</form>
Ohne Backend werden die Daten zwar gesendet, aber nicht weiterverarbeitet.

3. Texteingaben (<input>)

Das <input>-Element ist das wichtigste Formularelement. Der Typ wird über das Attribut type festgelegt. 
<form>
  <input type="text" name="username">
  <input type="password" name="password">
</form>

4. Labels und Zugänglichkeit

<label>-Elemente beschreiben Eingabefelder und sind wichtig für Barrierefreiheit. 
<label for="email">E-Mail:</label>
<input type="email" id="email" name="email">
Labels verbessern Bedienbarkeit und Screenreader-Unterstützung.

5. Auswahlfelder

HTML bietet verschiedene Elemente zur Auswahl aus mehreren Optionen. 
<input type="radio" name="geschlecht" value="m"> Männlich
<input type="radio" name="geschlecht" value="w"> Weiblich

<select name="land">
  <option value="de">Deutschland</option>
  <option value="at">Österreich</option>
</select>

6. Mehrzeilige Texte (<textarea>)

<textarea> erlaubt längere Texteingaben. 
<textarea name="nachricht" rows="5" cols="40"></textarea>

7. Buttons

Buttons lösen Aktionen im Formular aus. 
<button type="submit">Absenden</button>
<button type="reset">Zurücksetzen</button>

8. Validierung mit HTML

HTML5 bietet einfache Validierung ohne JavaScript. 
<input type="email" required>
<input type="number" min="0" max="100">

9. Typische Fehler

10. Zusammenfassung