Einzelarbeit, Zeit: 30 Minuten
Einleitung
Ziel ist es, ein Formular mit HTML & CSS zu erstellen.
Studieren Sie als erstes folgendes Kapitel im Buch:
Auftrag
Erstellen Sie mit HTML und CSS ein Kontaktformular, das den C.R.A.P. Gestaltungsgrundlagen und gängigen Usability Mustern entspricht. Halten Sie sich bitte an die unten vorgegeben Felder und Bezeichnungen, da wir das hier erstellte Kontaktformular in weiteren Aufgaben verwenden werden. Dort, wo Sie keine Vorgaben finden, treffen Sie selbst eine sinnvolle Entscheidung.
Vorgaben
- Die Seite, die das Formular beinhaltet, soll „kontakt.php“ heissen
- Verwenden Sie eine separate CSS Datei namens „styles.css“
- Im Action-Attribut des <form> Tags soll „kontakt.php“ angegeben werden (das Formular schickt die Daten wieder an diese Datei).
- Das Kontaktformular soll folgende Felder beinhalten:
| Label | Feldname | Validierung | Bemerkung |
| Vorname | firstname | required | |
| Nachname | lastname | required | |
| Strasse | street | Keine | |
| Postleitzahl | zipcode | Keine | |
| Ort | city | Keine | |
| Telefon | phone | Keine | |
| required | |||
| Wie haben Sie uns gefunden? | channel |
Select mit folgenden Optionen:
|
|
| Nachricht | message | Mehrzeilige Eingabe muss möglich sein | |
| Nachricht absenden | send | Submit-Button für das Abschicken des Formulares |
5. Verwenden Sie den korrekten HTML-Code für die Erstellung eines Formulares:
- Feldbeschriftungen (Labels) sollen eine Verbindung zum entsprechenden Eingabefeld haben (<label>-Tag benutzen)
- Nutzen Sie die passenden HTMLT Input-Typen für die jeweiligen Felder
- Gruppieren Sie die Felder in zusammengehörige Gruppen (z.B. mit <fieldset> oder einfach nur optisch)
- Mussfelder sollen entsprechend markiert sein mit dem required-Attribut
- Achten Sie auf eine korrekte HTML-Struktur und stylen Sie das Formular ansprechend per CSS
Wenn Sie vorzeitig fertig sind, können Sie das Formular mit Media-Queries noch so formatieren, dass dieses auf allen Geräten korrekt angezeigt wird.