Module 7: Forms & Input

📖 The <form> Element

Forms collect user input and send it to a server for processing. Every form needs a <form> container.

Basic Form Structure

<form action="/submit-form" method="POST">
    <!-- Form fields go here -->
    <button type="submit">Send</button>
</form>
            

Form Attributes

Attribute	Purpose
`action`	URL where form data is sent
`method`	HTTP method: GET (data in URL) or POST (data in body)
`enctype`	How data is encoded (important for file uploads)
`target`	Where to display the response

💡 GET vs. POST: Use GET for searches and filters (data visible in URL). Use POST for passwords, personal data, and file uploads (data hidden from URL).

⌨️ Input Types

The <input> tag is the most versatile form element. Its behavior changes based on the type attribute.

Text Input Types

<!-- Single line text -->
<input type="text" name="username" placeholder="Enter username">

<!-- Email with built-in validation -->
<input type="email" name="email" placeholder="you@example.com">

<!-- Password (hides characters) -->
<input type="password" name="password">

<!-- Search field -->
<input type="search" name="query" placeholder="Search...">

<!-- URL validation -->
<input type="url" name="website" placeholder="https://example.com">
            

Numeric and Date Inputs

<!-- Number with constraints -->
<input type="number" name="age" min="18" max="120">

<!-- Date picker -->
<input type="date" name="birthday">

<!-- Time picker -->
<input type="time" name="appointment">

<!-- Range slider -->
<input type="range" name="rating" min="1" max="10">

<!-- Color picker -->
<input type="color" name="favcolor">
            

Selection Inputs

<!-- Single checkbox -->
<input type="checkbox" name="newsletter" id="news">
<label for="news">Subscribe to newsletter</label>

<!-- Radio buttons (grouped by name) -->
<input type="radio" name="plan" value="basic" id="basic">
<label for="basic">Basic Plan</label>

<input type="radio" name="plan" value="premium" id="premium">
<label for="premium">Premium Plan</label>

<!-- Dropdown select -->
<select name="country" id="country">
    <option value="">Select a country</option>
    <option value="et">Ethiopia</option>
    <option value="us">United States</option>
    <option value="uk">United Kingdom</option>
</select>
            

📝 Labels, Textareas, and Buttons

The <label> Element (Critical for Accessibility)

Every form input needs a <label>. Clicking the label focuses the input, and screen readers announce the label to blind users.

<!-- Method 1: Using for attribute (matches input's id) -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email">

<!-- Method 2: Wrapping input inside label -->
<label>
    Email Address:
    <input type="email" name="email">
</label>
            

Textarea for Multi-line Text

<label for="message">Your Message:</label>
<textarea id="message" name="message" 
          rows="5" cols="40"
          placeholder="Write your message here..."></textarea>
            

Button Types

<!-- Submit button (submits the form) -->
<button type="submit">Submit Form</button>

<!-- Reset button (clears all fields) -->
<button type="reset">Clear Form</button>

<!-- Generic button (for JavaScript) -->
<button type="button">Click Me (JS)</button>
            

✅ Form Validation Attributes

HTML5 provides built-in validation without JavaScript!

<!-- Required field -->
<input type="text" name="name" required>

<!-- Minimum and maximum length -->
<input type="text" name="username" minlength="3" maxlength="20">

<!-- Pattern matching (regex) -->
<input type="text" name="phone" 
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       placeholder="123-456-7890">

<!-- Number range -->
<input type="number" name="quantity" min="1" max="10">
            

💡 Validation Tip: HTML5 validation improves user experience but is not secure. Always validate data on the server side too, because users can bypass browser validation.

✏️ Exercise 7.1: Build a Contact Form

Your Task

Create contact-form.html with a complete contact form:

Full Name (text input, required, minlength 2)
Email Address (email input, required)
Phone Number (tel input, optional)
Subject (select dropdown with 4 options)
Message (textarea, required, minlength 10)
Preferred contact method (radio: Email, Phone, Either)
Newsletter subscription (checkbox)
Submit button and Reset button

Requirements:

Every input must have a properly associated <label>
Use proper name attributes for all fields
Add placeholder text where appropriate
Group related fields using <fieldset> and <legend>

📝 Module 7 Quiz

🎯 Module Summary

✅ <form> wraps all inputs with action and method
✅ Use specific input types (email, tel, date) for better UX and validation
✅ Always pair inputs with <label> using for + id
✅ Use required, minlength, pattern for client-side validation
✅ <fieldset> and <legend> group related controls

← Previous Module Next: Module 8 →