Form Stage 1: Basic Structure

Loading exercise code...

Exercise: Form Stage 1 - Basic Structure

Objectives

In this exercise, you will:

• Learn the <form> element and its basic attributes
• Understand text input fields (<input type="text">)
• Practice creating submit buttons
• Learn basic form layout and styling
• Complete your first interactive form challenge!

What You’ll Learn

Form Elements:

• <form> - Container for all form controls
• <label> - Descriptive text for form fields
• <input> - Input field for user data
• <button> or <input type="submit"> - Submit button

Form Attributes:

• action - Where to send the form data
• method - How to send data (GET or POST)
• for attribute on labels - Links label to input by ID

Input Types:

• type="text" - Single-line text input
• type="submit" - Submits the form
• type="password" - Masked password input
• type="email" - Email validation

The Treasure Hunt Challenge

This stage is part of an interactive “Treasure Hunt” game!

Your Challenge:

1. Read the clue carefully
2. Think about what HTML tag answers the question
3. Type your answer in the text field
4. Click “Next Challenge” to continue

Can you answer the clue and proceed to Stage 2?

Tips for Success

• Look at the form structure carefully
• Each <label> has a for attribute matching an input’s id
• The form will navigate to the next stage when submitted
• Think about what each HTML tag does
• Don’t overthink it - the answers are usually simple tag names!

Form Best Practices

• Always use <label> for accessibility
• Connect labels to inputs using for and id
• Use proper type attributes for inputs
• Provide clear instructions
• Add visual feedback for user interactions
• Use CSS to style and layout your forms

Next Steps

After completing this exercise:

1. Experiment changing the form styling
2. Try modifying the action URL
3. Test the form with different answers
4. Proceed to Stage 2 for more challenges!