diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index 10e9c67940e..109f20317a9 100644
--- a/src/content/reference/react-dom/components/form.md
+++ b/src/content/reference/react-dom/components/form.md
@@ -42,27 +42,23 @@ To create interactive controls for submitting information, render the [built-in
#### Caveats {/*caveats*/}
-* When a function is passed to `action` or `formAction` the HTTP method will be POST regardless of value of the `method` prop.
+* When a function is passed to `action` or `formAction` the HTTP method will be POST regardless of the value of the `method` prop.
+* When a function is passed to `action` or `formAction`, React resets all [uncontrolled](/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form) field elements after the action succeeds. See [Preserving form values after submission](#preserve-form-values-after-submission).
---
## Usage {/*usage*/}
-### Handle form submission with an event handler {/*handle-form-submission-with-an-event-handler*/}
+### Handling form submission with an event handler {/*handle-form-submission-with-an-event-handler*/}
-Pass a function to the `onSubmit` event handler to run code when the form is submitted. By default, the browser sends the form data to the current URL and refreshes the page, so call [`e.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) to override that behavior.
+Pass a function to the `onSubmit` event handler to run code when the form is submitted. By default, the browser sends the form data to the current URL and refreshes the page. Call [`e.preventDefault()`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) in your handler to override that behavior.
-This example reads the submitted values with [`new FormData(e.target)`](https://developer.mozilla.org/en-US/docs/Web/API/FormData), which collects every field by its `name`. This keeps the inputs [uncontrolled](/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form). If you instead [control an input with state](/reference/react-dom/components/input#controlling-an-input-with-a-state-variable), read from that state on submit rather than from `FormData`.
```js src/App.js
export default function Search() {
function handleSubmit(e) {
- // Prevent the browser from reloading the page
- e.preventDefault();
-
- // Read the form data
const form = e.target;
const formData = new FormData(form);
const query = formData.get("query");
@@ -86,9 +82,20 @@ Reading form data with `onSubmit` works in every version of React and gives you
-### Handle form submission with an action prop {/*handle-form-submission-with-an-action-prop*/}
+### Handling form submission with an action prop {/*handle-form-submission-with-an-action-prop*/}
+
+Pass a function to the `action` prop to run it when the form is submitted. React calls the function with a [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) object containing the values of every input with a `name` attribute. This means your inputs can be [uncontrolled](/reference/react-dom/components/input#reading-the-input-values-when-submitting-a-form) - no need for `value`/`onChange` pairs, `onSubmit` handler, or `e.preventDefault()`.
+
+When the `action` prop is a [Server Function](/reference/rsc/server-functions), the form is progressively enhanced: submission works before JavaScript loads, and even with JavaScript disabled.
+
+When you pass a function to `action`, React:
+
+* Runs the function in a [Transition](/reference/react/useTransition), keeping the page responsive.
+* Makes the pending state available to child components via [`useFormStatus`](/reference/react-dom/hooks/useFormStatus).
+* Propagates any errors to the nearest error boundary.
+* Resets the form's uncontrolled fields when the function succeeds. To keep their values, see [Preserving form values after submission](#preserve-form-values-after-submission).
-Pass a function to the `action` prop of form to run the function when the form is submitted. [`formData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) will be passed to the function as an argument so you can access the data submitted by the form. This differs from the conventional [HTML action](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action), which only accepts URLs. Unlike `onSubmit`, an `action` runs in a [Transition](/reference/react/useTransition) and calling `e.preventDefault()` isn't needed. After the `action` function succeeds, all uncontrolled field elements in the form are reset.
+Because the Action runs in a Transition, you can also use [`useFormStatus`](/reference/react-dom/hooks/useFormStatus) for submission status, [`useActionState`](/reference/react/useActionState) to manage form state, and [`useOptimistic`](/reference/react/useOptimistic) for optimistic UI.
@@ -109,11 +116,12 @@ export default function Search() {
-### Handle form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
+
+### Handling form submission with a Server Function {/*handle-form-submission-with-a-server-function*/}
Render a `
-
-[//]: # 'Uncomment the next line, and delete this line after the `useOptimistic` reference documentation page is published'
-[//]: # 'To learn more about the `useOptimistic` Hook see the [reference documentation](/reference/react/useOptimistic).'
+To learn more about the `useOptimistic` Hook see the [reference documentation](/reference/react/useOptimistic).
### Handling form submission errors {/*handling-form-submission-errors*/}
@@ -312,7 +318,7 @@ export default function Search() {
-### Display a form submission error without JavaScript {/*display-a-form-submission-error-without-javascript*/}
+### Displaying a form submission error without JavaScript {/*display-a-form-submission-error-without-javascript*/}
Displaying a form submission error message before the JavaScript bundle loads for progressive enhancement requires that:
@@ -320,7 +326,7 @@ Displaying a form submission error message before the JavaScript bundle loads fo
1. the function passed to the `