Lesson 5: Forms - User Input and Interaction

What You'll Learn

What forms are and why they're important
How to create text inputs and text areas
How to create buttons, checkboxes, and radio buttons
How to create dropdown menus
Form structure and organization
Input attributes and validation

Why This Matters

Forms are how users interact with websites - they're used for login, search, contact forms, surveys, shopping, and much more. Understanding forms is essential for creating interactive websites.

Part 1: Basic Form Structure

Creating a Form

<form>
    <!-- Form elements go here -->
</form>

The <form> tag wraps all your input elements.

Form with Action and Method

<form action="/submit" method="post">
    <!-- Form elements -->
</form>

action: Where to send the form data (URL)
method: How to send it (get or post)

Note: For now, we'll create forms without action/method. You'll learn to process forms when you study backend programming.

Part 2: Text Inputs

Single-Line Text Input

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

Breaking it down:

<label> - Text description of the input
for attribute - Connects label to input (matches input's id)
<input> - The input field (self-closing)
type="text" - Creates a text input
id - Unique identifier (for label connection)
name - Used when submitting form data

Why Use Labels?

Labels improve:

Usability - Clicking the label focuses the input
Accessibility - Screen readers read the label
User experience - Clear form design

Input with Placeholder

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="you@example.com">

The placeholder shows example text inside the input (disappears when typing).

Part 3: Different Input Types

Email Input

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

Validates that input looks like an email address.

Password Input

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

Hides the typed characters with dots/asterisks.

Number Input

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

Only accepts numbers
Optional min and max values

Date Input

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">

Shows a calendar picker in most browsers.

Tel (Phone) Input

<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

For telephone numbers (mobile keyboards show number pad).

URL Input

<label for="website">Website:</label>
<input type="url" id="website" name="website">

Validates that input is a valid URL.

Part 4: Text Areas

For multi-line text input:

<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="30"></textarea>

Attributes:

rows - Height in lines
cols - Width in characters

Part 5: Checkboxes

Allow users to select multiple options:

<p>Select your interests:</p>

<input type="checkbox" id="coding" name="interests" value="coding">
<label for="coding">Coding</label>

<input type="checkbox" id="design" name="interests" value="design">
<label for="design">Design</label>

<input type="checkbox" id="music" name="interests" value="music">
<label for="music">Music</label>

For checkboxes:

Multiple can be checked at once
Same name groups them together
value is what gets submitted

Pre-checked Checkbox

<input type="checkbox" id="newsletter" name="newsletter" value="yes" checked>
<label for="newsletter">Subscribe to newsletter</label>

The checked attribute makes it selected by default.

Part 6: Radio Buttons

Allow users to select ONE option from a group:

<p>What's your favorite color?</p>

<input type="radio" id="red" name="color" value="red">
<label for="red">Red</label>

<input type="radio" id="blue" name="color" value="blue">
<label for="blue">Blue</label>

<input type="radio" id="green" name="color" value="green">
<label for="green">Green</label>

For radio buttons:

Only one can be selected at a time
All options must have the SAME name
Each needs a unique id and value

Part 7: Dropdown Menus (Select)

<label for="country">Country:</label>
<select id="country" name="country">
    <option value="">-- Please choose --</option>
    <option value="usa">United States</option>
    <option value="canada">Canada</option>
    <option value="uk">United Kingdom</option>
    <option value="australia">Australia</option>
</select>

Pre-selected Option

<select id="country" name="country">
    <option value="usa">United States</option>
    <option value="canada" selected>Canada</option>
    <option value="uk">United Kingdom</option>
</select>

Grouped Options

<label for="food">Favorite Food:</label>
<select id="food" name="food">
    <optgroup label="Fruits">
        <option value="apple">Apple</option>
        <option value="banana">Banana</option>
    </optgroup>
    <optgroup label="Vegetables">
        <option value="carrot">Carrot</option>
        <option value="broccoli">Broccoli</option>
    </optgroup>
</select>

Part 8: Buttons

Submit Button

<button type="submit">Submit Form</button>

Or:

<input type="submit" value="Submit Form">

Submits the form when clicked.

Reset Button

<button type="reset">Clear Form</button>

Clears all form fields back to default values.

Regular Button

<button type="button">Click Me</button>

Does nothing by default (needs JavaScript to function).

Part 9: Form Attributes

Required Fields

<input type="text" id="name" name="name" required>

Field must be filled before submitting.

Min/Max Length

<input type="text" id="username" name="username" minlength="3" maxlength="20" required>

Pattern Validation

<input type="text" id="zipcode" name="zipcode" pattern="[0-9]{5}" title="Five digit zip code">

Uses regular expressions to validate format.

Disabled Fields

<input type="text" id="country" name="country" value="USA" disabled>

Field is visible but cannot be edited.

Readonly Fields

<input type="text" id="email" name="email" value="user@example.com" readonly>

Similar to disabled, but the value is submitted.

Part 10: Complete Form Example

Create a new file: lesson-05/contact-form.html

<!DOCTYPE html>
<html>
<head>
    <title>Contact Form</title>
</head>
<body>
    <h1>Contact Us</h1>
    
    <form>
        <h2>Personal Information</h2>
        
        <label for="first-name">First Name:</label>
        <input type="text" id="first-name" name="first-name" required>
        <br><br>
        
        <label for="last-name">Last Name:</label>
        <input type="text" id="last-name" name="last-name" required>
        <br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        <br><br>
        
        <label for="phone">Phone:</label>
        <input type="tel" id="phone" name="phone">
        <br><br>
        
        <h2>Message Details</h2>
        
        <label for="subject">Subject:</label>
        <select id="subject" name="subject" required>
            <option value="">-- Choose a topic --</option>
            <option value="general">General Inquiry</option>
            <option value="support">Technical Support</option>
            <option value="feedback">Feedback</option>
            <option value="other">Other</option>
        </select>
        <br><br>
        
        <label for="priority">Priority:</label><br>
        <input type="radio" id="low" name="priority" value="low" checked>
        <label for="low">Low</label><br>
        <input type="radio" id="medium" name="priority" value="medium">
        <label for="medium">Medium</label><br>
        <input type="radio" id="high" name="priority" value="high">
        <label for="high">High</label>
        <br><br>
        
        <label for="message">Message:</label><br>
        <textarea id="message" name="message" rows="6" cols="50" required></textarea>
        <br><br>
        
        <h2>Preferences</h2>
        
        <input type="checkbox" id="newsletter" name="newsletter" value="yes">
        <label for="newsletter">Subscribe to newsletter</label><br>
        
        <input type="checkbox" id="updates" name="updates" value="yes">
        <label for="updates">Receive product updates</label>
        <br><br>
        
        <button type="submit">Send Message</button>
        <button type="reset">Clear Form</button>
    </form>
</body>
</html>

Part 11: Organizing Forms with Fieldsets

Use <fieldset> and <legend> to group related fields:

<form>
    <fieldset>
        <legend>Shipping Address</legend>
        
        <label for="street">Street:</label>
        <input type="text" id="street" name="street">
        <br><br>
        
        <label for="city">City:</label>
        <input type="text" id="city" name="city">
        <br><br>
        
        <label for="zip">ZIP Code:</label>
        <input type="text" id="zip" name="zip" pattern="[0-9]{5}">
    </fieldset>
    
    <fieldset>
        <legend>Payment Information</legend>
        
        <label for="card">Card Number:</label>
        <input type="text" id="card" name="card">
        <br><br>
        
        <label for="expiry">Expiry Date:</label>
        <input type="text" id="expiry" name="expiry" placeholder="MM/YY">
    </fieldset>
</form>

This creates visual groupings with borders and titles.

Practice Exercises

Exercise 1: Registration Form

Create registration.html with:

Username (text, required, 3-15 characters)
Email (email, required)
Password (password, required, minimum 8 characters)
Confirm Password (password, required)
Birthday (date)
Gender (radio buttons: Male, Female, Other)
Terms checkbox (required)
Submit button

Exercise 2: Survey Form

Create survey.html with:

Name (text, required)
Age range (dropdown: 18-25, 26-35, 36-45, 46+)
Favorite features (checkboxes: at least 4 options)
Rating (radio buttons: 1-5 stars)
Additional comments (textarea)
Submit button

Exercise 3: Job Application

Create job-application.html with:

Personal info fieldset (name, email, phone)
Experience fieldset (years of experience dropdown, resume upload)
Availability fieldset (start date, full-time/part-time radio buttons)
Skills fieldset (checkboxes for different skills)
Cover letter (textarea)
Submit and reset buttons

Common Mistakes

Mistake 1: Missing Name Attribute

<input type="text" id="username">  <!-- ❌ No name attribute -->

Fix:

<input type="text" id="username" name="username">  <!-- ✅ Include name -->

Without name, the data won't be submitted.

Mistake 2: Wrong Radio Button Grouping

<input type="radio" id="male" name="gender1" value="male">
<input type="radio" id="female" name="gender2" value="female">  <!-- ❌ Different names -->

Fix:

<input type="radio" id="male" name="gender" value="male">
<input type="radio" id="female" name="gender" value="female">  <!-- ✅ Same name -->

Mistake 3: Label Not Connected to Input

<label>Username:</label>
<input type="text" id="username" name="username">  <!-- ❌ No connection -->

Fix:

<label for="username">Username:</label>
<input type="text" id="username" name="username">  <!-- ✅ Connected with for/id -->

Mistake 4: Putting Label Inside Input

<input type="text" id="name" name="name">
    <label for="name">Name</label>  <!-- ❌ Wrong placement -->
</input>

Fix:

<label for="name">Name:</label>
<input type="text" id="name" name="name">  <!-- ✅ Correct -->

Quick Reference: Input Types

Type	Purpose	Example
`text`	Single-line text	Name, username
`email`	Email address	user@example.com
`password`	Hidden text	Password fields
`number`	Numeric input	Age, quantity
`date`	Date picker	Birthday, appointment
`tel`	Phone number	(555) 123-4567
`url`	Website URL	https://example.com
`checkbox`	Multiple selections	Interests, preferences
`radio`	Single selection	Gender, rating
`submit`	Submit button	Send form
`reset`	Reset button	Clear form

What You Learned

✅ How to create forms with the <form> tag
✅ Different input types (text, email, password, number, date, etc.)
✅ How to create checkboxes and radio buttons
✅ How to create dropdown menus
✅ How to create buttons (submit, reset, regular)
✅ How to use labels for better accessibility
✅ Form validation attributes (required, min, max, pattern)
✅ How to organize forms with fieldsets
✅ Best practices for form design

What's Next?

Now that you understand HTML structure, it's time to learn CSS - how to style your web pages and make them beautiful!

In the next lesson, you'll learn the basics of CSS and how to add colors, fonts, and styling to your HTML.