Forms / Named form actions • Svelte Tutorial

Basic SvelteKit Forms Named form actions

単一の action しかないページというものは、実際にはかなりまれです。多くの場合、1つのページに複数の action を持たせる必要があるかと思います。このアプリでは、todo を作成するだけでは不十分で、一度完了した todo を削除したいと思います。

default action を、create と delete という名前を付けた action に置き換えるところから始めましょう。

src/routes/+page.server

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

	delete: async ({ cookies, request }) => {
		const data = await request.formData();
		db.deleteTodo(cookies.get('userid'), data.get('id'));
	}
};

default action と名前付きの action を共存させることはできません。

<form> 要素にはオプションの action 属性があり、これは <a> 要素にとっての href 属性と同じようなものです。新たに追加した create action を呼び出すようにするため、form を書き換えましょう。

src/routes/+page

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

action 属性には任意の URL を指定することができます。別のページで定義されている action を呼び出したければ、/todos?/create のように指定することになるでしょう。ここでは action がこのページにあるため、パス名を完全に省略することができるので、先頭が ? 文字から始まっているのです。

次に、各 todo ごとに、一意な識別子を持つ hidden の <input> を含めた form を作りたいと思います。

src/routes/+page

<ul class="todos">
	{#each data.todos as todo (todo.id)}
		<li>
			<form method="POST" action="?/delete">
				<input type="hidden" name="id" value={todo.id} />
				<span>{todo.description}</span>
				<button aria-label="Mark as complete"></button>
			</form>
		</li>
	{/each}
</ul>

Edit this page on GitHub

previous next

The <form> element Validation

<script>

	let { data } = $props();

</script>

<div class="centered">

	<h1>todos</h1>

	<form method="POST">

		<label>

			add a todo:

			<input

				name="description"

				autocomplete="off"

/>

		</label>

	</form>

	<ul class="todos">

		{#each data.todos as todo (todo.id)}

			<li>

				{todo.description}

			</li>

		{/each}

	</ul>

</div>

<style>

	.centered {

		max-width: 20em;

		margin: 0 auto;

	label {

		width: 100%;

	input {

		flex: 1;

	span {

		flex: 1;

	button {

		border: none;

		background: url(./remove.svg) no-repeat 50% 50%;

		background-size: 1rem 1rem;

		cursor: pointer;

		height: 100%;

		aspect-ratio: 1;

		opacity: 0.5;

		transition: opacity 0.2s;

	button:hover {

		opacity: 1;

	.saving {

		opacity: 0.5;

</style>

show text show editor