forked from WEB-IMB-WS2526/lab-development-imb
84 lines
3.9 KiB
Markdown
84 lines
3.9 KiB
Markdown
# Ü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:
|
|
|
|
|
|
|
|
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. |