Handling Forms & User Input

What's missing from this form submission handler?

form.addEventListener('submit', async e => {
  e.preventDefault();
  const formData = new FormData(e.target);
  try {
    const response = await fetch('/api/submit', {
      method: 'POST',
      body: formData
    });
    if (!response.ok) throw new Error('Submission failed');
    form.reset();
  } catch (err) {
    showError(err);
  }
});

Form validation
Error handling
Loading state management
This code lacks loading state management, which is crucial for good UX: 1) Should disable the submit button during submission, 2) Should show a loading indicator to user, 3) Should handle network timeouts appropriately, 4) Should prevent multiple submissions, 5) Should provide visual feedback on success/failure. While the basic error handling is present, the user experience during the async operation could be improved significantly.
CSRF protection

Next Question (15/20)