codex-lv3-may-2025

Level Navigation: 1

2

3

4

5

6

7

8

9

10⚡

11⚡

12⚡

13⚡

14⚡

15

16

17

18⚡

19

20

Level 4: HTML Form Creation

User Story: As a user, I want to fill out a form with my words so that I can create a personalized Mad Libs story.

What You’ll Do

Create an HTML form with all the required fields for the Mad Libs story.

Instructions

• Add HTML form with text inputs for:
  • Name
  • Adjective 1
  • Noun 1
  • Verb
  • Adjective 2
  • Noun 2
• Set form method to “GET”
• Set form action to “/create-mad-libs”

💡 Code Hints

Need help with forms? Check out these snippets:

• Form structure: Use <form method="GET" action="/create-mad-libs">
• Input fields: Use <input type="text" name="fieldName">
• Labels: Use <label> elements for better accessibility

Show Me: form structure with inputs

<form method="GET" action="/create-mad-libs">
    <label for="name">Name:</label>
    <input type="text" name="name" id="name" required>
    
    <label for="adjective1">Adjective:</label>
    <input type="text" name="adjective1" id="adjective1" required>
    
    <button type="submit">Create Mad Libs!</button>
</form>

Show Me: input field with proper attributes

<input type="text" name="noun1" placeholder="Enter a noun" required>

✅ Check

1. Open your webpage in a browser
2. You should see a form with 6 input fields
3. Each field should have a clear label
4. The form should have a submit button
5. If the form doesn’t appear, check your HTML structure

---