HTML Forms

What are HTML Forms?

Forms are the primary way users interact with websites - they allow data collection, user input, and communication. Every login, search, signup, or contact form uses HTML form elements.

Common Form Uses:

• User authentication: Login and signup forms
• Data collection: Contact forms, surveys, feedback
• Search: Search bars and filters
• E-commerce: Checkout, payment, shipping forms
• Content submission: Comments, posts, file uploads

Form Workflow:

1. User fills out form
2. User clicks submit button
3. Browser validates input (HTML5 validation)
4. Data sent to server (via action URL)
5. Server processes data
6. Response sent back to user

Back to top

Basic Form Structure

Every form starts with the <form> element and contains input fields and a submit button.

Form Element Attributes:

• action - URL where form data is sent
• method - HTTP method (GET or POST)
• name - Form identifier
• enctype - Encoding type (for file uploads)

Simple Form Example:

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" required>
  
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>
  
  <button type="submit">Submit</button>
</form>

GET vs POST:

Back to top

Input Types

HTML5 provides many input types with built-in validation and mobile keyboard optimization.

Text-Based Inputs:

<!-- Regular text -->
<input type="text" placeholder="Enter text">

<!-- Email (validates email format) -->
<input type="email" placeholder="email@example.com">

<!-- Password (hidden characters) -->
<input type="password" placeholder="Password">

<!-- Search (shows clear button) -->
<input type="search" placeholder="Search...">

<!-- Phone number -->
<input type="tel" placeholder="+1-555-123-4567">

<!-- URL (validates URL format) -->
<input type="url" placeholder="https://example.com">

Number Inputs:

<!-- Number (with increment/decrement) -->
<input type="number" min="0" max="100" step="1">

<!-- Range slider -->
<input type="range" min="0" max="100" value="50">

Date & Time Inputs:

<input type="date">           <!-- Date picker -->
<input type="time">           <!-- Time picker -->
<input type="datetime-local"> <!-- Date and time -->
<input type="month">          <!-- Month picker -->
<input type="week">           <!-- Week picker -->

Choice Inputs:

<!-- Checkbox (multiple selections) -->
<input type="checkbox" id="agree" name="agree">
<label for="agree">I agree to terms</label>

<!-- Radio buttons (single selection) -->
<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>

File & Color Inputs:

<!-- File upload -->
<input type="file" accept="image/*">

<!-- Color picker -->
<input type="color" value="#ff0000">

Hidden Input:

<!-- Not visible to user, but submitted with form -->
<input type="hidden" name="user_id" value="12345">

Back to top

Other Form Elements

Textarea (Multi-line Text):

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

Select Dropdown:

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

Grouped Options (Optgroup):

<select name="car">
  <optgroup label="German Cars">
    <option value="bmw">BMW</option>
    <option value="audi">Audi</option>
  </optgroup>
  <optgroup label="Japanese Cars">
    <option value="toyota">Toyota</option>
    <option value="honda">Honda</option>
  </optgroup>
</select>

Datalist (Auto-complete):

<label for="browser">Choose browser:</label>
<input list="browsers" id="browser" name="browser">

<datalist id="browsers">
  <option value="Chrome">
  <option value="Firefox">
  <option value="Safari">
  <option value="Edge">
</datalist>

Buttons:

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

<!-- Reset button (clears form) -->
<button type="reset">Reset</button>

<!-- Regular button (for JavaScript) -->
<button type="button" onclick="alert('Clicked!')">Click Me</button>

Fieldset & Legend (Grouping):

<fieldset>
  <legend>Personal Information</legend>
  <label for="fname">First Name:</label>
  <input type="text" id="fname" name="fname">
  
  <label for="lname">Last Name:</label>
  <input type="text" id="lname" name="lname">
</fieldset>

Back to top

Form Validation

HTML5 provides built-in validation attributes to ensure data quality before submission.

Validation Attributes:

<!-- Required field (cannot be empty) -->
<input type="text" required>

<!-- Minimum length -->
<input type="text" minlength="3">

<!-- Maximum length -->
<input type="text" maxlength="20">

<!-- Pattern (regex validation) -->
<input type="text" pattern="[A-Za-z]{3,}" title="At least 3 letters">

<!-- Number range -->
<input type="number" min="1" max="100">

<!-- Email validation (built-in) -->
<input type="email" required>

Complete Validation Example:

<form action="/register" method="POST">
  <!-- Username: 3-15 characters, letters/numbers only -->
  <label for="username">Username:</label>
  <input type="text" 
         id="username" 
         name="username" 
         pattern="[A-Za-z0-9]{3,15}" 
         title="3-15 alphanumeric characters"
         required>

  <!-- Email: valid email format -->
  <label for="email">Email:</label>
  <input type="email" 
         id="email" 
         name="email" 
         required>

  <!-- Password: minimum 8 characters -->
  <label for="password">Password:</label>
  <input type="password" 
         id="password" 
         name="password" 
         minlength="8"
         required>

  <!-- Age: 13-120 -->
  <label for="age">Age:</label>
  <input type="number" 
         id="age" 
         name="age" 
         min="13" 
         max="120"
         required>

  <button type="submit">Register</button>
</form>

Accessibility Best Practices:

• Always use labels: Connect labels to inputs with for and id
• Use placeholders wisely: Don't rely on them as labels
• Provide error messages: Use title attribute or custom JS
• Group related fields: Use <fieldset> and <legend>
• Logical tab order: Ensure keyboard navigation works smoothly

Back to top

Complete Form Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Contact Form</title>
  <style>
    form { max-width: 500px; margin: 20px auto; }
    label { display: block; margin-top: 10px; font-weight: bold; }
    input, textarea, select { 
      width: 100%; 
      padding: 8px; 
      margin-top: 5px;
      border: 1px solid #ddd;
      border-radius: 4px;
    }
    button { 
      margin-top: 15px; 
      padding: 10px 20px;
      background: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover { background: #0056b3; }
  </style>
</head>
<body>
  <form action="/contact" method="POST">
    <h2>Contact Us</h2>

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

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

    <label for="phone">Phone:</label>
    <input type="tel" id="phone" name="phone">

    <label for="subject">Subject: *</label>
    <select id="subject" name="subject" required>
      <option value="">-- Select Subject --</option>
      <option value="general">General Inquiry</option>
      <option value="support">Support</option>
      <option value="sales">Sales</option>
    </select>

    <label for="message">Message: *</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <label>
      <input type="checkbox" name="subscribe" value="yes">
      Subscribe to newsletter
    </label>

    <button type="submit">Send Message</button>
  </form>
</body>
</html>

Back to top

Practice Tasks

1. Registration Form:
   • Username (text, 3-15 characters, required)
   • Email (email type, required)
   • Password (password type, min 8 chars, required)
   • Confirm Password (password type, required)
   • Date of Birth (date input)
   • Gender (radio buttons)
   • Terms checkbox (required)
   • Submit button
2. Job Application Form:
   • Personal info (name, email, phone)
   • Position dropdown (select)
   • Experience level (radio: entry/mid/senior)
   • Skills (checkboxes: HTML, CSS, JS, etc.)
   • Cover letter (textarea)
   • Resume upload (file input)
3. Survey Form:
   • Rating scale (1-5 using radio or range)
   • Multiple choice questions (checkboxes)
   • Open-ended feedback (textarea)
   • Would recommend? (yes/no radio)
4. Booking Form:
   • Name, email, phone
   • Check-in date (date input)
   • Check-out date (date input)
   • Number of guests (number input, 1-10)
   • Room type (select dropdown)
   • Special requests (textarea)

Back to top