Inhaltsverzeichnis

zurĂĽck

HTML – Formulare

Formulare dienen der Eingabe, Ăśbermittlung und Verarbeitung von Benutzerdaten.

Sie sind zentrale Bestandteile vieler Webanwendungen:

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: 

<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

Sicherheit (Grundlagen)

Merksatz

Formulare sind Schnittstellen –
sie mĂĽssen klar, robust und sicher sein.