docs: Form example improvement and removed unused type references (#1184

)

fixing the FIXME for the server form with a more robust form example

also removed the type references since they didn't seem to do anything

Co-authored-by: Tyler <[email protected]>

examples/36_form/src/components/Counter.tsx

@@ -1,6 +1,3 @@
-/// <reference types="react/canary" />
-/// <reference types="react-dom/canary" />
-
 'use client';
 
 import { useActionState } from 'react';

examples/36_form/src/components/Form.tsx

@@ -1,6 +1,3 @@
-/// <reference types="react/canary" />
-/// <reference types="react-dom/canary" />
-
 'use client';
 
 import { useFormStatus } from 'react-dom';

examples/36_form/src/components/ServerForm.tsx

@@ -1,27 +1,62 @@
-async function requestUsername(formData: FormData) {
+async function submitUserProfile(formData: FormData) {
   'use server';
-  const username = formData.get('username');
-  console.log(`username: ${username}`);
+  const name = formData.get('name');
+  const age = formData.get('age');
+  const favoriteColor = formData.get('favoriteColor');
+  const hobby = formData.get('hobby');
+  const isSubscribed = formData.get('newsletter') === 'on';
+
+  console.log({
+    name,
+    age,
+    favoriteColor,
+    hobby,
+    isSubscribed,
+  });
 }
 
-// FIXME make this example more realistic
 export const ServerForm = () => {
   return (
-    <>
-      <form action={requestUsername}>
-        <input type="text" name="username" />
-        <button type="submit">Request</button>
-      </form>
-      <form
-        action={async (formData: FormData) => {
-          'use server';
-          const hobby = formData.get('hobby');
-          console.log(`hobby: ${hobby}`);
-        }}
-      >
-        <input type="text" name="hobby" />
-        <button type="submit">Request</button>
-      </form>
-    </>
+    <form action={submitUserProfile} className="space-y-4">
+      <div style={{ display: 'flex', gap: 4, marginBottom: 4 }}>
+        <label htmlFor="name">Full Name</label>
+        <input type="text" name="name" id="name" required />
+      </div>
+
+      <div style={{ display: 'flex', gap: 4, marginBottom: 4 }}>
+        <label htmlFor="age">Age</label>
+        <input type="number" name="age" id="age" min="13" max="120" />
+      </div>
+
+      <div style={{ display: 'flex', gap: 4, marginBottom: 4 }}>
+        <label htmlFor="favoriteColor">Favorite Color</label>
+        <select name="favoriteColor" id="favoriteColor">
+          <option value="red">Red</option>
+          <option value="blue">Blue</option>
+          <option value="green">Green</option>
+          <option value="purple">Purple</option>
+          <option value="yellow">Yellow</option>
+        </select>
+      </div>
+
+      <div style={{ display: 'flex', gap: 4, marginBottom: 4 }}>
+        <label htmlFor="hobby">Favorite Hobby</label>
+        <input
+          type="text"
+          name="hobby"
+          id="hobby"
+          placeholder="e.g. Reading, Gaming, Cooking"
+        />
+      </div>
+
+      <div style={{ display: 'flex', gap: 4, marginBottom: 4 }}>
+        <label>
+          <input type="checkbox" name="newsletter" />
+          Subscribe to newsletter
+        </label>
+      </div>
+
+      <button type="submit">Save Profile</button>
+    </form>
   );
 };