diff --git a/src/content/reference/react-dom/components/form.md b/src/content/reference/react-dom/components/form.md
index 10e9c67940e..f0643fdb066 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,22 @@ 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 of `
` and read the `pending` property returned.
Here, we use the `pending` property to indicate the form is submitting.
@@ -266,9 +356,7 @@ export async function deliverMessage(message) {
```
-
-[//]: # '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 +400,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:
@@ -372,28 +460,45 @@ Learn more about updating state from a form action with the [`useActionState`](/
### Handling multiple submission types {/*handling-multiple-submission-types*/}
-Forms can be designed to handle multiple submission actions based on the button pressed by the user. Each button inside a form can be associated with a distinct action or behavior by setting the `formAction` prop.
+A form can have more than one submit button, each running a different action. Set the `formAction` prop on a `