docs(components/form): add Registration Form example (#12123)

* docs(components/form): add Registration Form example

* Apply suggestions from code review

Co-authored-by: Michaël De Boey <[email protected]>

* add missing links

* change labelFor to htmlFor

* Fix link

---------

Co-authored-by: Michaël De Boey <[email protected]>
Co-authored-by: Brooks Lybrand <[email protected]>

Author: 3 people

docs/components/form.md

@@ -373,6 +373,66 @@ You can access those values from the `request.url`
 
 - [useSubmit][usesubmit]
 
+## Registration Form
+
+We can use [Mutation Submissions][mutation-submissions] in registration workflow.
+
+```tsx
+function RegisterForm() {
+  const actionData = useActionData();
+
+  return (
+    <Form method="post">
+      <label htmlFor="name">Name</label>
+      <input type="text" name="name" />
+
+      <label htmlFor="email">Email</label>
+      <input type="email" name="email" />
+
+      <label htmlFor="password">Password</label>
+      <input type="password" name="password" />
+
+      <button type="submit">Register</button>
+
+      {actionData?.error ? (
+        <p>An error occured: {actionData.error}</p>
+      ) : null}
+    </Form>
+  );
+}
+```
+
+When the user submits the form by clicking "Register", the [`action`][action] function is executed. Note that we are accessing the returned value from the [`action`][action] function in our component using [`useActionData`][useactiondata].
+
+```tsx
+<Route
+  path="/register"
+  action={async ({ request }) => {
+    const data = await request.formData();
+
+    const postData = {
+      name: data.get("name"),
+      email: data.get("email"),
+      password: data.get("password"),
+    };
+
+    try {
+      await fakePostRequest(postData);
+      return redirect("/dashboard");
+    } catch (e) {
+      return { error: "Cannot send the request" };
+    }
+  }}
+/>
+```
+
+In the [`action`][action], we then access the form data (`name`, `email` and `password`) using the [`request.formData`][request-formData-method] method. After that, the `POST` request is sent to the server. If it is successful, the user will be redirected to `/dashboard` page. Otherwise, an error message will appear.
+
+**See also:**
+
+- [`useActionData`][useactiondata]
+- [`redirect`][redirect]
+
 [usenavigation]: ../hooks/use-navigation
 [useactiondata]: ../hooks/use-action-data
 [formdata]: https://developer.mozilla.org/en-US/docs/Web/API/FormData
@@ -395,3 +455,7 @@ You can access those values from the `request.url`
 [use-view-transition-state]: ../hooks//use-view-transition-state
 [view-transitions]: https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API
 [relativesplatpath]: ../hooks/use-resolved-path#splat-paths
+[redirect]: ../fetch/redirect
+[action]: ../route/action
+[request-formData-method]: ../guides/form-data
+[mutation-submissions]: #mutation-submissions