forked from WEB-IMB-WS2526/lab-development-imb
04: Demos und Labor
parent
9973b1348a
commit
7a9604d3fd
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Formular</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="http://localhost:8080/submit" method="GET">
|
||||
<label for="vorname">Vorname:</label>
|
||||
<input type="text" id="vorname" name="vorname"><br><br>
|
||||
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name"><br><br>
|
||||
|
||||
<button type="submit">Absenden</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Formular</title>
|
||||
</head>
|
||||
<body>
|
||||
<form action="http://localhost:8080/submit" method="POST">
|
||||
<label for="vorname">Vorname:</label>
|
||||
<input type="text" id="vorname" name="vorname"><br><br>
|
||||
|
||||
<label for="name">Name:</label>
|
||||
<input type="text" id="name" name="name"><br><br>
|
||||
|
||||
<button type="submit">Absenden</button>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Gastbestellung</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<form action="http://localhost:8080/gast" method="post" target="_blank">
|
||||
<fieldset>
|
||||
<legend>Persönliche Angaben:</legend>
|
||||
<label for="vorname">Vorname:</label><br>
|
||||
<input type="text" name="vorname" id="vorname" placeholder="Vorname" maxlength="15" required><br>
|
||||
<label for="nachname">Nachname:</label><br>
|
||||
<input type="text" name="name" id="nachname" value="Muster"><br>
|
||||
<label for="email">Email:</label><br>
|
||||
<input type="text" name="email" id="email" autocomplete="email"><br>
|
||||
<label for="plz">PLZ:</label><br>
|
||||
<input type="text" name="plz" id="plz" pattern="[0-9]{5}"><br><br>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Artikelbeschreibung:</legend>
|
||||
<label for="artikel">Artikel:</label><br>
|
||||
<input type="text" name="artikel" id="artikel" value="Blauer Kugelschreiber" readonly disabled><br><br>
|
||||
|
||||
<label for="language">Wähle die Farbe deines Artikels:</label><br>
|
||||
<select id="language" name="language" multiple size="2">
|
||||
<option value="rot">Rot</option>
|
||||
<option value="schwarz">Schwarz</option>
|
||||
<option value="blau">Blau</option>
|
||||
<option value="gelb">Gelb</option>
|
||||
</select><br>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Optionen:</legend>
|
||||
<input type="checkbox" id="agb" name="agb" required>
|
||||
<label for="agb">Ich habe die Allgemeinen Geschäftsbedingungen gelesen und akzeptiere sie.</label><br>
|
||||
<input type="checkbox" id="newsletter" name="newsletter" value="ja">
|
||||
<label for="newsletter">Ich möchte den kostenlosen Newsletter abonnieren und regelmäßig informiert
|
||||
werden.</label><br>
|
||||
<input type="checkbox" id="geschenk" name="geschenk" value="ja">
|
||||
<label for="geschenk">Bitte als Geschenk verpacken (zzgl. 5 € Verpackungspauschale).</label><br>
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Versand:</legend>
|
||||
Versandart wählen:<br>
|
||||
<input type="radio" id="versand" name="lieferoption" value="versand" required>
|
||||
<label for="versand">Lieferung nach Hause (Standardversand)</label><br>
|
||||
<input type="radio" id="filiale" name="lieferoption" value="filiale">
|
||||
<label for="filiale">Abholung in einer Filiale Ihrer Wahl</label><br>
|
||||
</fieldset>
|
||||
<br>
|
||||
<input type="submit" value="Bestellung abschicken">
|
||||
</form>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -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 `<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.
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Loading…
Reference in New Issue