LU07.A03 - Reisebuchung

1. Akzeptieren Sie das GitHub Classroom Assignment für die LU07.A03
2. Klonen Sie das Repository.
3. Erstellen Sie die HTML-Webseite in der Datei /trip.html. Halten Sie sich dabei an die Anforderungen.
4. Validieren Sie Ihren HTML-Code auf Einhaltung der Standards.
5. Geben Sie Ihre Lösung mittels Push ins Repository ab.

1. Verwenden Sie ein select Element, um den Kunden die Auswahl des Abflughafens zu ermöglichen. Hier sollten Sie optgroup Elemente verwenden, um die Flughäfen nach den Nachbarländern der Schweiz (Deutschland, Österreich, Italien und Frankreich) zu organisieren.
2. Mit radiobutton Elementen sollen die Kunden die Art der Unterkunft auswählen können. Geben Sie ihnen dabei die Möglichkeit, zwischen Optionen wie Hotel, Ferienwohnung oder Hostel zu wählen.
3. Nutzen Sie checkbox Elemente, um zusätzliche Dienstleistungen anzubieten, wie beispielsweise eine Reiseversicherung, Flughafentransfer oder zusätzliches Gepäck.
4. Fügen Sie zwei input Elemente hinzu, damit die Kunden den Anfangs- und Endzeitpunkt ihres gewünschten Reisezeitraums eingeben können. Jedes input Element sollte den passenden type Attributwert haben (in diesem Fall wahrscheinlich date). Ergänzen Sie ein weiteres input Element, das die Kunden dazu auffordert, die Dauer ihrer Reise in Tagen zwischen 1 und 21 anzugeben.
5. Fügen Sie ein weiteres input Element hinzu, das die Kunden dazu auffordert, die Anzahl der reisenden Personen einzugeben.
6. Verwenden Sie ein weiteres select Element, um den Kunden die Auswahl ihrer bevorzugten Fluggesellschaft zu ermöglichen.
7. Nutzen Sie zusätzliche checkbox Elemente, um weitere optionale Dienstleistungen anzubieten, wie etwa Priority-Check-In, zusätzliches Handgepäck oder die Buchung eines Mietwagens.
8. Schließlich soll das datalist Element in Kombination mit einem input Element eine vorausgefüllte Liste von Reisezielen zur Verfügung stellen, aus der die Kunden auswählen oder in die sie ihren eigenen Zielort eingeben können.
9. Fügen Sie ein input Element hinzu, um die E-Mail-Adresse des Kunden aufzunehmen. Verwenden Sie das type Attribut mit dem Wert email für dieses Eingabeelement, um die Browser-basierte E-Mail-Validierung zu aktivieren.
10. Ein reset Button soll den Kunden die Möglichkeit geben, alle bisher getroffenen Auswahlmöglichkeiten und Eingaben zurückzusetzen und das Formular neu zu beginnen.
11. Ein submit Button wird benötigt, um die Formularinformationen zu senden.

• Überlegen Sie sich eine sinnvolle Reihenfolge für die Felder und ordnen Sie so an.
• Überlegen Sie sich, welche Felder als required markiert werden sollten und markieren sie diese.
• Fügen Sie label-Elemente hinzu, um die verschiedenen Elementtypen und Optionen klar zu kennzeichnen.
• Verwenden Sie geeignete Formularelemente (z.B. ein fieldset und legend Element), um die verschiedenen Elementtypen visuell zu trennen und zu organisieren.
• Der submit Button soll die Formularinformationen an https://it.bzz.ch/demo/formdata/index.php senden.

Kevin Maurizi, Marcel Suter