表單

表單是網頁收資料的方式

報名社團、登入帳號、搜尋課程、上傳作業，這些都是表單（form）：使用者在網頁上填資料， 按下送出後，瀏覽器把資料打包成一個請求（request）送到伺服器。

表單寫得好不好，差別很大：

這一課從 form 本身開始，依序看各種輸入欄位、資料怎麼送出，以及驗證。

form、action 與 method

<form action="/signup" method="post">
  …欄位…
  <button type="submit">報名</button>
</form>

• action：資料要送到哪個網址。沒寫的話就送回目前這一頁的網址。
• method：用哪一種 HTTP 方法送出，常用的是 get（沒寫時的預設值）與 post。

密碼、個資這類資料不要用 GET，否則會原封不動留在網址與瀏覽紀錄裡。 （POST 只是不放在網址裡，傳輸過程要靠 HTTPS 加密，這部分在優計算的〈全球資訊網與 HTTP〉文章有說明。）

input 的種類與 label

<input> 是空元素，靠 type 決定它是什麼樣的欄位：

每個欄位都要有一個 label（標籤），說明這一格要填什麼。兩種寫法：

<!-- 寫法一：for 對到 input 的 id -->
<label for="email">Email</label>
<input type="email" id="email" name="email">

<!-- 寫法二：把 input 包在 label 裡面 -->
<label>Email <input type="email" name="email"></label>

連起來之後：點 label 的文字就會選到欄位（核取方塊的點擊範圍變大很多），螢幕閱讀器也會唸出欄位的名稱。

placeholder 不能取代 label。placeholder="Email" 是欄位裡的淺灰色提示字，一開始輸入就消失， 使用者打到一半就忘了這格要填什麼；它的顏色通常也很淡，不容易看清楚，螢幕閱讀器也不一定會唸。 placeholder 適合放格式範例（例如「[email protected]」），說明文字一律用 label。

name 與 value：送出去的是什麼

按下送出時，瀏覽器把每個欄位變成一組 name=value：

<input type="text" name="nickname">          <!-- 填了 Amy → nickname=Amy -->
<input type="checkbox" name="course" value="band">   <!-- 勾選 → course=band -->

• name 是這筆資料的名稱，伺服器用它找到資料。沒有 name 的欄位不會送出，填了也一樣。
• 文字欄位的 value 是使用者輸入的內容；核取方塊與選項按鈕的 value 要自己寫。 核取方塊沒寫 value 時，送出的是 course=on，伺服器分不出勾的是哪一個。
• 沒有勾選的核取方塊與選項按鈕不會送出，連 name 都不會出現。
• 停用（disabled）的欄位也不會送出。

選項按鈕（radio）用同一個 name 分成一組，同一組只能選一個：

<fieldset>
  <legend>年級</legend>
  <label><input type="radio" name="grade" value="1"> 大一</label>
  <label><input type="radio" name="grade" value="2"> 大二</label>
</fieldset>

fieldset 把相關的欄位圍成一組，legend 是這一組的標題；螢幕閱讀器唸到「大一」時會一起唸出「年級」。

另外兩種常用的欄位：

<label for="inst">樂器</label>
<select id="inst" name="instrument">        <!-- 下拉選單 -->
  <option value="">請選擇</option>
  <option value="guitar">吉他</option>
  <option value="bass">貝斯</option>
</select>

<label for="intro">自我介紹</label>
<textarea id="intro" name="intro" rows="4"></textarea>   <!-- 多行文字，不是空元素 -->

驗證屬性

HTML 可以直接寫出欄位的規則，送出前瀏覽器會先檢查，不符合就擋下來、不送出，並顯示提示：

兩個細節：

• pattern 會自動比對整個值：[0-9]{9} 只接受剛好 9 個數字，10 個數字也不行。欄位空白時不檢查 pattern，要必填得另外加 required。
• 規則寫在 HTML 裡，最好也在 label 或說明文字告訴使用者，例如「學號（9 碼數字）」，不要讓人送出被擋了才知道。

前端驗證不能取代伺服器端的檢查。 瀏覽器的驗證是為了方便使用者，早一點發現打錯； 但任何人都可以用開發者工具刪掉 required、maxlength，或乾脆不透過網頁、直接把請求送到伺服器。 伺服器收到資料時一定要再檢查一次（格式、長度、權限），這是資訊安全的基本原則。

重點整理

• form 的 action 是送到哪裡、method 是怎麼送：GET 把資料接在網址後面，適合查詢；POST 放在請求本文，適合會改變資料的動作與敏感資料。
• 依資料選 input 的 type（email、password、number、date、checkbox、radio、file…），每個欄位都要有 label；placeholder 只放格式範例。
• 送出的是 name=value：沒有 name、沒勾選、disabled 的欄位都不會送出；選項按鈕用同一個 name 分成一組。
• 用 fieldset＋legend 把相關欄位分組；多行文字用 textarea，下拉選單用 select。
• required、min、max、pattern、maxlength 讓瀏覽器先檢查；伺服器一定要再檢查一次。

下一課講語意化 HTML：用 header、nav、main、article 這些元素說明頁面每一塊的角色。