实际上，只有一个操作的页面非常罕见。大多数情况下，你需要在页面上执行多个操作。在这个应用中，创建待办事项是不够的 — 我们已经完成了。

¥A page that only has a single action is, in practice, quite rare. Most of the time you’ll need to have multiple actions on a page. In this app, creating a todo isn’t enough — we’d like to delete them once they’re complete.

首先用名为 create 和 delete 的操作替换我们的 default 操作：

¥Begin by replacing our default action with named create and delete actions:

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'));
	}
};

默认操作不能与命名操作共存。

¥[!NOTE] Default actions cannot coexist with named actions.

<form> 元素具有可选的 action 属性，类似于 <a> 元素的 href 属性。更新现有表单以使其指向新的 create 操作：

¥The <form> element has an optional action attribute, which is similar to an <a> element’s href attribute. Update the existing form so that it points to the new create action:

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

action 属性可以是任何 URL — 如果操作是在另一个页面上定义的，则可能会有类似 /todos?/create 的内容。由于操作在此页面上，我们可以完全省略路径名，因此省略前导 ? 字符。

¥[!NOTE] The action attribute can be any URL — if the action was defined on another page, you might have something like /todos?/create. Since the action is on this page, we can omit the pathname altogether, hence the leading ? character.

接下来，我们要为每个待办事项创建一个表单，并带有一个唯一标识它的隐藏 <input>：

¥Next, we want to create a form for each todo, complete with a hidden <input> that uniquely identifies it:

<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>