HTML 表單 form：action、method 與屬性總覽
<form> 通常是作為一個表單容器的存在，雖然以現在 Ajax 盛行的年代，已不需要直接用此方式，但還是有許多網站還是會以此方式運作。它靠 action 與 method 決定資料送去哪裡、怎麼送。
Ajax
Ajax（Asynchronous JavaScript and XML）是指非同步的 JavaScript 和 XML，可讓網頁應用程式更快速、即時的更新資訊、介面及內容，不需要再重新讀取整個網頁，而讓使用者獲得更好的操作體驗。
<form action="/product.php" method="post">
...
</form>屬性
name
表單名稱，每個表單的名稱不可重複。
action
將資料發送到指定 URL 或某個檔案。
method
資料傳輸的 HTTP 協定，通常為 post、get。
| HTTP 協定 | 說明 |
|---|---|
post | 將資料放在傳輸的封包（Request Body）中並送出。 |
get | 將資料附加到 action 的 URL 或檔案後面，使用 ? 進行分隔。 |
查詢與搜尋適合 get，網址可以被收藏與分享；新增、修改或含有密碼、個資的操作請用 post，資料才不會出現在網址與瀏覽紀錄中。
enctype
當 method 屬性的值為 post，傳送資料到伺服器的編碼方式有下列三種。
| 編碼方式 | 說明 |
|---|---|
application/x-www-form-urlencoded | 預設值 |
multipart/form-data | 如果有附加檔案 type="file" |
text/plain | 文字 |
novalidate
novalidate 為布林屬性，代表此表單不驗證。
target
伺服器回傳後，資料的顯示視窗。
autocomplete
是否啟用瀏覽器自動完成機制。
| 值 | 說明 |
|---|---|
off | 不會自動完成。 |
on | 自動完成。 |
一份完整的表單
<form action="/api/signup" method="post">
<fieldset>
<legend>會員註冊</legend>
<label for="account">帳號</label>
<input type="text" id="account" name="account" required>
<label for="password">密碼</label>
<input type="password" id="password" name="password" minlength="8" required>
<label for="city">居住城市</label>
<select id="city" name="city">
<option value="taipei">台北</option>
<option value="taichung">台中</option>
</select>
<button type="submit">送出</button>
</fieldset>
</form>每個欄位都搭配 <label>，相關欄位用 <fieldset> 群組，送出則交給 <button>。
小提醒
即使送出改由 JavaScript 處理，還是建議保留 <form>。它提供瀏覽器內建驗證、按下 Enter 就送出，也讓輔助工具知道這是一組表單。
常見問題
get 和 post 該怎麼選？
查詢與搜尋用 get，資料會附在網址上，方便加入書籤與分享；新增、修改或含有密碼、個資的請用 post，資料放在封包中，不會出現在網址與瀏覽紀錄裡。
有檔案上傳欄位時要注意什麼？
method 要設成 post，並把 enctype 設為 multipart/form-data，否則伺服器只會收到檔名而不是檔案內容。
前後端分離的專案還需要 form 嗎？
需要。就算送出改由 JavaScript 處理，<form> 仍提供瀏覽器內建驗證、按 Enter 送出、以及讓輔助工具知道這是一組表單，這些都是自己用 <div> 拼不回來的。
novalidate 什麼時候用？
想改用自訂驗證訊息、不要瀏覽器預設提示時才加。加了之後 required 與各種格式驗證都不會擋下送出，驗證責任就全在你自己身上。
