Forms
For stronger resiliency and user experience, Fresh relies on native browser
support for form submissions with the HTML <form>
element.
In the browser, a <form>
submit will send an HTML action (usually GET
or
POST
) to the server, which responds with a new page to render.
multipart/form-data
POST request with Forms can either submit as a GET
request with URL search parameter encoding,
or as a POST
request with multipart/form-data
.
This example demonstrates how to handle multipart/form-data
<form>
submissions:
// routes/subscribe.tsx
import { Handlers } from "$fresh/server.ts";
export const handler: Handlers = {
async GET(req, ctx) {
return await ctx.render();
},
async POST(req, ctx) {
const form = await req.formData();
const email = form.get("email")?.toString();
// Add email to list.
// Redirect user to thank you page.
const headers = new Headers();
headers.set("location", "/thanks-for-subscribing");
return new Response(null, {
status: 303, // See Other
headers,
});
},
};
export default function Subscribe() {
return (
<>
<form method="post">
<input type="email" name="email" value="" />
<button type="submit">Subscribe</button>
</form>
</>
);
}
When the user submits the form, Deno will access a specific email
value from a
formData()
, add the email to a list, and redirect the user to a thank you
page.