frontend 學習筆記 - form

2022-07-08

2 minute read

建立 form

<form>
- action: 後面要放的是 url，代筆要送資料去處理的地方
- method: 送這個 form 的 http request method
<input>
- type: 輸入的形式，可以是
  - radio: 圓圓的選擇按鍵
    - checked: 預設選起來的選項
  - checkbox: 可以打勾的清單符號
    - checked: 預設選起來的選項
  - text: 文字
  - number: 數字
  - email: 就是 email
  - password: 會自動把使用者輸入用 * 遮掉
  - date: 日期
  - url: 網址
- placeholder: 在輸入框內提示你的輸入應該會長怎樣
- name: 資料放在 form control 後的 reference
- required: 必須填寫
- title: 可以提供 validation msg
<label>
- for: 這個屬性要跟搭配的 <input> 的 id 一樣
<textarea>: 給使用者寫文字的地方，可以調整長寬也可以預先輸入文字
<select>: 選單
- <option>: 就是選單裡面的選項
  - value: 會傳到 server 的值
  - selected: 預設選起來的選項
- <optgroup>: 選單裡面的大類別
  - label: 顯示給使用者看的大類別
<button>
- type
  - submit: 預設值，會送出 form
  - reset: 重設 form
  - button: 最 general 的一種
<fieldset>: 可以把相關的 form 弄在一起
<legend>: fieldset 中顯示給使用者看這個 fieldset 的主題

text validation
- minlength
- maxlength
- pattern: 吃 regex 來判斷 (regex 另一份教學)
number validation
- min
- max

可以用 :valid 跟 :invalid 這兩個 pseudo class 來做