Forms & Actions

form POST ไปที่ actions

SvelteKit จัดการการ submit form ด้วย actions — server function ใน +page.server.js ที่รับข้อมูลที่ส่งมา form HTML ธรรมดา <form method="POST"> จะ post ไปหา action นั้น ฟีเจอร์นี้จึงทำงานได้ ก่อน JavaScript จะโหลดด้วยซ้ำ

import { fail, redirect } from '@sveltejs/kit';

export const actions = {
  default: async ({ request, cookies }) => {
    const data = await request.formData();
    const email = data.get('email');
    const password = data.get('password');

    if (!email || !password) {
      // Return a 400 with the values so the form can re-render the error.
      return fail(400, { email, missing: true });
    }

    const user = await authenticate(email, password);
    if (!user) return fail(401, { email, incorrect: true });

    cookies.set('session', user.token, { path: '/' });
    redirect(303, '/dashboard');   // throw a redirect on success
  },
};

<script>
  let { form } = $props();    // the action's returned value (e.g. fail data)
</script>

<form method="POST">
  <input name="email" value={form?.email ?? ''} />
  <input name="password" type="password" />
  {#if form?.incorrect}<p>Wrong email or password</p>{/if}
  <button>Log in</button>
</form>

ค่าที่ action return (รวมถึงข้อมูลจาก fail(...)) มาถึงเป็น form prop ตอนสำเร็จคุณ redirect ตอนล้มเหลวคุณ fail(status, data) เพื่อให้เพจ re-render พร้อม error และเก็บ input ของผู้ใช้ไว้

named actions

หนึ่งเพจมีได้หลาย action — เช่น form login กับ form register ตั้งชื่อให้แต่ละ action แล้วเจาะไปที่ตัวใดตัวหนึ่งด้วย action="?/name":

export const actions = {
  login:    async ({ request }) => { /* … */ },
  register: async ({ request }) => { /* … */ },
};

<form method="POST" action="?/login">…</form>
<form method="POST" action="?/register">…</form>

progressive enhancement ด้วย use:enhance

form ข้างบนทำงานได้อยู่แล้วโดย ไม่มี JavaScript — browser post, server ตอบ, เพจ reload พอเพิ่ม use:enhance จาก $app/forms SvelteKit จะยกระดับให้เป็นการ submit แบบ AJAX ที่ลื่น (ไม่ reload ทั้งหน้า) อัปเดต form prop และ invalidate ข้อมูลของ load ให้อัตโนมัติ — ขณะที่ยังคง fallback แบบไม่มี JS ไว้

<script>
  import { enhance } from '$app/forms';
</script>

<form method="POST" use:enhance>   <!-- works without JS, better with it -->
  …
</form>

flowchart TB
  nojs["ไม่มี JS: browser POST form"] --> server["action รันบน server"]
  js["มี use:enhance: AJAX submit ไม่ reload"] --> server
  server --> result["สำเร็จ redirect หรือ fail data ไป form prop"]

progressive enhancement: ทำงานได้ไม่มี JS ดีขึ้นเมื่อมี

นี่คือลายเซ็นของ SvelteKit: สร้างด้วย form ธรรมดาที่ทำงานได้ทุกที่ แล้วค่อย enhance เพื่อประสบการณ์ที่ดีขึ้น — แทนที่จะเป็น form ที่ใช้ JS อย่างเดียวและพังเมื่อไม่มี JS