Tabellen und Formulare

IT 11.7 – Webdesign · Einheit 3 · Café-Projekt Schritt 3

Lernziele

Du kannst Daten in einer Tabelle mit Überschrift, Kopf- und Datenzellen darstellen.
Du kannst ein Formular mit label, input, select, textarea und button aufbauen.
Du kannst für jede Eingabe einen passenden Eingabetyp auswählen und begründen.
Du kannst Pflichtfelder und einfache Eingabeprüfungen durch den Browser einsetzen und ihre Grenzen erläutern.

Rückblick

1. Wann nimmt man ol, wann ul?

ol, wenn die Reihenfolge wichtig ist (Arbeitsschritte), sonst ul (Zutaten, Angebote).

2. Wie lautet der relative Pfad von index.html zu bilder/cafe.svg, und wie von einer Seite im Unterordner seiten?

Von index.html aus: bilder/cafe.svg. Aus dem Unterordner seiten: ../bilder/cafe.svg.

3. Wozu dient das Attribut alt?

Es ersetzt das Bild durch einen kurzen Text, wenn man es nicht sehen kann, zum Beispiel beim Vorlesen.

Speisekarte und Bestellzettel

Bisher bestellen die Schülerinnen und Schüler im Café auf Zetteln. Darauf steht mal „2 Kakao“, mal „Kakao x2 für 9b“, mal gar kein Name. Die Speisekarte hängt als Liste an der Wand, und niemand findet die Preise.

Wie bekommt man Preise übersichtlich nebeneinander? Und wie sorgt man dafür, dass auf jeder Bestellung dasselbe steht?

Erkunden: Tabellen und Formulare ausprobieren

Bevor du weiterliest: Bearbeite die Erkundungen. Die Erklärungen weiter unten helfen dir erst danach.

Erkundung 1: Eine kleine Tabelle leicht

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Beschreibe, wofür tr, th und td stehen. Woran erkennst du den Unterschied zwischen th und td in der Vorschau?

b) Füge eine Zeile für „Apfelschorle, 1,20 €“ hinzu.

c) Füge eine dritte Spalte „vegan“ mit „ja“ oder „nein“ hinzu. Beschreibe, an welchen Stellen du etwas ergänzen musst.

Lösung

Erkundung 2: Ein Formular untersuchen mittel

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Klicke auf das Wort „Name:“. Beschreibe, was passiert.

b) Klicke auf „Bestellen“, ohne einen Namen einzugeben. Beschreibe, was passiert, und gib an, welches Attribut dafür sorgt.

c) Versuche, bei „Anzahl“ den Wert 9 oder einen Buchstaben einzugeben und dann zu bestellen. Beschreibe, was die Angaben type, min und max bewirken.

d) Stelle eine Vermutung auf: Wohin werden die eingegebenen Daten beim Bestellen geschickt?

Tipp 1

Zu a): Vergleiche die Angabe for="name" beim label mit der Angabe id="name" beim input.

Lösung

Tabellen

Tabellen sind für tabellarische Daten gedacht: Daten, die man sinnvoll in Zeilen und Spalten vergleicht, zum Beispiel Preise, Stundenpläne oder Ergebnisse. Für das Layout einer Seite nimmt man keine Tabellen, dafür gibt es CSS (Einheit 5).

<table>
  <caption>Getränke</caption>
  <thead>
    <tr>
      <th scope="col">Getränk</th>
      <th scope="col">Preis</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Kakao</td>
      <td>1,50 €</td>
    </tr>
  </tbody>
</table>

Element	Bedeutung
`table`	die ganze Tabelle
`caption`	Überschrift der Tabelle
`thead` / `tbody`	Kopfbereich / Datenbereich
`tr`	eine Zeile
`th`	Kopfzelle; `scope="col"` heißt: gilt für die Spalte darunter
`td`	Datenzelle

Formulare

Ein Formular sammelt Eingaben. Es steht in einem form-Element und besteht aus Eingabeelementen mit Beschriftung:

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

label ist die Beschriftung. Mit for wird sie an das Feld mit derselben id gebunden.
input ist ein Eingabefeld. type legt die Art fest (siehe unten).
name ist der Name, unter dem der Wert später verschickt wird.
button type="submit" schickt das Formular ab.

Passende Eingabetypen

Element bzw. Typ	wofür	Besonderheit
`type="text"`	kurzer Text	–
`type="email"`	E-Mail-Adresse	Browser prüft das Format, Handy zeigt @-Tastatur
`type="number"`	Zahl	mit `min`, `max`, `step`
`type="date"`	Datum	Kalenderauswahl
`type="tel"`	Telefonnummer	Handy zeigt Ziffernblock
`type="password"`	Passwort	Eingabe wird verdeckt
`type="checkbox"`	Ankreuzfeld, auch mehrere	`checked` = vorausgewählt
`type="radio"`	genau eine aus mehreren	alle Knöpfe einer Gruppe haben denselben `name`
`select` mit `option`	Auswahl aus einer Liste	spart Platz bei vielen Möglichkeiten
`textarea`	längerer Text	mehrzeilig, mit End-Tag

Zusammengehörige Felder fasst man mit fieldset zusammen. Die Beschriftung der Gruppe steht in legend:

<fieldset>
  <legend>Abholung</legend>
  <input type="radio" id="pause1" name="pause" value="1" required>
  <label for="pause1">1. große Pause</label>
  <input type="radio" id="pause2" name="pause" value="2">
  <label for="pause2">2. große Pause</label>
</fieldset>

Eingaben prüfen lassen

Der Browser kann einfache Eingaben selbst prüfen, bevor er das Formular abschickt:

Attribut	bewirkt
`required`	Pflichtfeld, darf nicht leer sein
`min`, `max`	kleinster und größter Wert bei Zahlen und Daten
`minlength`, `maxlength`	kleinste und größte Textlänge
`type="email"` usw.	Format muss passen

Café-Projekt: Schritt 3

Café-Projekt, Schritt 3: Speisekarte und Bestellformular mittel

Lege zwei neue Seiten an. Kopiere dafür index.html zweimal und ändere jeweils Titel und main. So bleiben header, nav und footer auf allen Seiten gleich.

speisekarte.html: Eine Tabelle mit Überschrift „Unsere Speisekarte“, Kopfzeile und den Spalten Produkt, Preis und Hinweis.

Produkt	Preis	Hinweis
Kakao	1,50 €	–
Tee	1,00 €	vegan
Apfelschorle	1,20 €	vegan
Brezel	0,90 €	vegan
Käsebrötchen	1,80 €	–
Muffin	1,50 €	vegan

bestellen.html: Ein Formular mit

Name (Pflichtfeld),
Klasse (Pflichtfeld, zum Beispiel „11FO“),
Produkt (Auswahlliste mit den Produkten der Speisekarte),
Anzahl (Zahl von 1 bis 5),
Abholung (genau eine: 1. oder 2. große Pause, in einem fieldset),
Bemerkung (mehrzeilig, freiwillig),
einem Knopf „Bestellung abschicken“.

Jedes Feld hat ein label. Teste: Was passiert, wenn du ohne Namen abschickst? Was steht nach dem Abschicken in der Adressleiste?

Tipp 1

Damit die Radio-Knöpfe eine Gruppe bilden, brauchen beide denselben name, aber verschiedene id.

Stand nach Schritt 3

Aufgaben

Aufgabe 1: Ein Stundenplan leicht

Ergänze die Tabelle im Spielplatz zu einem Stundenplan für Montag und Dienstag mit drei Stunden. Lass dann prüfen.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung (Beispiel)

Aufgabe 2: Code lesen mittel

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

  <p>Newsletter:</p>
  <input type="checkbox" id="news" name="news" checked>
  <label for="news">Ich möchte den Newsletter</label>

  <label for="alter">Alter:</label>
  <input type="number" id="alter" name="alter" min="14" max="99">

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

a) Beschreibe, wie das Formular beim Öffnen aussieht. Gehe auch darauf ein, was vorausgewählt ist.

b) Gib an, was passiert, wenn man in das E-Mail-Feld mia.beispiel eintippt und auf „Anmelden“ klickt.

c) Gib an, was bei einem Alter von 12 passiert, und erläutere, warum der Betreiber das Alter trotzdem auf dem Server prüfen muss.

Lösung

Aufgabe 3: Das passende Eingabefeld mittel

Ein Sportverein baut ein Anmeldeformular. Wähle für jede Angabe ein passendes Eingabeelement oder einen passenden type aus und begründe kurz.

Vorname
Geburtsdatum
Telefonnummer der Eltern
Sportart: Fußball, Handball, Basketball, Tischtennis, Turnen, Leichtathletik (genau eine)
Trainingstage: Montag bis Freitag (mehrere möglich)
Einverständnis zu den Vereinsregeln (muss angekreuzt sein)
Fragen an den Verein

Tipp 1

Unterscheide: genau eine Möglichkeit oder mehrere? Wenige oder viele Möglichkeiten?

Lösung

Aufgabe 4: Fehler im Formular mittel

Im folgenden Formular stecken vier Fehler. Finde sie, erläutere jeweils, was nicht funktioniert, und gib die Verbesserung an.

<form>
  <label for="vorname">Vorname:</label>
  <input type="text" id="Vorname" name="vorname">

  <p>Abholung:</p>
  <input type="radio" id="p1" name="pause1" value="1">
  <label for="p1">1. Pause</label>
  <input type="radio" id="p2" name="pause2" value="2">
  <label for="p2">2. Pause</label>

  <label for="anzahl">Anzahl:</label>
  <input type="text" id="anzahl" name="anzahl">

  <input type="submit" value="Bestellen">
  <label for="hinweis">Hinweis:</label>
  <textarea id="hinweis" name="hinweis">
</form>

Tipp 1

Probiere das Formular im Spielplatz aus Erkundung 2 aus. Klicke auf die Beschriftungen und auf beide Radio-Knöpfe.

Lösung

Aufgabe 5: Ein Anmeldeformular entwerfen schwer

Für die Projektwoche sollen sich Schülerinnen und Schüler online anmelden. Gebraucht werden: Name, Klasse, ein Erstwunsch und ein Zweitwunsch aus fünf Projekten, die Angabe, ob man bei der Abschlusspräsentation helfen möchte, und Platz für Bemerkungen.

a) Entwirf das Formular in HTML.

b) Begründe zwei deiner Entscheidungen im Hinblick darauf, dass das Formular auch mit Tastatur und Vorlesehilfe gut bedienbar sein soll.

c) Beurteile, ob die Eingabeprüfung des Browsers ausreicht, um sicherzustellen, dass Erst- und Zweitwunsch verschieden sind.

Tipp 1

Für die Wünsche: zwei Auswahllisten mit denselben fünf Projekten, jeweils mit eigenem label.

Tipp 2

Zu c): Welche der Prüfungen aus der Tabelle „Eingaben prüfen lassen“ könnte zwei Felder miteinander vergleichen?

Lösung (Beispiel)

Zusatzaufgabe: Zellen verbinden schwer Zusatz

Recherchiere die Attribute colspan und rowspan. Baue im Spielplatz von Aufgabe 1 einen Stundenplan, in dem eine Doppelstunde Informationstechnik über zwei Zeilen geht und eine Überschriftenzelle „Pause“ über alle Spalten reicht.

Lösung (Beispiel)

Zusammenfassung

Tabellen für tabellarische Daten: table, caption, thead/tbody, Zeilen tr, Kopfzellen th, Datenzellen td. Zeilenweise schreiben.
Formulare in form: Eingabefelder mit label (for = id), name für den Namen des Werts, Absenden mit button type="submit".
Passende Typen wählen: text, email, number, date, tel, checkbox, radio (gleicher name), select, textarea.
Prüfungen im Browser: required, min/max, minlength/maxlength, Typ. Sie helfen, sind aber umgehbar. Der Server muss selbst prüfen.

Selbstcheck

Geh die Fragen ehrlich durch. Wenn du bei einer unsicher bist, lies den verlinkten Abschnitt noch einmal oder bearbeite die passende Aufgabe.

Kannst du Daten in einer Tabelle darstellen? → Erkundung 1, Tabellen, Aufgabe 1
Kannst du ein Formular aufbauen? → Erkundung 2, Formulare, Café-Projekt, Aufgabe 2, Aufgabe 4
Kannst du passende Eingabetypen auswählen? → Passende Eingabetypen, Aufgabe 3
Kannst du Pflichtfelder und Prüfungen einsetzen und ihre Grenzen erläutern? → Eingaben prüfen lassen, Aufgabe 5

Wortspeicher

Begriff	Bedeutung in einfachen Worten
table, tr, th, td	Tabelle, Zeile, Kopfzelle, Datenzelle
caption	Überschrift einer Tabelle
thead / tbody	Kopf- / Datenbereich einer Tabelle
form	Formular, das Eingaben sammelt
label	Beschriftung eines Eingabefelds; `for` verweist auf die `id` des Felds
input	Eingabefeld; `type` legt die Art fest
name	Name, unter dem ein eingegebener Wert verschickt wird
select, option	Auswahlliste und ihre Einträge
textarea	mehrzeiliges Textfeld
checkbox / radio	Ankreuzfeld (mehrere möglich) / Auswahlknopf (genau einer)
fieldset, legend	Gruppe zusammengehöriger Felder und ihre Beschriftung
required	Pflichtfeld
Eingabeprüfung	Prüfung, ob eine Eingabe erlaubt ist, bevor sie verschickt wird

Quellen

Hessisches Kultusministerium: Kerncurriculum Fachoberschule, Fachrichtung Technik, Schwerpunkt Informationstechnik, Themenfeld 11.7 Webdesign (Stand November 2022).
HTML nach dem HTML Living Standard (WHATWG), Abschnitte „Tabular data“ und „Forms“.
Texte, Beispiele, Aufgaben und Code-Beispiele sind selbst erstellt.