10.5 Forms and User Input

📋 Table of Contents

1. Form Basics
2. Accessing Form Elements
3. Reading Form Values
4. Form Validation
5. FormData API
6. Input Events
7. Best Practices

---

Form Basics

Forms are the primary way to collect user input on the web.

Form Structure

┌─────────────────────────────────────────────────┐
│                    <form>                        │
│  ┌────────────────────────────────────────────┐ │
│  │ <label>              <input type="text">   │ │
│  └────────────────────────────────────────────┘ │
│  ┌────────────────────────────────────────────┐ │
│  │ <label>              <input type="email">  │ │
│  └────────────────────────────────────────────┘ │
│  ┌────────────────────────────────────────────┐ │
│  │ <label>              <textarea>            │ │
│  └────────────────────────────────────────────┘ │
│  ┌────────────────────────────────────────────┐ │
│  │ <button type="submit">Submit</button>      │ │
│  └────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────┘

Common Input Types

---

Accessing Form Elements

By Document Methods

// By form id
const form = document.getElementById('myForm');

// By name attribute (returns HTMLCollection)
const forms = document.forms;
const myForm = document.forms['myForm'];
const firstForm = document.forms[0];

Accessing Form Fields

const form = document.getElementById('registrationForm');

// By elements collection (name or id)
const usernameField = form.elements['username'];
const emailField = form.elements['email'];

// By index
const firstField = form.elements[0];

// By querySelector within form
const passwordField = form.querySelector('input[type="password"]');

Form Hierarchy

document.forms
    ├── form[0] (document.forms['formName'])
    │   ├── elements[0]
    │   ├── elements['fieldName']
    │   └── elements.length
    └── form[1]
        └── ...

---

Reading Form Values

Different Input Types

┌──────────────────────────────────────────────────────────────┐
│                    Reading Form Values                        │
├──────────────────┬───────────────────────────────────────────┤
│ Input Type       │ How to Get Value                          │
├──────────────────┼───────────────────────────────────────────┤
│ text, email,     │ element.value                             │
│ password, etc.   │ → Returns string                          │
├──────────────────┼───────────────────────────────────────────┤
│ checkbox         │ element.checked                           │
│                  │ → Returns boolean                         │
├──────────────────┼───────────────────────────────────────────┤
│ radio            │ Find checked: querySelector(':checked')   │
│                  │ → Then get .value                         │
├──────────────────┼───────────────────────────────────────────┤
│ select           │ select.value (selected option's value)    │
│                  │ select.selectedIndex (index number)       │
│                  │ select.options[i] (specific option)       │
├──────────────────┼───────────────────────────────────────────┤
│ select multiple  │ Get all selected options                  │
│                  │ [...select.selectedOptions]               │
├──────────────────┼───────────────────────────────────────────┤
│ file             │ input.files → FileList                    │
│                  │ input.files[0] → First File               │
└──────────────────┴───────────────────────────────────────────┘

Code Examples

// Text input
const name = document.getElementById('name').value;

// Checkbox
const isSubscribed = document.getElementById('subscribe').checked;

// Radio buttons
const selectedGender = document.querySelector(
  'input[name="gender"]:checked'
)?.value;

// Select dropdown
const country = document.getElementById('country').value;

// Multiple select
const selectedOptions = [
  ...document.getElementById('skills').selectedOptions,
].map((option) => option.value);

// File input
const files = document.getElementById('avatar').files;
if (files.length > 0) {
  const firstFile = files[0];
  console.log(firstFile.name, firstFile.size, firstFile.type);
}

---

Form Validation

HTML5 Built-in Validation

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

<!-- Pattern matching -->
<input type="text" pattern="[A-Za-z]{3,}" title="3+ letters" />

<!-- Length constraints -->
<input type="text" minlength="3" maxlength="20" />

<!-- Numeric constraints -->
<input type="number" min="0" max="100" step="5" />

<!-- Email validation -->
<input type="email" required />

Validation Flow

┌─────────────────────────────────────────────────────────────────┐
│                    Form Submission Flow                          │
└─────────────────────────────────────────────────────────────────┘
                              │
                              ▼
                    ┌─────────────────┐
                    │ User clicks     │
                    │ Submit button   │
                    └────────┬────────┘
                             │
                             ▼
                    ┌─────────────────┐
                    │ Browser runs    │
                    │ HTML5 validation│
                    └────────┬────────┘
                             │
              ┌──────────────┴──────────────┐
              │                             │
              ▼                             ▼
    ┌─────────────────┐           ┌─────────────────┐
    │  Validation     │           │  Validation     │
    │  FAILS          │           │  PASSES         │
    └────────┬────────┘           └────────┬────────┘
             │                             │
             ▼                             ▼
    ┌─────────────────┐           ┌─────────────────┐
    │ Show error      │           │ 'submit' event  │
    │ (no event)      │           │ is fired        │
    └─────────────────┘           └────────┬────────┘
                                           │
                                           ▼
                                  ┌─────────────────┐
                                  │ JavaScript      │
                                  │ handler runs    │
                                  └────────┬────────┘
                                           │
                         ┌─────────────────┴─────────────────┐
                         │                                   │
                         ▼                                   ▼
               ┌─────────────────┐                 ┌─────────────────┐
               │ Custom          │                 │ Call            │
               │ validation      │                 │ e.preventDefault│
               │ passes          │                 │ to stop submit  │
               └────────┬────────┘                 └─────────────────┘
                        │
                        ▼
               ┌─────────────────┐
               │ Form submitted  │
               │ or AJAX sent    │
               └─────────────────┘

Constraint Validation API

const input = document.getElementById('email');

// Check validity
input.validity.valid; // Overall validity
input.validity.valueMissing; // Required but empty
input.validity.typeMismatch; // Wrong type (email, url)
input.validity.patternMismatch; // Doesn't match pattern
input.validity.tooShort; // Below minlength
input.validity.tooLong; // Above maxlength
input.validity.rangeUnderflow; // Below min
input.validity.rangeOverflow; // Above max
input.validity.stepMismatch; // Doesn't match step
input.validity.customError; // Custom error set

// Validation methods
input.checkValidity(); // Returns true/false
input.reportValidity(); // Shows error + returns boolean
input.setCustomValidity(msg); // Set custom error message

Validity States Table

Custom Validation

const form = document.getElementById('registrationForm');
const password = document.getElementById('password');
const confirmPassword = document.getElementById('confirmPassword');

// Custom validation function
function validatePassword() {
  if (password.value !== confirmPassword.value) {
    confirmPassword.setCustomValidity("Passwords don't match");
  } else {
    confirmPassword.setCustomValidity(''); // Clear error
  }
}

// Validate on input
password.addEventListener('input', validatePassword);
confirmPassword.addEventListener('input', validatePassword);

// Form submission with validation
form.addEventListener('submit', function (e) {
  e.preventDefault();

  if (form.checkValidity()) {
    // All valid, proceed
    console.log('Form is valid!');
    // form.submit(); or send via fetch()
  } else {
    // Show validation errors
    form.reportValidity();
  }
});

---

FormData API

Creating FormData

// From a form element
const form = document.getElementById('myForm');
const formData = new FormData(form);

// Create empty and append
const formData = new FormData();
formData.append('username', 'john_doe');
formData.append('email', 'john@example.com');

FormData Methods

┌─────────────────────────────────────────────────────────────────┐
│                      FormData Methods                            │
├──────────────────────┬──────────────────────────────────────────┤
│ Method               │ Description                               │
├──────────────────────┼──────────────────────────────────────────┤
│ append(name, value)  │ Add a new value (allows duplicates)      │
│ set(name, value)     │ Set value (replaces existing)            │
│ get(name)            │ Get first value for name                 │
│ getAll(name)         │ Get all values for name as array         │
│ has(name)            │ Check if name exists                     │
│ delete(name)         │ Remove all values for name               │
│ entries()            │ Iterator of [name, value] pairs          │
│ keys()               │ Iterator of all keys                     │
│ values()             │ Iterator of all values                   │
└──────────────────────┴──────────────────────────────────────────┘

Using FormData

const form = document.getElementById('contactForm');

form.addEventListener('submit', async function (e) {
  e.preventDefault();

  const formData = new FormData(form);

  // Read values
  console.log(formData.get('name'));
  console.log(formData.get('email'));

  // Iterate all entries
  for (const [key, value] of formData.entries()) {
    console.log(`${key}: ${value}`);
  }

  // Convert to object
  const data = Object.fromEntries(formData);
  console.log(data);

  // Send via fetch
  try {
    const response = await fetch('/api/contact', {
      method: 'POST',
      body: formData, // Content-Type auto-set to multipart/form-data
    });

    if (response.ok) {
      console.log('Form submitted successfully!');
    }
  } catch (error) {
    console.error('Submission failed:', error);
  }
});

FormData with Files

const form = document.getElementById('uploadForm');

form.addEventListener('submit', async function (e) {
  e.preventDefault();

  const formData = new FormData(form);

  // Files are automatically included
  const file = formData.get('avatar');
  console.log('File name:', file.name);
  console.log('File size:', file.size);
  console.log('File type:', file.type);

  // Add additional data
  formData.append('uploadedAt', new Date().toISOString());

  // Send with fetch (multipart/form-data)
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData,
  });
});

FormData vs JSON

┌─────────────────────────────────────────────────────────────────┐
│              FormData vs JSON Comparison                         │
├─────────────────────────┬───────────────────────────────────────┤
│ FormData                │ JSON                                  │
├─────────────────────────┼───────────────────────────────────────┤
│ Supports file uploads   │ Files need Base64 encoding            │
│ multipart/form-data     │ application/json                      │
│ Server sees like form   │ Server needs JSON parser              │
│ Multiple same-name keys │ Last value wins (in object)           │
│ Automatic encoding      │ Manual JSON.stringify                 │
└─────────────────────────┴───────────────────────────────────────┘

// Sending as JSON instead
const form = document.getElementById('myForm');

form.addEventListener('submit', async function (e) {
  e.preventDefault();

  const formData = new FormData(form);
  const data = Object.fromEntries(formData);

  const response = await fetch('/api/submit', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
  });
});

---

Input Events

Event Types

┌─────────────────────────────────────────────────────────────────┐
│                    Form Input Events                             │
├──────────────┬──────────────────────────────────────────────────┤
│ Event        │ When It Fires                                    │
├──────────────┼──────────────────────────────────────────────────┤
│ input        │ Value changes (typing, paste, etc.)              │
│ change       │ Value changes AND element loses focus            │
│ focus        │ Element receives focus                           │
│ blur         │ Element loses focus                              │
│ submit       │ Form is submitted                                │
│ reset        │ Form reset button clicked                        │
│ invalid      │ Element fails validation on submit               │
│ select       │ Text is selected in input/textarea               │
└──────────────┴──────────────────────────────────────────────────┘

Event Timeline

User types "Hello" and tabs away:

   H         e         l         l         o       [Tab]
   │         │         │         │         │         │
   ▼         ▼         ▼         ▼         ▼         ▼
┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐ ┌──────┐
│input │ │input │ │input │ │input │ │input │ │blur  │ │change│
│"H"   │ │"He"  │ │"Hel" │ │"Hell"│ │"Hello│ │      │ │      │
└──────┘ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘ └──────┘

Note: 'change' fires AFTER 'blur' when value has changed

Input vs Change

const input = document.getElementById('search');

// Fires on every keystroke/change
input.addEventListener('input', function (e) {
  console.log('Input event:', e.target.value);
  // Good for: live search, real-time validation
});

// Fires when focus leaves AND value changed
input.addEventListener('change', function (e) {
  console.log('Change event:', e.target.value);
  // Good for: final validation, saving drafts
});

Focus Events

const emailInput = document.getElementById('email');

emailInput.addEventListener('focus', function () {
  this.parentElement.classList.add('focused');
  showHint('Enter your email address');
});

emailInput.addEventListener('blur', function () {
  this.parentElement.classList.remove('focused');
  validateEmail(this.value);
});

Form Submit and Reset

const form = document.getElementById('myForm');

// Handle submission
form.addEventListener('submit', function (e) {
  e.preventDefault(); // Stop default submission

  // Process form...
  console.log('Form submitted!');
});

// Handle reset
form.addEventListener('reset', function (e) {
  // Optionally prevent reset
  if (!confirm('Clear all fields?')) {
    e.preventDefault();
  }
});

// Programmatically submit/reset
form.submit(); // Submit form
form.reset(); // Reset form

---

Best Practices

1. Always Use Labels

<!-- Implicit label -->
<label>
  Name:
  <input type="text" name="name" />
</label>

<!-- Explicit label (preferred for styling) -->
<label for="email">Email:</label>
<input type="email" id="email" name="email" />

2. Provide Good UX Feedback

const input = document.getElementById('username');
const feedback = document.getElementById('usernameFeedback');

input.addEventListener('input', function () {
  if (this.validity.valid) {
    feedback.textContent = '✓ Looks good!';
    feedback.className = 'feedback success';
  } else if (this.validity.valueMissing) {
    feedback.textContent = 'Username is required';
    feedback.className = 'feedback error';
  } else if (this.validity.tooShort) {
    feedback.textContent = `At least ${this.minLength} characters needed`;
    feedback.className = 'feedback error';
  }
});

3. Debounce Input Events

function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

const searchInput = document.getElementById('search');

searchInput.addEventListener(
  'input',
  debounce(function (e) {
    // Only runs 300ms after user stops typing
    performSearch(e.target.value);
  }, 300)
);

4. Accessibility Considerations

<!-- Use fieldset and legend for groups -->
<fieldset>
  <legend>Payment Method</legend>
  <label>
    <input type="radio" name="payment" value="credit" />
    Credit Card
  </label>
  <label>
    <input type="radio" name="payment" value="paypal" />
    PayPal
  </label>
</fieldset>

<!-- Use aria attributes for custom validation -->
<input type="email" id="email" aria-describedby="emailError" />
<span id="emailError" role="alert" aria-live="polite"></span>

5. Prevent Double Submission

const form = document.getElementById('checkoutForm');
const submitBtn = form.querySelector('button[type="submit"]');

form.addEventListener('submit', async function (e) {
  e.preventDefault();

  // Disable button
  submitBtn.disabled = true;
  submitBtn.textContent = 'Processing...';

  try {
    await submitOrder(new FormData(form));
    showSuccess('Order placed!');
  } catch (error) {
    showError(error.message);
    // Re-enable on error
    submitBtn.disabled = false;
    submitBtn.textContent = 'Place Order';
  }
});

---

Quick Reference

Form Handling Checklist

□ preventDefault() on submit
□ Validate before processing
□ Handle all input types correctly
□ Provide visual feedback
□ Show loading state
□ Handle errors gracefully
□ Prevent double submission
□ Consider accessibility

Value Extraction Cheat Sheet

// Quick reference
const text = input.value; // text, email, password, etc.
const checked = checkbox.checked; // checkbox
const radio = form.querySelector(':checked').value; // radio
const select = select.value; // select single
const multi = [...select.selectedOptions].map((o) => o.value); // multi
const files = fileInput.files; // file
const formData = new FormData(form); // all form data
const obj = Object.fromEntries(new FormData(form)); // as object

---

Summary