データのロードの章では、サーバーからブラウザにデータを取得する方法を学びました。反対方向にデータを送信する必要がある場合もあり、そこで <form> - データ送信のためのWebプラットフォームの方法 - が登場します。

Todoアプリを作ってみましょう。src/lib/server/database.jsにはすでにインメモリデータベースが設定されており、src/routes/+page.server.jsのload関数はcookies APIを使用しているため、ユーザーごとのTodoリストを持つことができますが、新しいTodoを作成するために<form>を追加する必要があります。

<h1>todos</h1>

<form method="POST">
	<label>
		add a todo:
		<input
			name="description"
			autocomplete="off"
		/>
	</label>
</form>

<ul class="todos">

<input>に何かを入力してEnterキーを押すと、ブラウザは（method="POST"属性のため）現在のページにPOSTリクエストを行います。しかし、POSTリクエストを処理するサーバー側のアクションを作成していないため、エラーが発生します。今それを作成しましょう。

import * as db from '$lib/server/database.js';

export function load({ cookies }) {
	// ...
}

export const actions = {
	default: async ({ cookies, request }) => {
		const data = await request.formData();
		db.createTodo(cookies.get('userid'), data.get('description'));
	}
};

requestは標準的なRequestオブジェクトです。await request.formData()はFormDataインスタンスを返します。

Enterキーを押すと、データベースが更新され、新しいデータでページがリロードされます。

fetchコードなどを書く必要がないことに注意してください。データは自動的に更新されます。また、<form>要素を使用しているため、このアプリはJavaScriptが無効になっている場合や利用できない場合でも動作します。