belindas-closet-nextjs_13_553_form-page (#554)

* draft PR * commit message * form page creation * fix unescaped entities issue * Create package-lock.json --------- Co-authored-by: Keiffer <[email protected]>
SeattleColleges · Nov 18, 2024 · e4311fb · e4311fb
1 parent 5e987b8
commit e4311fb
Showing 1 changed file with 59 additions and 0 deletions.
diff --git a/app/form-page/page.tsx b/app/form-page/page.tsx
@@ -0,0 +1,59 @@
+'use client'
+import { useState, ChangeEvent, FormEvent } from 'react';
+
+interface FormData {
+  name: string;
+  gender: string;
+  email: string;
+  size: string;
+}
+
+export default function FormPage() {
+  const [formData, setFormData] = useState<FormData>({
+    name: '',
+    gender: '',
+    email: '',
+    size: '',
+  });
+
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData({ ...formData, [name]: value });
+  };
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log('Form submitted:', formData);
+  };
+
+  return (
+    <div>
+      <h1>Belinda&apos;s Closet Student Form</h1>
+      <form onSubmit={handleSubmit}>
+        <label>
+          Name:
+          <input type="text" name="name" value={formData.name} onChange={handleChange} />
+        </label>
+        <br />
+        <label>
+          Gender:
+          <input type="text" name="gender" value={formData.gender} onChange={handleChange} />
+        </label>
+        <br />
+        <label>
+          Email:
+          <input type="text" name="email" value={formData.email} onChange={handleChange} />
+        </label>
+        <br />
+        <label>
+          Size:
+          <input type="text" name="size" value={formData.size} onChange={handleChange} />
+        </label>
+        <br />
+        <button type="submit">Submit</button>
+      </form>
+    </div>
+  );
+}
+