[[..:start|zurück]]
====== HTML – Formulare ======

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

Sie sind zentrale Bestandteile vieler Webanwendungen:
  * Login
  * Kontaktformulare
  * Suche
  * Konfigurationen

===== Grundstruktur eines Formulars =====

<code: html linenums>
<form action="/ziel" method="post">
  <!-- Formularelemente -->
</form>
</code>

^ 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 =====


<code : html linenums>
<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>
</code>

---

===== label und for =====

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

Vorteile:
  * bessere Bedienbarkeit
  * Barrierefreiheit
  * größere Klickfläche

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

---

===== Pflichtfelder und Validierung =====

<code html linenums>
<input type="email" required>
<input type="number" min="1" max="10">
</code>

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


---

===== Gruppierung mit fieldset =====

<code html linenums>
<fieldset>
  <legend>Persönliche Daten</legend>

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

---

===== 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.