Skip to content

Latest commit

 

History

History
49 lines (37 loc) · 5.39 KB

html-form.md

File metadata and controls

49 lines (37 loc) · 5.39 KB
title
HTML / Form

HTML / Form

Validation ??

  • Form data validation - Learn web development | MDN
    • Form validation 的做法有很多種，主要分為 client-side vlidation 及 server-side validation。
    • Client-side validation 發生在資料未送往 server 前，就 instant response 而言，它比 server-side validation 還 user-friendly。可以進一步細分為 JavaScript valication (可自訂) 及 built-in form validation -- HTML5 專屬的功能，通常不需要 JavaScript，但也不能自訂。
    • Server-side validation 發生在資料送到 server 後，雖然比較不友善 (回應沒有 client-side validation 那麼即時)，但 server-side validation 做為最後一條防線，是不能捨棄的；However, server-side validation is your application's last line of defence against incorrect or even malicious data. All popular server-side frameworks have features for validating and sanitizing (消毒) data (making it safe).
    • In the real world, developers tend to use a combination of client-side and server-side validation. 但 client-side validation 會用 JavaScript 還是 built-in form validation 呢??
    • HTML5 有個功能可以幫驗證資料，也不需要用到 script -- 透過 form element 上的 validation attributes，可以描述不同的 rule，當輸入的資料符合所有的 rule 時視為 valid，否則視為 invalid。當 element 為 valid 時，CSS 會套用 :valid pseudo-class 的樣式，按 submit 會送出資料 (如果沒有 JavaScript 擋下的話)，反之常 element 為 invalid 時，CSS 會套用 :invalid pseudo-class 的樣式，此時若使用者試圖送出資料，會被 browser 擋下來並提示 error message；在 Chrome 上發現，一次只會提醒一個 invalid 的欄位，有點煩。
    • Validation constraints on input elements — starting simple 開始說明一些 validation attributes 的用法，例如 required、pattern 等 #ril
    • Customized error messages 提到 built-in form validation 發生錯誤時的表現方式會因 browser 而異 (且語言會跟著 browser local 走)，HTML5 是有提供 constraint validation API 可以改變 message，但表現方式還是不能自訂。
  • Validating forms using JavaScript - Form data validation - Learn web development | MDN #ril
    • 第一個範例就直接用了 <form novalidate>，novalidate attribute 可以停用 browser 的 automatic validation，讓我們的 script 可以完全控制 validation，但它並不會影響 constraint validation API 及 CSS pseudo-class (:valid、:invalid、:in-range、:out-of-range 等) 的效用。

如何送出同名的多個 elements??

<form action="http://mysvr/search" method="get">
  <input type="checkbox" name="categories" value="dev" checked> Development
  <input type="checkbox" name="categories" value="life"> Life
  <input type="submit">
</form>

同時勾選 Development 與 Life 按 Submit 後，URL 會呈現 http://mysvr/search?categories=dev&categories=life，而非 ?categories=dev,life。

application/x-www-form-urlencoded, multipart/form-data ??

Redirect After Post (RAP) ??

  • 對後端產生異動之後的回應，務必要實現 RAP；除了避免使用者重整頁面造成異動重複發出的問題之外，也讓使用者沒有機會拿到該 URL 去 bookmark 起來，如果被網路機器人拿到更糟, 它會不斷發出不適當的要求，產生一連串不必要的錯誤。

參考資料：