diff --git a/web/04/demos/basic_get.html b/web/04/demos/basic_get.html new file mode 100644 index 0000000..375da29 --- /dev/null +++ b/web/04/demos/basic_get.html @@ -0,0 +1,18 @@ + + + + + Formular + + +
+ +

+ + +

+ + +
+ + diff --git a/web/04/demos/basic_post.html b/web/04/demos/basic_post.html new file mode 100644 index 0000000..45b2d3d --- /dev/null +++ b/web/04/demos/basic_post.html @@ -0,0 +1,18 @@ + + + + + Formular + + +
+ +

+ + +

+ + +
+ + \ No newline at end of file diff --git a/web/04/demos/gastbestellung.html b/web/04/demos/gastbestellung.html new file mode 100644 index 0000000..ac24150 --- /dev/null +++ b/web/04/demos/gastbestellung.html @@ -0,0 +1,61 @@ + + + + + + Gastbestellung + + + +
+
+ Persönliche Angaben: +
+
+
+
+
+
+
+

+
+ +
+ Artikelbeschreibung: +
+

+ +
+
+
+ +
+ Optionen: + +
+ +
+ +
+
+ +
+ Versand: + Versandart wählen:
+ +
+ +
+
+
+ +
+ + + \ No newline at end of file diff --git a/web/04/labor/04_aufgaben.md b/web/04/labor/04_aufgaben.md new file mode 100644 index 0000000..5970361 --- /dev/null +++ b/web/04/labor/04_aufgaben.md @@ -0,0 +1,84 @@ +# Ü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 ``-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. \ No newline at end of file diff --git a/web/04/labor/workshop-registrierung.png b/web/04/labor/workshop-registrierung.png new file mode 100644 index 0000000..2c43a5b Binary files /dev/null and b/web/04/labor/workshop-registrierung.png differ