📝 Arbeitsblatt: HTML Formulare

Name: ____________________
Datum: ____________________

1. Was ist ein Formular?

Ein Formular wird genutzt, um Daten vom Nutzer zu sammeln (z.B. bei einer Anmeldung oder einer Suche). Alles, was ein Nutzer ausfüllen kann, muss in ein übergeordnetes <form>-Tag gepackt werden.

Das wichtigste Duo: Label & Input
Ein Eingabefeld allein ist anonym. Deshalb nutzen wir immer ein <label> (die Beschriftung) und ein <input> (das Feld).

<label>Dein Name:</label> <input type="text">

2. Die verschiedenen Input-Typen

Je nachdem, was wir abfragen wollen, ändern wir den type des Inputs:

  • ⌨️ Textfelder:
    type="text" (Normaler Text) | type="email" (Prüft auf @-Zeichen) | type="number" (Nur Zahlen)
  • 🔘 Auswahlfelder:
    type="radio" (Nur eine Antwort aus einer Gruppe möglich)
    type="checkbox" (Mehrere Antworten gleichzeitig möglich)
  • 📅 Sonderfelder:
    type="date" (Öffnet einen Kalender)
Wichtig: Der Absende-Knopf
Damit das Formular abgeschickt werden kann, braucht es am Ende einen Button:
<button type="submit">Abschicken</button>

3. Praktische Übungen

🚀 Aufgabe 1: Dein User-Profil-Formular

Erstelle in deiner HTML-Datei ein Formular. Baue folgende Felder ein (vergiss die <label> nicht!):

  • Ein Textfeld für den Vornamen.
  • Ein E-Mail-Feld für die Kontaktadresse.
  • Ein Zahlenfeld für dein Alter.
  • Ein Datumsfeld für dein Geburtsdatum.
🚀 Aufgabe 2: Ja/Nein & Auswahl

Erweitere dein Formular um folgende Fragen:

  • Lieblingsfarbe: Erstelle drei radio-Buttons (Rot, Blau, Grün), sodass nur eine Farbe gewählt werden kann.
  • Interessen: Erstelle drei checkbox-Felder (Sport, Musik, Gaming), sodass mehrere Dinge ausgewählt werden können.

Tipp: Damit Radio-Buttons als Gruppe erkannt werden, müssen sie alle den gleichen name="..." haben!

🚀 Aufgabe 3: Der Abschluss

Füge am Ende des Formulars einen Absende-Button hinzu. Teste im Browser, ob du alle Felder ausfüllen kannst.

🌟 Profi-Challenge (für Experten)

Kannst du folgende Funktionen hinzufügen?

  1. Platzhalter: Nutze das Attribut placeholder="Hier schreiben...", um einen grauen Hinweistext in die Felder zu schreiben.
  2. Pflichtfelder: Füge das Attribut required zu den wichtigsten Feldern hinzu. Was passiert, wenn du das Formular leer abschicken willst?
  3. Textbereiche: Suche nach dem Tag <textarea></textarea>. Womit unterscheidet es sich von einem normalen Text-Input?