Tag 5: Formulare & Eingaben

Ziel

Lerne, wie du Daten von Nutzern mithilfe von Formularen und Eingabefeldern erfassen kannst.

Themen

• Formularstruktur: <form>
• Eingabetypen: text, number, password, email, checkbox, radio
• Buttons: <button>
• Labels: <label> für Barrierefreiheit

Formular Beispiel

Grundlegende Formularstruktur mit Label, Eingabefeld und Senden-Button:

<form>
  <label for="name">Name:</label>
  <input type="text" id="name">
  <button type="submit">Senden</button>
</form>

Eingabetypen

• text – einzeiliger Text
• number – Zahlenfeld
• password – versteckter Text für Passwörter
• email – überprüftes E-Mail-Format
• checkbox – mehrere Optionen auswählbar
• radio – eine Option auswählbar

Übung

Erstelle ein Kontaktformular mit:

• Name (Textfeld)
• E-Mail (E-Mail-Feld)
• Nachricht (Textarea)
• Senden-Button

Beispiellösung

<h2>Kontaktformular</h2>
<form action="#" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>

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

  <label for="message">Nachricht:</label><br>
  <textarea id="message" name="message" rows="4" cols="30"></textarea><br><br>

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

Extra Tipps

• Verwende immer <label> mit dem for-Attribut für bessere Barrierefreiheit.
• Nutze verschiedene Eingabetypen für automatische Validierung (z. B. email).
• Verwende textarea für mehrzeiligen Text.