12 – Tabellen & Formulare 📊✏️

🎯 1. Einleitung & W3Schools

In Kapitel 12 hast du gelernt, wie man Tabellen für Daten und Formulare für Eingaben erstellt – immer mit Fokus auf Barrierefreiheit und Semantik.

Lies aktiv auf W3Schools nach – probiere aus, denke nach:

🔗 W3Schools – HTML Tabellen
🔗 W3Schools – HTML Formulare

🧠 2. KI-Prompt-Training – Daten mit Bedeutung

Deine Aufgabe: Formuliere einen Prompt, der keine Tabellen- oder Formular-Codes liefert, sondern dir hilft, zu verstehen, warum Barrierefreiheit bei diesen Elementen entscheidend ist.

❌ Vermeide: „Gib mir ein Kontaktformular.“ ✅ Fragen, die denken erzwingen:

• „Warum braucht jede Tabelle eine <caption> – und was macht sie für Screenreader-Nutzer so wichtig?“
• „Erkläre mir, warum jedes Eingabefeld ein <label> braucht – und warum for und id zusammenpassen müssen.“
• „Warum darf man Tabellen nie für das Seiten-Layout verwenden?“

🔍 Aufgabe 1: Analysiere – nicht korrigiere!

Ein Schüler hat folgenden Code abgegeben:

<table>
  <tr><td>Produkt</td><td>Preis</td></tr>
  <tr><td>Apfel</td><td>1,20 €</td></tr>
</table>

<form>
  <input type="text" placeholder="Name">
  <input type="email" placeholder="E-Mail">
  <button>Senden</button>
</form>

Schreibe (auf Papier oder in Textdatei):

1. Welche **zwei Fehler** macht der Schüler bei der Tabelle – besonders für Screenreader?
2. Welche **drei Fehler** macht er beim Formular – und warum ist das für Barrierefreiheit fatal?
3. Warum sind <th>-Elemente wichtig – und was sagt das Attribut scope aus?
4. Warum ist placeholder kein Ersatz für <label>?

📊✏️ Aufgabe 2: Strukturiere bewusst – erst nach der Analyse!

Erstelle zwei Dateien:

• tabelle.html – eine Preisliste mit:
  • <caption>
  • <thead> mit <th scope="col">
  • <tbody> mit mindestens drei Produkten
• formular.html – ein Kontaktformular mit:
  • Zwei Textfeldern (name, email) – jedes mit <label for="...">
  • Einer Nachrichten-<textarea>
  • Einer Radiobutton-Gruppe in einem <fieldset> mit <legend>
  • Alle Felder mit required-Attribut