Wiederholung - Formulare #1

Teil des Abschnitts Grundlagen der HTML-Journey von Coddy. Lektion 46 von 60.

Aufgabe

Einfach

Erstellen wir ein einfaches Getränkebestellformular mit HTML, wie im Bild unten gezeigt.

Das soll enthalten sein:

Ein <form>-Tag, das alles umschließt.
Eine Gruppe von Optionsfeldern (name: "drink"), mit denen Nutzer ihr Getränk auswählen können. Die Beschriftungen sollten "Water", "Coke" oder "Sprite" lauten. Gib jedem Optionsfeld eine id, die seiner Beschriftung in Kleinbuchstaben entspricht: "water", "coke", "sprite".
Eine Gruppe von Kontrollkästchen (name: "extras") für optionale Extras. Die Beschriftungen sollten "Ice", "Lemon" oder "Sugar" lauten. Gib jedem Kontrollkästchen eine id, die seiner Beschriftung in Kleinbuchstaben entspricht: "ice", "lemon", "sugar".
Ein Dropdown-Menü (name: "size") zur Auswahl der Getränkegröße. Die Optionen sollten "Small", "Medium" oder "Large" lauten.
Eine Schaltfläche zum Absenden mit der Beschriftung "Place Order".
Eine Schaltfläche zum Zurücksetzen mit der Beschriftung "Clear".

⚠️ Wichtig: Verwende nur ein <form>-Tag. HTML erlaubt keine verschachtelten <form>-Tags: Ein <form> innerhalb eines anderen <form> ist ungültig und führt dazu, dass deine Eingabeelemente außerhalb des Formulars erkannt werden, wodurch die Tests fehlschlagen. Platziere alle Optionsfelder, Kontrollkästchen, das Dropdown-Menü und die Schaltflächen direkt innerhalb des einzelnen äußeren <form>: Umschließe Abschnitte nicht mit zusätzlichen <form>-Tags.

Probier es selbst

<!DOCTYPE html>
<html>
    <body>
        <form>
            <p>Select a drink: </p>
            <!-- Schreibe hier den Code -->
            
            <p>Select extras: </p>
            <!-- Schreibe hier den Code -->
            
            <p>Select size: </p>
            <!-- Schreibe hier den Code -->
            
        </form>
    </body>
</html>