# Forms & Creating Records from the UI The user-facing side of **Create** is a form. Done well, it validates early, handles errors, and never double-submits. ## A Controlled Form ```tsx "use client"; import { useState } from "react"; export function NewTaskForm({ onCreated }: { onCreated: (t: Task) => void }) { const [title, setTitle] = useState(""); const [submitting, setSubmitting] = useState(false); const [error, setError] = useState(null); async function handleSubmit(e: React.FormEvent) { e.preventDefault(); setSubmitting(true); setError(null); try { const res = await fetch("/api/v1/tasks", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title }), }); if (!res.ok) { const body = await res.json(); throw new Error(body.error?.message ?? "Failed to create task"); } const { data } = await res.json(); onCreated(data); setTitle(""); } catch (err) { setError((err as Error).message); } finally { setSubmitting(false); } } return ( ); } ``` ## Three Things This Form Gets Right 1. **Disables the button while submitting** — prevents double-creates. 2. **Surfaces server errors** — the user sees *why* it failed. 3. **Clears on success** — ready for the next entry. ## Validate on the Client AND the Server Client validation is for **UX** (instant feedback). Server validation is for **safety** (it's the only one an attacker can't bypass). Do both — reuse the same Zod schema on both sides if you can. ## Server Actions: Forms Without fetch In Next.js you can post a form straight to a server function — progressive enhancement, works without JS: ```tsx ```