Phase 4 Exercises: Forms & Validation 📝

Mentor's Note: Forms are how users interact with your website — logging in, signing up, booking appointments. These exercises take you from a simple login form to a fully validated appointment booking system with proper accessibility!

📍 Prerequisites

Before attempting these exercises, complete these lessons:

🎯 Exercise Flow

Title

Build a Simple Login Form

Description

Create a login form with email and password fields and a submit button. Use proper <label> elements associated with their inputs, and add required attributes to both fields. This exercise covers the fundamental form building blocks.

Learning Objectives

Create a <form> with action and method attributes
Use <input type="email"> for email addresses
Use <input type="password"> for secure password entry
Associate <label> with <input> using for and id
Use <button type="submit"> for form submission
Add required attribute for basic validation

HTML Starter Code

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
</head>
<body>
    <h1>Login</h1>
    <p>Enter your credentials to access your account</p>

    <form action="/login" method="post">
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </div>

        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>

        <div>
            <button type="submit">Sign In</button>
        </div>
    </form>
</body>
</html>

Expected Output

A browser page showing:

A form titled "Login"
An email input field (triggers email validation on submit)
A password input field (masks characters)
A "Sign In" submit button
Built-in browser validation messages when submitting empty fields

⭐ Medium Challenge: Registration Form

Title

Create a Registration Form with 8+ Input Types

Description

Build a complete user registration form with at least 8 different input types: text, email, password, number, date, select dropdown, checkbox, and radio buttons. Use <fieldset> and <legend> to group related fields logically.

Learning Objectives

Use <fieldset> and <legend> to group form sections
Implement <select> with <option> for dropdowns
Use <input type="radio"> for single-choice options
Use <input type="checkbox"> for multiple-choice options
Use <input type="number"> and <input type="date">
Structure a real-world registration form

HTML Starter Code

<!DOCTYPE html>
<html>
<head>
    <title>Create Account</title>
</head>
<body>
    <h1>Create Your Account</h1>

    <form action="/register" method="post">

        <!-- Personal Information -->
        <fieldset>
            <legend>Personal Information</legend>

            <div>
                <label for="fullname">Full Name:</label>
                <input type="text" id="fullname" name="fullname" required>
            </div>

            <div>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
            </div>

            <div>
                <label for="phone">Phone Number:</label>
                <input type="text" id="phone" name="phone">
            </div>

            <div>
                <label for="dob">Date of Birth:</label>
                <input type="date" id="dob" name="dob">
            </div>
        </fieldset>

        <!-- Account Details -->
        <fieldset>
            <legend>Account Details</legend>

            <div>
                <label for="username">Username:</label>
                <input type="text" id="username" name="username" required>
            </div>

            <div>
                <label for="password">Password:</label>
                <input type="password" id="password" name="password" required>
            </div>

            <div>
                <label for="age">Age:</label>
                <input type="number" id="age" name="age" min="13" max="120">
            </div>
        </fieldset>

        <!-- Preferences -->
        <fieldset>
            <legend>Preferences</legend>

            <div>
                <label for="country">Country:</label>
                <select id="country" name="country">
                    <option value="">-- Select --</option>
                    <option value="in">India</option>
                    <option value="us">United States</option>
                    <option value="uk">United Kingdom</option>
                    <option value="ca">Canada</option>
                </select>
            </div>

            <div>
                <p>Gender:</p>
                <input type="radio" id="male" name="gender" value="male">
                <label for="male">Male</label>
                <input type="radio" id="female" name="gender" value="female">
                <label for="female">Female</label>
                <input type="radio" id="other" name="gender" value="other">
                <label for="other">Other</label>
            </div>

            <div>
                <input type="checkbox" id="terms" name="terms" required>
                <label for="terms">I agree to the Terms and Conditions</label>
            </div>

            <div>
                <input type="checkbox" id="newsletter" name="newsletter">
                <label for="newsletter">Subscribe to newsletter</label>
            </div>
        </fieldset>

        <div>
            <button type="submit">Create Account</button>
            <button type="reset">Reset</button>
        </div>

    </form>
</body>
</html>

Expected Output

A browser page showing:

3 grouped sections using <fieldset> with <legend> labels
Text inputs for name, username, and phone
Email input with built-in validation
Date picker for date of birth
Number input for age (limited to 13–120)
A country dropdown with 4 options
Radio buttons for gender selection
Checkboxes for terms (required) and newsletter
Submit and Reset buttons

🏆 Hard Challenge: Appointment Booking Form

Title

Build an Appointment Booking Form with Full Validation

Description

Create an appointment booking form with HTML5 validation constraints. Include fields for name, email, phone (pattern validation), appointment date (min/max), time slot (select), department (radio), and notes (textarea). Use required, pattern, min, max, and title attributes to provide custom validation messages. Design accessible error indicators with aria-describedby.

Learning Objectives

Use pattern attribute with regex for phone/format validation
Use min and max on date inputs to restrict valid dates
Use title attribute to provide custom validation messages
Use aria-describedby to link inputs to error descriptions
Apply autocomplete for better UX
Build a complete, real-world form with multiple validation rules

HTML Starter Code

<!DOCTYPE html>
<html>
<head>
    <title>Book an Appointment</title>
</head>
<body>
    <h1>Book an Appointment</h1>
    <p>Fill in the details below to schedule your appointment.</p>

    <form action="/book-appointment" method="post" novalidate>

        <!-- Contact Information -->
        <fieldset>
            <legend>Contact Information</legend>

            <div>
                <label for="fullname">Full Name:</label>
                <input
                    type="text"
                    id="fullname"
                    name="fullname"
                    required
                    minlength="3"
                    maxlength="50"
                    title="Enter your full name (3-50 characters)"
                    aria-describedby="name-help">
                <span id="name-help">3-50 characters required</span>
            </div>

            <div>
                <label for="email">Email:</label>
                <input
                    type="email"
                    id="email"
                    name="email"
                    required
                    title="Enter a valid email address"
                    autocomplete="email"
                    aria-describedby="email-help">
                <span id="email-help">We'll send confirmation to this email</span>
            </div>

            <div>
                <label for="phone">Phone:</label>
                <input
                    type="tel"
                    id="phone"
                    name="phone"
                    required
                    pattern="[0-9]{10}"
                    title="Enter a valid 10-digit phone number"
                    autocomplete="tel"
                    aria-describedby="phone-help">
                <span id="phone-help">10-digit number (e.g., 9876543210)</span>
            </div>
        </fieldset>

        <!-- Appointment Details -->
        <fieldset>
            <legend>Appointment Details</legend>

            <div>
                <label for="appt-date">Preferred Date:</label>
                <input
                    type="date"
                    id="appt-date"
                    name="appt-date"
                    required
                    min="2026-06-12"
                    max="2026-12-31"
                    title="Select a date between June 12 and December 31, 2026"
                    aria-describedby="date-help">
                <span id="date-help">Available: June 12 - December 31, 2026</span>
            </div>

            <div>
                <label for="time-slot">Preferred Time:</label>
                <select id="time-slot" name="time-slot" required>
                    <option value="">-- Select a time slot --</option>
                    <option value="09:00">9:00 AM - 10:00 AM</option>
                    <option value="10:00">10:00 AM - 11:00 AM</option>
                    <option value="11:00">11:00 AM - 12:00 PM</option>
                    <option value="14:00">2:00 PM - 3:00 PM</option>
                    <option value="15:00">3:00 PM - 4:00 PM</option>
                    <option value="16:00">4:00 PM - 5:00 PM</option>
                </select>
            </div>

            <div>
                <p>Department:</p>
                <input type="radio" id="dept-general" name="department" value="general" required>
                <label for="dept-general">General Checkup</label>
                <input type="radio" id="dept-dental" name="department" value="dental">
                <label for="dept-dental">Dental</label>
                <input type="radio" id="dept-eye" name="department" value="eye">
                <label for="dept-eye">Eye Care</label>
            </div>

            <div>
                <label for="notes">Additional Notes:</label>
                <textarea id="notes" name="notes" rows="4" cols="50" maxlength="500" placeholder="Any special requirements..."></textarea>
            </div>
        </fieldset>

        <div>
            <button type="submit">Book Appointment</button>
            <button type="reset">Reset Form</button>
        </div>

    </form>
</body>
</html>

Expected Output

A browser page showing:

Contact section with name (3-50 chars), email, and phone (10-digit pattern)
Appointment section with date picker (restricted Jun 12 – Dec 31, 2026)
Time slot dropdown with 6 options
Department radio group with 3 options
Notes textarea with 500 char limit and placeholder
Help text under each field (aria-describedby)
Built-in HTML5 validation messages triggered on submit:
- "Please fill out this field" for empty required fields
- Custom title message for pattern mismatch on phone
- Date range error if outside min/max
- Email format validation on email field

💡 Tips for Success

The novalidate attribute on <form> disables browser validation — remove it to test HTML5 validation
Use pattern="[0-9]{10}" for Indian phone numbers; adjust for your region
Always pair aria-describedby with visible help text for accessibility
Test with both valid and invalid inputs to see validation in action
The title attribute on inputs provides custom error messages in most browsers

← Back to HTML Exercises

📍 Prerequisites​

🎯 Exercise Flow​

🔰 Starter Challenge: Simple Login Form​

Title​

Description​

Learning Objectives​

HTML Starter Code​

Expected Output​

⭐ Medium Challenge: Registration Form​

Title​

Description​

Learning Objectives​

HTML Starter Code​

Expected Output​

🏆 Hard Challenge: Appointment Booking Form​

Title​

Description​

Learning Objectives​

HTML Starter Code​

Expected Output​

💡 Tips for Success​

📍 Prerequisites

🎯 Exercise Flow

🔰 Starter Challenge: Simple Login Form

Title

Description

Learning Objectives

HTML Starter Code

Expected Output

⭐ Medium Challenge: Registration Form

Title

Description

Learning Objectives

HTML Starter Code

Expected Output

🏆 Hard Challenge: Appointment Booking Form

Title

Description

Learning Objectives

HTML Starter Code

Expected Output

💡 Tips for Success