HTML – Formulare

Formulare dienen der Eingabe, Übermittlung und Verarbeitung von Benutzerdaten.

Sie sind zentrale Bestandteile vieler Webanwendungen:

Login
Kontaktformulare
Suche
Konfigurationen

Grundstruktur eines Formulars

<form action="/ziel" method="post">
  <!-- Formularelemente -->
</form>

Attribut	Bedeutung
action	Ziel-URL für die Daten
method	Übertragungsmethode (GET / POST)

—

Formularelemente

Element	Zweck
`<input>`	Eingabefeld
`<label>`	Beschriftung
`<textarea>`	Mehrzeiliger Text
`<select>`	Auswahlliste
`<option>`	Eintrag in Liste
`<button>`	Aktion

—

Input-Typen

Typ	Verwendung
text	Text
password	Passwort
email	E-Mail
number	Zahl
checkbox	Auswahl
radio	Einzelauswahl
submit	Absenden

—

Beispiel: Einfaches Formular

<form action="/login" method="post">
  <label for="user">Benutzername</label>
  <input type="text" id="user" name="user">

  <label for="pass">Passwort</label>
  <input type="password" id="pass" name="pass">

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

—

label und for

Jedes Eingabefeld sollte mit einem `<label>` verbunden sein.

Vorteile:

bessere Bedienbarkeit
Barrierefreiheit
größere Klickfläche

<label for="email">E-Mail</label>
<input type="email" id="email" name="email">

—

Pflichtfelder und Validierung

<input type="email" required>
<input type="number" min="1" max="10">

Attribut	Wirkung
required	Pflichtfeld
minlength	Mindestlänge
maxlength	Maximallänge
min / max	Zahlenbereich

—

Gruppierung mit fieldset

<fieldset>
  <legend>Persönliche Daten</legend>

  <label>Name</label>
  <input type="text">
</fieldset>

—

Typische Fehler

fehlende `name`-Attribute
kein `label`
Formulare nur optisch korrekt
Validierung nur clientseitig

—

Sicherheit (Grundlagen)

HTML validiert nur oberflächlich
Serverseitige Prüfung ist Pflicht
Passwörter niemals im Klartext speichern

—

Merksatz

Formulare sind Schnittstellen –

sie müssen klar, robust und sicher sein.