Auftrag 2

02 Formular mit HTML & CSS

Studieren Sie als erstes folgendes:

  Buch «HTML & CSS», Kapitel 7

Auftrag

Erstellen Sie mit HTML und CSS ein Kontaktformular, das den gestalterischen und strukturellen Aspekten einer interaktiven Webseite entspricht. Damit das Kontaktformular schlussendlich einwandfrei funktioniert, halten Sie sich an die folgenden Vorgaben. Dort, wo Sie keine Vorgaben finden, treffen Sie selbst eine sinnvolle Entscheidung.

Vorgaben

  1. Die Seite, die das Formular beinhaltet, soll „index.html“ heissen
  2. Im Action-Attribut des FORM-Tags soll die PHP-Seite „kontakt.php“ aufgerufen werden.
  3. Das Kontaktformular soll folgende Felder beinhalten:
Label Feldname Validierung Bemerkung
Nachname lastname Mussfeld  
Vorname prename Mussfeld  
Adresse address Keine  
Postleitzahl zipcode Keine  
Ort city Keine  
Telefon phone Keine  
Emailadresse email Mussfeld, gültige Emailadresse  
Kontaktaufnahme contact Auswahlfeld
(Dropdownliste)
Auswahl:

 

„keine“

„Morgens“

„Mittags“

„Abends“

„ganzer Tag“

Mitteilung message Mussfeld Mehrzeilige Eingabe muss möglich sein
Senden send   Submit-Button für das Abschicken des Formulares

4. Verwenden Sie den korrekten HTML-Code für die Erstellung eines Formulares:

  • Feldbeschriftungen (Labels) sollen eine Verbindung zum entsprechenden Eingabefeld haben (LABEL-Tag benutzen)
  • Gruppieren Sie die Felder mit dem FIELDSET-Tag
  • Mussfelder sollen entsprechend markiert sein
  • Achten Sie auf eine korrekte HTML-Struktur und layouten Sie das Formular 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.