Chapter 97: <form>

Core Idea

React's <form> extends the native element with an action prop that accepts a function (a client function or a Server Function) — submitting the form calls that function with the form's FormData, integrating directly with useActionState/useTransition's Actions model instead of requiring manual onSubmit + preventDefault wiring.

Key Concepts

• action={function}: pass a function instead of a URL string, and React calls it with the submitted FormData when the form submits, automatically wrapping it as a transition (Ch 65) — the form's pending state, error handling, and result naturally integrate with useActionState (Ch 48).
• Progressive enhancement with Server Functions: when action is a Server Function (Ch 111) and JavaScript hasn't loaded yet, the browser performs a real HTML form submission to the server instead — the same action works both with and without client JS, degrading gracefully.
• Automatic form reset on success: for an uncontrolled form (Ch 98's distinction) submitted via a function action, React resets the form fields automatically once the action completes successfully — no manual form.reset() call needed in the common case.
• Still supports the traditional onSubmit + event.preventDefault() pattern (Ch 20) for forms that don't use the Actions model — the function-action approach is additive, not a replacement requirement.

Code Examples

<form action={async (formData) => {
  await submitOrder(formData.get('email'));
}}>
  <input name="email" />
  <button type="submit">Order</button>
</form>

• What it demonstrates: a form whose submission directly triggers an async function via action, receiving FormData without any manual onSubmit/preventDefault wiring.

Key Takeaways

1. Passing a function to action is the modern, Actions-integrated way to handle form submission — it composes directly with useActionState/useOptimistic/useTransition.
2. A Server Function used as action gets real progressive enhancement for free — submission still works before the JS bundle finishes loading.
3. The classic onSubmit/preventDefault pattern remains valid for forms that don't need the Actions integration.

Connects To

• Ch 48 (useActionState): pairs directly with a form's action for reducer-style submission state.
• Ch 111 (Server Functions): the RSC mechanism enabling progressive-enhancement form actions.
• Ch 98 (<input>): the controlled/uncontrolled distinction that determines whether automatic reset applies.