HTML Forms：使用者輸入如何變成可提交資料

Learning outcomes

• 能建立 label/input/name 的正確關係。
• 能解釋 submit default behavior。
• 能使用 type/required/min/max 做第一層 UX validation。
• 能說明 client validation 為什麼不能取代 server validation。

1. Form 是資料收集 boundary

<form>
  <label for="title">Course title</label>
  <input
    id="title"
    name="title"
    type="text"
    required
  >

  <button type="submit">
    Save
  </button>
</form>

id 讓 label/DOM selector 對應；name 通常代表 form submission 欄位 key。

2. Input type 表達資料意圖

<input type="email">
<input type="number" min="0" max="100">
<input type="date">
<input type="checkbox">

正確 type 能提供更合適的 Browser UI / validation，但不是 security boundary。

3. Select / textarea

<label for="level">Level</label>
<select id="level" name="level">
  <option value="beginner">Beginner</option>
  <option value="advanced">Advanced</option>
</select>

<label for="note">Note</label>
<textarea id="note" name="note"></textarea>

4. Submit 的 default behavior

傳統 form 會依 action/method 導航提交。之後 JavaScript lesson 會用 submit event + preventDefault() 改成 client-side handling。

<form
  action="/courses"
  method="post"
>
  ...
</form>

5. Browser validation 是 UX，不是 trust boundary

<input
  name="score"
  type="number"
  min="0"
  max="100"
  required
>

使用者可直接用 DevTools、curl、API client 繞過 HTML validation；server 必須重新驗證。

Project checkpoint：Course Profile v2

<form id="interest-form">
  <label for="email">Email</label>
  <input
    id="email"
    name="email"
    type="email"
    required
  >

  <label for="goal">Goal</label>
  <textarea
    id="goal"
    name="goal"
  ></textarea>

  <button type="submit">
    Join
  </button>
</form>

Debug evidence：按 button 就整頁 reload

先確認 button 在 form 裡是否默認 submit、form action/method 是什麼，以及 JavaScript submit handler 是否真的註冊/執行。不要一看到 reload 就先改 CSS。