Form submission

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

1. Explain why submit belongs on the form rather than the button
2. Write a submit handler that prevents the default and reads the values
3. Show pending and result states around the request

In practice

A few lines that show Form submission doing its job.

function Login() {
  const [pending, setPending] = useState(false);
  async function onSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    setPending(true);
    try {
      await login(String(data.get("email")), String(data.get("password")));
    } finally {
      setPending(false);
    }
  }
  return <form onSubmit={onSubmit}>...<button disabled={pending}>Sign in</button></form>;
}

The common mistake

What to know first

Your roadmap puts these before Form submission, unless you already know them.

• Controlled inputs

How it stays learned

Once a session shows you understand Form submission, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

1. Day 3First recall, while it is fresh
2. Day 7Second, a week on
3. Day 18Last, when it has settled

Where it leads

Topics that build on Form submission.

• Validation feedback