Modul 4: Tabellen und Formulare

lock

Bevorstehend

Strukturiere Daten in Tabellen und erstelle interaktive Formulare

Ziele dieses Moduls

Sie koennen Tabellen zur Datendarstellung und einfache Formulare mit verschiedenen Input-Typen erstellen
Anwenden

Tabellen und Formulare sind essenzielle Werkzeuge für Webseiten. Tabellen zeigen Daten strukturiert an, Formulare ermöglichen Nutzer-Interaktion.

Tabellen in HTML

Tabellen verwenden wir für strukturierte Daten (z.B. Stundenpläne, Preislisten). Eine Tabelle besteht aus:

<table> - Das Tabellen-Element
<thead> - Kopfbereich (optional, aber empfohlen)
<tbody> - Hauptbereich der Tabelle
<tr> - Table Row (Zeile)
<th> - Table Header (Kopfzelle, fett)
<td> - Table Data (normale Zelle)

<table>
    <thead>
        <tr>
            <th>Kurs</th>
            <th>Tag</th>
            <th>Zeit</th>
            <th>Preis</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Webentwicklung</td>
            <td>Montag</td>
            <td>18:00 - 20:00</td>
            <td>150 CHF</td>
        </tr>
        <tr>
            <td>Python Basics</td>
            <td>Mittwoch</td>
            <td>19:00 - 21:00</td>
            <td>180 CHF</td>
        </tr>
    </tbody>
</table>

Formulare erstellen

Formulare sind das Tor zur Interaktion. Nutzer können damit Daten eingeben, Suchen starten, sich anmelden und vieles mehr.

Grundstruktur:

<form> - Umschliesst das gesamte Formular
<label> - Beschriftung für Eingabefelder
<input> - Eingabefeld (viele Typen!)
<textarea> - Mehrzeiliges Textfeld
<button> - Absenden-Button

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

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

    <label for="kurs">Kurs auswählen:</label>
    <select id="kurs" name="kurs">
        <option value="web">Webentwicklung</option>
        <option value="python">Python Basics</option>
        <option value="design">UI Design</option>
    </select>

    <label for="nachricht">Nachricht:</label>
    <textarea id="nachricht" name="nachricht" rows="4"></textarea>

    <label>
        <input type="checkbox" name="newsletter">
        Newsletter abonnieren
    </label>

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

Die wichtigsten Input-Typen:

type="text" - Einzeiliger Text
type="email" - E-Mail (mit Validierung!)
type="password" - Passwort (verdeckt)
type="number" - Nur Zahlen
type="date" - Datumsauswahl
type="checkbox" - An/Aus-Schalter
type="radio" - Auswahlbuttons (nur eine Option)

Challenge

Übung: Kurs-Anmeldeformular

Erstelle eine Webseite mit einem Anmeldeformular für einen Kurs. Die Seite soll enthalten:

1. Eine Tabelle mit mindestens 3 Kursen und diesen Spalten:

Kursname
Tag und Zeit
Dauer (in Wochen)
Preis

2. Ein Anmeldeformular mit:

Name (Textfeld, Pflichtfeld)
E-Mail (E-Mail-Feld, Pflichtfeld)
Kurs-Auswahl (Dropdown mit den Kursen aus der Tabelle)
Nachricht (Textarea für Rückfragen)
Checkbox 'Ich akzeptiere die AGB'
Absenden-Button

Design-Freiheit: Wähle ein Thema für deine Kurse (z.B. Sport, Musik, Programmieren, Sprachen).

Note

Wichtig: Verwende das for-Attribut bei <label> und das passende id-Attribut beim <input>. Das verbindet Label und Feld und ist wichtig für Barrierefreiheit!

Tipp: Das Attribut required macht ein Feld zum Pflichtfeld - der Browser prüft das automatisch.