Clarify form submission handling and examples

src/content/reference/react-dom/components/form.md

@@ -48,26 +48,34 @@ To create interactive controls for submitting information, render the [built-in
 
 ## Usage {/*usage*/}
 
-### Handle form submission on the client {/*handle-form-submission-on-the-client*/}
+### Preventing unwanted form reset
 
-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. After the `action` function succeeds, all uncontrolled field elements in the form are reset.
+When a function is passed to the `action` prop, uncontrolled form fields are automatically reset after a successful submission.
 
-<Sandpack>
+If you need to preserve the form input values, you can control the inputs using React state or use `onSubmit` with `event.preventDefault()`.
 
-```js src/App.js
-export default function Search() {
-  function search(formData) {
-    const query = formData.get("query");
-    alert(`You searched for '${query}'`);
+```jsx
+import { useState } from "react";
+
+export default function Form() {
+  const [value, setValue] = useState("");
+
+  function handleSubmit(e) {
+    e.preventDefault();
+    // handle submit without resetting input
   }
+
   return (
-    <form action={search}>
-      <input name="query" />
-      <button type="submit">Search</button>
+    <form onSubmit={handleSubmit}>
+      <input
+        name="query"
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+      />
+      <button type="submit">Submit</button>
     </form>
   );
 }
-```
 
 </Sandpack>