十一、`<Form>`：提单，不要把浏览器当天敌 - 现代前后端完全指南：软件城市宇宙

这是 Remix 最有辨识度的地方之一。

很多前端工程师已经习惯了：

自己写 onSubmit
event.preventDefault()
再手动 fetch("/api/...")
再手动处理 loading、error、success、跳转

在 Remix 里，很多时候你应该先想：

这不就是一张表单提单吗？为什么不直接用 <Form>？

tsx

import { Form } from "@remix-run/react";

export default function NewShipRoute() {
  return (
    <Form method="post">
      <label>
        船名
        <input name="name" />
      </label>

      <label>
        类型
        <select name="type">
          <option value="cargo">货船</option>
          <option value="passenger">客船</option>
        </select>
      </label>

      <button type="submit">创建船舶</button>
    </Form>
  );
}

<Form> 的价值不是“换个组件名”，而是：

保留 HTML 表单语义
没有 JS 时也能基本工作
JS 加载后自动增强成更顺滑的应用体验
提交后自动进入 Remix 的 action/revalidation 流程

这就是所谓 Progressive Enhancement（渐进增强）。

翻译成港口语言：

就算自动吊机坏了，港口依然能靠人工窗口把货办出去。

这比“JS 一挂整页瘫痪”的系统，稳很多。