Auftrag 2: Grundlegendes Formular erstellen

Einzelarbeit, Zeit: 30 Minuten

Einleitung

Ziel ist es, ein Formular mit HTML & CSS zu erstellen.

Studieren Sie als erstes folgendes Kapitel im Buch:

  Buch «HTML & CSS», Kapitel 7

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

  1. Die Seite, die das Formular beinhaltet, soll „kontakt.php“ heissen
  2. Verwenden Sie eine separate CSS Datei namens „styles.css“
  3. Im Action-Attribut des <form> Tags soll „kontakt.php“ angegeben werden (das Formular schickt die Daten wieder an diese Datei).
  4. 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  
E-Mail email required  
Wie haben Sie uns gefunden? channel  

Select mit folgenden Optionen:

  • Google
  • Social Media
  • Werbung
  • Empfehlung
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.