M101 - Webauftritt erstellen und veröffentlichen
  • Intro
    • 🗓️Organisatorisches
  • Tag 1
    • 01 Geschichte des Internets
    • 02 Realisation
    • 03 HTML
      • Grundlagen
      • Spezielle Tags
      • Tabellen & Listen
      • HTML Dokument
      • HTML Validierung
      • 🛠️Aufgabe Rechnung erstellen
    • 04 CSS
      • Grundlagen: Selektoren und Einbindung
      • CSS Boxmodell
      • CSS Validierung
      • 🛠️Aufgabe Rechnung gestalten
      • CSS Kaskadierung
      • Pseudoklassen
  • Tag 2
    • 01 Dokumentenstruktur
    • 02 Ordnerstruktur
    • 03 Bilder
    • 04 Gestaltung: Schriften, Farben, Einheiten
      • Schriftarten
      • Farben
      • Einheiten
    • 05 Inline und Block
    • 06 Flexbox
      • Konzept
      • Der Flex-Container
      • Die Flex-Items
      • 🛠️Aufgaben
        • Aufgabe Boxen
        • Aufgabe Newsportal
      • Weiterführende Links
    • 07 Exkurs: Usability
    • 08 Formulare
      • Formulare
      • Informationsgruppierung
      • Design- und Strukturgrundlagen
      • 🛠️Aufgabe Formulare
  • Tag 3
    • 01 CSS Grids
      • Konzept
      • Definition
      • Platzierung
      • 🛠️Grid Aufgabe
      • Grids vs. Flexbox
      • 🛠️Grids vs. Flexbox Aufgabe
      • Weiterführende Links
    • 02 Responsive Design
      • Media Queries
      • Responsive Design
      • 🛠️Aufgabe
    • 🛠️Testing-Workshop
    • 03 Konzeptionierung
    • 04 Veröffentlichen
    • Projektarbeit
Powered by GitBook
On this page
  • Aufgabenstellung
  • Versand
  • Variante: POST
  • Variante: GET
  • Vorgehen

Was this helpful?

  1. Tag 2
  2. 08 Formulare

Aufgabe Formulare

PreviousDesign- und StrukturgrundlagenNextTag 3

Last updated 6 months ago

Was this helpful?

Aufgabenstellung

Erstelle ein Anmeldeformular für den nächsten Firmenanlass deines Lehrbetriebes. Die folgenden Daten müssen für die Anmeldung eingetragen werden können:

  • Name

  • Email

  • Strasse

  • PLZ und Ort

  • Telefonnummer

  • Verfügbarkeit eines der folgenden Abos: Kein Abo, GA, Halbtax, Streckenabo Luzern-Zürich

  • Abendessen Menü 1 oder Menü 2

  • Mit oder ohne Übernachtung

  • Einzel- oder Doppelzimmer

  • Bemerkung

Achte darauf die richtigen Formularfeld-Typen zu verwenden. Zudem sollten die Formularfelder korrekt gruppiert werden.

Versand

Um dein Formular zu testen, kannst du die Daten an folgenden Endpunkt senden:

https://formlog.offline.ch/log
https://formlog.offline.ch/

Variante: POST

<form action="https://formlog.offline.ch/log" method="POST">
  [...]    
</form>

Variante: GET

<form action="https://formlog.offline.ch/log" method="GET">
  [...]    
</form>

Vorgehen

  1. Erstelle für die Aufgabe einen neuen Ordner und darin ein neues HTML-Dokument formular.html für das Formular.

  2. Denke dran, dass alle Felder eine name=""-Attribut haben und ein sinnvolles <label> oder einen placeholder!

Die vom Endpunkt empfangenen Daten werden angezeigt:

Füge das von Tag 1 ein, ändere den <title> und lösche das Bild aus dem <body> raus.

Kopiere das in den <body>

Füge nun in das Formular ein und teste immer wieder, ob es korrekt abgeschickt wird.

🛠️
hier
HTML-Grundgerüst
Formular-Tag von oben
alle benötigten Felder