古法前端入门

这次要做的是 form.html，也就是申请表单页面。内容如下。

• 申请内容 ── 事由（必填）
• 支付方式 ── 个人垫付，还是公司卡
• 明细 ── 日期・类别・内容・金额・币种，最多 3 行（能增加行要到第 8 讲）
• 收据 ── 图片或 PDF。合计 3 万日元以上必须上传（让表单遵守这条规则要到第 9 讲）
• 备注与确认 ── 备注栏、已阅读规定的复选框、“保存草稿”“提交申请”按钮

表单用 <form> 把输入框和按钮包起来。按下按钮后，浏览器会按以下顺序工作。

区分的标准是：只是“查看”数据用 GET，“登记・修改”用 POST。像搜索那样希望同一个 URL 得到同样结果时，GET 很方便；但登记申请要用 POST。因为 GET 会把输入内容原样留在 URL 里，还会记进浏览器的历史记录。

输入框有两种“名字”：一种是给人看的名字（label），另一种是交给服务器的名字（name）。

开头新井高兴的“输入框里的浅色字”，是 placeholder 属性。拿它代替 label，会怎样呢？

除了外观，我们也比较了浏览器生成的无障碍树（用 Playwright 取出的实际输出）。

# ① 只有 placeholder
- paragraph:
  - textbox "事由": 大阪出差（交通费・住宿费）
- paragraph:
  - textbox "内容"
- paragraph:
  - spinbutton
- paragraph:
  - button "提交申请"

# ② 加了 label 的版本
- paragraph:
  - text: 事由
  - textbox "事由": 大阪出差（交通费・住宿费）
- paragraph:
  - text: 内容
  - textbox "内容"
- paragraph:
  - text: 金额
  - spinbutton "金额"
- paragraph:
  - button "提交申请"

Chrome 有时会拿 placeholder 当名字用，但 ① 的金额栏（type="number"）名字消失了，只剩一个 spinbutton。W3C 的无障碍指南也指出：placeholder 不能代替 label。理由是：一开始输入它就消失，颜色浅不易阅读，各种辅助技术的处理也不一致。

大多数输入框都是 <input>，用 type 属性切换种类。下面列出报销系统用到的控件。

明细是在上一讲的 table 里放入输入框做成的。它是有行有列的数据，做成表格最自然。

<tr>
  <td><input type="date" name="date" aria-label="第 1 行的日期" required></td>
  <td><select name="category" aria-label="第 1 行的类别" required>…</select></td>
  <td><input type="text" name="item" aria-label="第 1 行的内容" required></td>
  <td><input type="number" name="amount" aria-label="第 1 行的金额" min="1" step="1" required></td>
  <td><select name="currency" aria-label="第 1 行的币种">…</select></td>
</tr>

• aria-label ── 表格里的输入框旁边没地方放 label。列标题虽然看得见，但要用 aria-label 给它加上读屏用的名字（“第 1 行的金额”等）
• 3 行的 name 都相同 ── 有 3 个 name="amount" 时，服务器会收到并排的 3 个 amount。第几行靠顺序区分（第九章看实物）
• 只有第 1 行 required ── 明细至少 1 行，第 2、3 行可以空着

收据用 type="file"。

<input type="file" id="receipt" name="receipt" accept="image/*,.pdf" multiple>

accept 用来筛选选择文件时显示的种类（图片和 PDF），multiple 表示可以一次选多个文件。要发送文件内容，form 上必须同时有 method="post" 和 enctype="multipart/form-data"。缺了任何一个，送到的就只有文件名。

按钮用 <button> 来做，type 决定它的作用。

本讲的表单有两个提交按钮，都是 name="action"，value 分别为 draft（保存草稿）和 submit（提交申请）。只有被按下的按钮的 value 会被发送，服务器据此区分“是草稿还是申请”。保存草稿的按钮加上了 formnovalidate，这样必填栏空着也能保存。

把前面的控件组合起来，就是 form.html 的全貌。header 和 footer 沿用上一讲 index.html 里的。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>新建申请 | 报销系统</title>
</head>
<body>
  <header>
    <p><a href="/"><img src="img/logo.svg" alt="" width="32" height="32"> 报销系统</a></p>
    <nav>
      <ul>
        <li><a href="/">申请列表</a></li>
        <li><a href="approve.html">审批</a></li>
        <li><a href="dashboard.html">仪表盘</a></li>
      </ul>
    </nav>
    <p>新井 太郎（申请人）</p>
  </header>

  <main>
    <h1>新建申请</h1>
    <p><a href="/">← 返回申请列表</a></p>

    <form action="/api/expenses" method="post" enctype="multipart/form-data">
      <fieldset>
        <legend>申请内容</legend>
        <p>
          <label for="title">事由（必填）</label><br>
          <input type="text" id="title" name="title" required maxlength="50">
        </p>
      </fieldset>

      <fieldset>
        <legend>支付方式</legend>
        <label><input type="radio" name="payment" value="personal" checked> 个人垫付</label>
        <label><input type="radio" name="payment" value="corporate"> 公司卡</label>
      </fieldset>

      <fieldset>
        <legend>明细</legend>
        <table>
          <caption>明细（最多 3 行。增加行在第 8 讲）</caption>
          <thead>
            <tr><th scope="col">日期</th><th scope="col">类别</th><th scope="col">内容</th><th scope="col">金额</th><th scope="col">币种</th></tr>
          </thead>
          <tbody>
            <tr>
              <td><input type="date" name="date" aria-label="第 1 行的日期" required></td>
              <td><select name="category" aria-label="第 1 行的类别" required><option value="">请选择</option><option value="transport">交通费</option><option value="hotel">住宿费</option><option value="meeting">会议・招待费</option><option value="supplies">消耗品</option><option value="other">其他</option></select></td>
              <td><input type="text" name="item" aria-label="第 1 行的内容" required></td>
              <td><input type="number" name="amount" aria-label="第 1 行的金额" min="1" step="1" required></td>
              <td><select name="currency" aria-label="第 1 行的币种"><option value="JPY">日元</option><option value="USD">美元</option></select></td>
            </tr>
            <tr>
              <td><input type="date" name="date" aria-label="第 2 行的日期"></td>
              <td><select name="category" aria-label="第 2 行的类别"><option value="">请选择</option><option value="transport">交通费</option><option value="hotel">住宿费</option><option value="meeting">会议・招待费</option><option value="supplies">消耗品</option><option value="other">其他</option></select></td>
              <td><input type="text" name="item" aria-label="第 2 行的内容"></td>
              <td><input type="number" name="amount" aria-label="第 2 行的金额" min="1" step="1"></td>
              <td><select name="currency" aria-label="第 2 行的币种"><option value="JPY">日元</option><option value="USD">美元</option></select></td>
            </tr>
            <tr>
              <td><input type="date" name="date" aria-label="第 3 行的日期"></td>
              <td><select name="category" aria-label="第 3 行的类别"><option value="">请选择</option><option value="transport">交通费</option><option value="hotel">住宿费</option><option value="meeting">会议・招待费</option><option value="supplies">消耗品</option><option value="other">其他</option></select></td>
              <td><input type="text" name="item" aria-label="第 3 行的内容"></td>
              <td><input type="number" name="amount" aria-label="第 3 行的金额" min="1" step="1"></td>
              <td><select name="currency" aria-label="第 3 行的币种"><option value="JPY">日元</option><option value="USD">美元</option></select></td>
            </tr>
          </tbody>
        </table>
      </fieldset>

      <fieldset>
        <legend>收据</legend>
        <p>
          <label for="receipt">收据图片或 PDF（合计 3 万日元以上必须上传）</label><br>
          <input type="file" id="receipt" name="receipt" accept="image/*,.pdf" multiple>
        </p>
      </fieldset>

      <p>
        <label for="note">备注</label><br>
        <textarea id="note" name="note" rows="3" cols="40" maxlength="500"></textarea>
      </p>

      <p>
        <label><input type="checkbox" name="agree" value="yes" required> 已阅读费用报销规定（必填）</label>
      </p>

      <p>
        <button type="submit" name="action" value="draft" formnovalidate>保存草稿</button>
        <button type="submit" name="action" value="submit">提交申请</button>
      </p>
    </form>
  </main>

  <footer>
    <p><small>© 2026 KIJI 报销系统（练习用）</small></p>
  </footer>
</body>
</html>

上一讲申请列表里“＋ 新建申请”的链接，指向的就是这个页面。两者终于可以来回跳转了。

什么都不填就按“提交申请”，浏览器会在第一个空栏旁弹出提示，并阻止提交。我们从浏览器里取出了各栏的提示（中文设置下 Chromium 的实际文字）。

事由（必填）  →  请填写此字段。
第 1 行的日期  →  请填写此字段。
第 1 行的类别  →  请在列表中选择一项。
第 1 行的内容  →  请填写此字段。
第 1 行的金额  →  请填写此字段。
已阅读费用报销规定（必填）  →  如果要继续，请选中此框。
金额填 0  →  值必须大于或等于 1。
金额填 12.5  →  请输入有效值。两个最接近的有效值分别为12和13。

一行 JavaScript 都没写，就有这么多检查在起作用。只用 HTML 能做的检查如下。

最后，来看看按下按钮的瞬间发送了什么。先把发送方式改成 GET 试试（把目标改成 /echo 后的实际 URL。只显示前半段，下面是还原成可读形式的内容）。

/echo?title=%E5%A4%A7%E9%98%AA%E5%87%BA%E5%B7%AE%EF%BC%88%E4%BA%A4%E9%80%9A%E8%B4%B9%E3%83%BB%E4…

title = 大阪出差（交通费・住宿费）
payment = personal
date = 2026-10-15
category = transport
item = 新干线（东京→新大阪）
amount = 14720
currency = JPY
…（第 2、3 行也以同样的 date・category・item・amount・currency 名称继续）…
receipt = receipt.pdf
note = 与客户 A 公司开会
agree = yes
action = submit

name 和输入的值组成 name=value，用 & 连在 URL 后面。中文会被转换成 %E5%A4… 的形式（URL 编码）。而且，receipt 只有“receipt.pdf”这个名字。GET 发送不了文件内容。

接着是用原本的 POST（multipart/form-data）发送时，服务器收到的正文。我们用一个在云端搭建、只负责记录收到内容的小服务器来接收（较长部分已省略）。

POST /api/expenses HTTP/1.1
Content-Type: multipart/form-data; boundary=----WebKitFormBo…

------WebKitFormBoundaryYE…
Content-Disposition: form-data; name="title"

大阪出差（交通费・住宿费）
------WebKitFormBoundaryYE…
Content-Disposition: form-data; name="payment"

personal
…（明细的 date・category・item・amount・currency 共 3 行）…
------WebKitFormBoundaryYE…
Content-Disposition: form-data; name="receipt"; filename="receipt.pdf"
Content-Type: application/pdf

%PDF-1.4
% demo receipt
%%EOF
------WebKitFormBoundaryYE…
Content-Disposition: form-data; name="note"

与客户 A 公司开会
------WebKitFormBoundaryYE…
Content-Disposition: form-data; name="agree"

yes
------WebKitFormBoundaryYE…
Content-Disposition: form-data; name="action"

submit
------WebKitFormBoundaryYE…--

每一栏用分隔线（boundary）隔开，receipt 部分装的是文件内容本身。最后是什么都不填、直接按“保存草稿”时收到的内容（整理成可读形式）。

title = （空）
payment = personal
date = （空）
category = （空）
item = （空）
amount = （空）
currency = JPY
receipt = （空）
note = （空）
action = draft
…明细第 2〜3 行也是空的。agree（复选框）没有被发送

• 跳过检查送达了 ── 多亏 formnovalidate，必填栏空着也发送了。服务器看到 action=draft，判断“是草稿，空着也行”
• 空栏也会作为“空”送达 ── title、amount 等只有名字、值为空
• 没勾选的复选框，连名字都不会发送 ── agree 整个不见了。服务器需要把“没有 agree”理解为“没勾选”