Wiederholung - Formulare #1

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

Aufgabe

Einfach

Lassen Sie uns ein einfaches Getränkebestellformular mit HTML erstellen, wie in der Abbildung unten gezeigt.

Folgendes soll enthalten sein:

Ein <form>-Tag, um alles zu umschließen.
Eine Gruppe von Radio-Buttons (name: "drink"), damit Benutzer ihr Getränk wählen können. Die Beschriftungen sollten "Water", "Coke" oder "Sprite" sein.
Eine Gruppe von Checkboxen (name: "extras") für optionale Extras. Die Beschriftungen sollten "Ice", "Lemon" oder "Sugar" sein.
Ein Dropdown-Menü (name: "size"), um eine Getränkegröße auszuwählen. Die Optionen sollten "Small", "Medium" oder "Large" sein.
Ein Submit-Button mit der Beschriftung "Place Order".
Ein Reset-Button mit der Beschriftung "Clear".

⚠️ Wichtig: Verwenden Sie nur einen <form>-Tag. HTML erlaubt keine verschachtelten <form>-Tags — das Platzieren eines <form> innerhalb eines anderen <form> ist ungültig und führt dazu, dass Ihre Eingaben außerhalb des Formulars erkannt werden, was die Tests fehlschlagen lässt. Platzieren Sie alle Ihre Radio-Buttons, Checkboxen, das Dropdown-Menü und die Buttons direkt innerhalb des einzigen äußeren <form>-Tags — umschließen Sie Abschnitte nicht mit zusätzlichen <form>-Tags.

Probier es selbst

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