Advanced Forms

Form validation, custom inputs, multi-step forms, and file uploads.

Overview

Advanced forms provide rich user experiences with validation and interactivity.

Key Concepts

• HTML5 Validation — Built-in form validation
• Custom Validation — JavaScript validation patterns
• Multi-Step Forms — Wizard-style forms
• File Uploads — Drag-and-drop file inputs
• Accessibility — ARIA labels and error announcements

Code Examples

<form id="registrationForm" novalidate>
  <div class="form-group">
    <label for="email">Email *</label>
    <input 
      type="email" 
      id="email" 
      name="email" 
      required 
      pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
      aria-describedby="emailError"
    >
    <span id="emailError" class="error" role="alert"></span>
  </div>

  <div class="form-group">
    <label for="password">Password *</label>
    <input 
      type="password" 
      id="password" 
      name="password" 
      required 
      minlength="8"
      aria-describedby="passwordHelp"
    >
    <small id="passwordHelp">Must be at least 8 characters</small>
  </div>

  <div class="form-group">
    <label for="avatar">Profile Picture</label>
    <input 
      type="file" 
      id="avatar" 
      name="avatar" 
      accept="image/*"
      aria-describedby="avatarHelp"
    >
    <small id="avatarHelp">Max 5MB, JPG or PNG</small>
  </div>

  <fieldset>
    <legend>Preferences</legend>
    <label>
      <input type="checkbox" name="terms" required>
      I agree to the terms
    </label>
  </fieldset>

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

<script>
document.getElementById('registrationForm').addEventListener('submit', (e) => {
  e.preventDefault();
  const form = e.target;
  
  if (form.checkValidity()) {
    // Submit form
  } else {
    // Show errors
    form.querySelectorAll(':invalid').forEach(input => {
      const error = document.getElementById(input.id + 'Error');
      if (error) error.textContent = input.validationMessage;
    });
  }
});
</script>

Practice

Build a multi-step form with validation and progress indicator.