第五週-後台表單設計

Posted on | In

Form 表單

完整表單傳送： form \ post action到網址 \ name \ submit

大綱

  • 表單三劍客 form label input

  • 要用form 傳輸送出資料，要用type=submit

  • action = 就是將值傳給後端目標接收位置

  • method = post, get 很少用在表單

  • name 為參數名稱

  • input[type=”button”] => 搭配Javascript

  • 用queryString 傳送form ?account=XXX

  • 後端只管name, id 是前端用以增加使用者體驗，與後端無關; ex:點擊帳號字眼focus在輸入框

    1
    2


  • 傳送資料用https, http 網址不安全

1
2
3
4
5
6
7
8
9
post 出去 => ?account=ssdf&nickname=sadfsdf

< form action="/index.html">
  < label for="account">帳號
  < input type="text" placeholder="請輸入帳號" name="account" id="account">
  < label for="nickname">帳號
  < input type="text" placeholder="請輸入帳號" name="nickname" id="nickname">
  < input type="submit" value="送出">
< /form>

表單常用tag / 屬性

[ date ]

  • date的html 標籤是不建議用，因為他在每個瀏覽器的資源不一樣
  • 無法控制他
  • 找套件 jquery\ datepicker \
  • jquery ui

[ tel ]

  • 支援ios \ android
  • 增加使用者體驗

[ select option ]

  • 手機版的樣式有原生select
  • 不要想去改select樣式
  • 假select才能調整樣式

[ 屬性：value、readonly、disabled ]

  • 編輯時：自動帶入用value
  • readonly: 只能讀不能看
  • disabled 禁止做什麼事情，長搭配js

金流表單可參考

  • 綠界
  • 藍新
  • pc momo

CSS reset

  • meyerweb 全部清空
  • normalize 保留基本樣式