20 min25 XP

Form Events

Submit, Input, and Change Events

Step 1 of 5

Understanding Form Events

Form events let you respond to user interactions with form elements like inputs, textareas, checkboxes, and select dropdowns. They're essential for creating interactive forms!

Main Form Events:

  • submit: Form is submitted
  • input: Input value changes (fires on every keystroke)
  • change: Input value changes and element loses focus
  • focus: Element receives focus (clicked/tabbed into)
  • blur: Element loses focus (clicked away)

Real-World Examples

Form events power many features:

  • Real-time form validation (check if email is valid)
  • Character counters (tweets, text messages)
  • Auto-save drafts as you type
  • Password strength meters
  • Search suggestions
  • Preventing empty form submissions
// Basic form submit event
const form = document.querySelector('form')

form.addEventListener('submit', function(event) {
event.preventDefault() // Stop page reload
console.log('Form submitted!')
})