Menu
Coddy logo textTech

Recap - Forms #1

Part of the Fundamentals section of Coddy's HTML journey — lesson 46 of 60.

challenge icon

Challenge

Easy

Let's build a simple drink order form using HTML, as shown in the picture below.

Here's what to include:

  1. A <form> tag to wrap everything.
  2. A group of radio buttons (name: "drink") to let users choose their drink. The labels should be "Water", "Coke", or "Sprite".
  3. A group of checkboxes (name: "extras") for optional add-ons. The labels should be "Ice", "Lemon", or "Sugar".
  4. A dropdown menu (name: "size") to pick a drink size. The options should be "Small", "Medium", or "Large".
  5. A submit button labeled "Place Order".
  6. A reset button labeled "Clear".

⚠️ Important: Use only one <form> tag. HTML does not allow nested <form> tags — placing a <form> inside another <form> is invalid and will cause your inputs to be detected outside the form, breaking the tests. Put all your radio buttons, checkboxes, dropdown, and buttons directly inside the single outer <form> — do not wrap sections in extra <form> tags.

Try it yourself

<!DOCTYPE html>
<html>
    <body>
        <form>
            <p>Select a drink: </p>
            <!-- Write code here -->
            
            <p>Select extras: </p>
            <!-- Write code here -->
            
            <p>Select size: </p>
            <!-- Write code here -->
            
        </form>
    </body>
</html>

All lessons in Fundamentals