# Übungsblatt 04

## HTML-Übung: GET - Login

**Aufgabenstellung**:
Erstellen Sie eine Webseite mit einem Formular zur Eingabe von E-Mail-Adresse und Passwort.

#### Arbeitsschritte

1. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und beliebigem Titel.

2. Setzen Sie als Überschrift (Ebene 1) "Kundenkonto".

3. Setzen Sie als Überschrift (Ebene 2) "Melden Sie sich bitte an:".

4. Erstellen Sie ein Formular-Gerüst für die HTTP-Methode `GET`. Die Daten des Formulars sollen an die aktuelle Seite gesendet werden (`action=""`).

5. Fügen Sie 2 Pflicht-Eingabefelder ein und versehen Sie diese mit jeweils einem Label.

	a. Eingabefeld vom Typ `email`

	b. Eingabefeld vom Typ `password`

7. Benennen Sie den Submit-Button geeignet.

8. Testen Sie Ihre Webseite:

	a. Geben Sie eine valide E-Mail-Adresse und ein beliebiges Passwort ein. Klicken Sie den Submit-Button. Prüfen Sie in der Adresszeile, ob Ihre Eingaben als Query-Parameter übernommen wurden. (*Zusatzfrage: Warum ist das problematisch?*)

	b. Geben Sie eine nicht-valide E-Mail-Adresse ein. Klicken Sie den Submit-Button. Prüfen Sie, ob Sie eine browser-interne Validierungsnachricht zum E-Mail-Feld erhalten.

	c. Geben Sie eine valide E-Mail-Adresse ein. Klicken Sie den Submit-Button. Prüfen Sie, ob Sie eine browser-interne Validierungsnachricht zur fehlenden Passwort-Eingabe erhalten.

## HTML-Übung: GET - Obstbestellung

**Aufgabenstellung**:
Erstellen Sie eine Webseite mit einem Formular zur Bestellung eines Obstkorbs.

#### Arbeitsschritte

1. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und beliebigem Titel.

2. Setzen Sie als Überschrift (Ebene 1) "Bestellen Sie sich Ihr Obst direkt nach Hause!".

3. Erstellen Sie ein Formular-Gerüst für die HTTP-Methode `GET`. Die Daten des Formulars sollen an die aktuelle Seite gesendet werden (`action=""`).

4. Fügen Sie 3 Eingabefelder ein und versehen Sie diese mit jeweils einem passenden Label.

	a. *Obst*: Eingabefeld mit Vorschlagsliste mit 5-10 Obstvorschlägen Ihrer Wahl. _(Tipp: `list`-Attribut, welches auf ein `<datalist>`-Element verweist)_

	b. *Stückzahl*: Eingabefeld vom Typ `number`. Es soll mindestens 1 Stück, höchstens 10 Stücke bestellt werden können.

	c. *Boxfarbe*: Eingabefeld vom Typ `color`.

7. Benennen Sie den Submit-Button geeignet.

8. Testen Sie Ihre Webseite:

	a. Wählen Sie ein Obst aus der Liste aus, geben Sie eine Stückzahl zwischen 1-10 ein und wählen Sie eine Farbe aus. Klicken Sie den Submit-Button. Prüfen Sie in der Adresszeile, ob Ihre Eingaben als Query-Parameter übernommen wurden.

	b. Tippen Sie die ersten Buchstaben eines Obst ein und prüfen Sie, ob sie automatisch einen Vorschlag erhalten.
	
	c. Tippen Sie ein Obst ein, dass nicht in der Liste enthalten ist, geben Sie eine Stückzahl zwischen 1-10 ein und wählen Sie eine Farbe aus. Klicken Sie den Submit-Button. Prüfen Sie in der Adresszeile, ob Ihre Eingaben als Query-Parameter übernommen wurden.

	d. Wählen Sie ein Obst aus der Liste aus, geben Sie eine Stückzahl zwischen 11-20 ein und wählen Sie eine Farbe aus. Klicken Sie den Submit-Button. Prüfen Sie, ob Sie eine browser-interne Validierungsnachricht zur fehlerhaften Stückzahl-Eingabe erhalten.

## HTML-Übung: POST - Workshopanmeldung

**Aufgabenstellung**:
Erstellen Sie eine Webseite mit einem Formular und einem Absende-Button.

#### Arbeitsschritte

1. Schreiben Sie ein vollständiges HTML-Grundgerüst mit deutscher Spracheinstellung und Titel.

2. Erstellen Sie ein Formular-Gerüst für die HTTP-Methode `POST`. Die Ziel-Url soll `https://web-637691723779.europe-west2.run.app/registrierung` sein.

3. Das Formular soll folgende Bereiche und Eingabefelder haben:

![Workshop-Anmeldung](workshop-registrierung.png)

4. Testen Sie Ihr Formular
	1. Geben Sie sinnvolle Eingaben ein senden Sie das Formular ab.
	2. Prüfen Sie, ob eine Auflistung Ihrer Eingaben als Antwort erscheint.

**Hinweis**: *Damit die Server-Antwort korrekt ist, sollten Ihre Eingabefelder genau folgende Schlüssel (`name`-Attribut) verwenden:*
- vorname
- nachname
- email
- telefon
- sessions
- agb
- newsletter
- equipment
- format