# 2021 夏季切版直播班 week5 - 表單標籤 ###### tags: `上課筆記` `form` `BS5` `Bootstrap` `SCSS` `Utilities` `網頁切版直播班 - 2021 夏季班` ## week 5~8 課程說明 2021/08/20 第八週上課結束 2021/08/27 彩蛋課程(只有直播不會有錄影檔) 2021/08/29 繳交截止日 2021/09/03 版型發表會 ## 表單標籤 ### form、input、submit 三劍客 * name 屬性為後端傳值、id 為 label 所用 * [w3schools](https://w3schools.com/html/html_forms.asp) * [讓人驚艷的表單設計 Google](https://developers.google.com/web/fundamentals/design-and-ux/input/forms) ### type: * 不同類別主要針對手機使用者體驗去做加強(手機鍵盤) * 設計響應式時需注意的項目(date、tel) * `type="tel"` 電話 輸入數字建議可使用(且支援手機版數字鍵盤) * `type="number"` 數量 選擇數量(會有上下選擇按鍵)，建議不要用 * 日曆類的處理： 1. 不要用原生的 `type="date"`，因為支援度沒有很好 1. 建議使用別人寫好的套件(格式問題都會被解決) 1. date 不要用這個！因為 js 撈出的時區資料格式都會不太一樣 ex. 2021-01-01 或 2021/01/01 ### 表單送出 submit * 送出表單建議使用 `submit`，不要用 `button`(使用率較低，且容易有瀏覽器問題)。 (使用 submit 可以送出整張表單，但 button 則要自己寫 javascript 客製化功能綁定) * submit 可以搭配驗證標籤 `required` 必填 * select option 在 mobile 的侷限 * `label`, `input` 外可以包 `div`(bootstrap也是這樣做)，建議 `label`, `input` 外不要包 `p` 段落(因為 p 段落是用來包文字內容的) ```html= <form action="/index.html" method="post"> <div> <label for="myName">姓名：</label> <input name="myName" id="myName" type="text"> </div> <label for="tel">電話：</label> <input name="tel" id="tel" type="tel"><br> <label for="tel">出生年月日：</label> <input name="tel" id="tel" type="date"><br> <input type="submit" value="表單送出"><br> <button>表單送出</button><br> <select name="area" id="area"> <option value="台北市">台北市</option> <option value="台中市">台中市</option> <option value="高雄市">高雄市</option> </select> </form> ``` ### 原生 select、checkbox、radio 無法改 CSS 樣式 * 手機版、PC版 不同系統各自有內建樣式 * input type="select、checkbox、radio" 改不動樣式 ### 屬性：value、readonly、disabled * `readonly`：僅可閱讀 * `disabled`：不提供修改 * `placeholder`：示意文字 ### form 表單 * 表單設計 => 儲存資料庫資料 * 使用表單 form 傳送資料 * `action=""` 表單要傳送到哪個位置(伺服器/資料庫) ### 傳送資料 method="post/get" * 使用 `post` => 資料傳送給後端 * 使用 `get` => 資料暴露、可被截取的狀態 * 注意：如網站為 http 開頭，就算使用 post，仍有資料暴露的風險。網站要使用 https 才安全。 ## 後台表單設計 ### CSS Reset 差異 * [meyerweb CSS Reset](https://meyerweb.com/eric/tools/css/reset/) -> 清乾淨瀏覽器樣式 * [normalize](https://necolas.github.io/normalize.css/) -> 保留基本與預設樣式 ### CSS Base * CSS Reset ：清除瀏覽器預設樣式 * CSS Base：全站設定 * [Bootstrap Scss 結構](https://github.com/twbs/bootstrap/tree/master/scss) ### Bootstrap 元件概念 * 元件設計上，不會以頁面名稱來命名 * 設計功能樣式以元件以外觀命名 ### BS5 元件介紹 * [按鈕 (Buttons)](https://bootstrap5.hexschool.com/docs/5.0/components/buttons/) * [分頁 (Pagination)](https://bootstrap5.hexschool.com/docs/5.0/components/pagination/) ### 清除 BS5 ul li 樣式 * ul 移除逗點 -> 清除列表實心圓內容 BS5：`list-unstyled` ### 載入 BS5 * [教學連結](https://bootstrap5.hexschool.com/docs/5.0/getting-started/introduction/) * 引入 Bootstrap 放的位置： layout.ejs <head></head>(置於自己的 style.css 之前) * Bootstrap 使用 normalize.css，用 Bootstrap 就不要再次載入 CSS Reset ### Utilities 通用類別 - flex, spacing * util 通用類別(一個小積木) * [通用類別 Flex](https://bootstrap5.hexschool.com/docs/5.0/utilities/flex/) * [通用類別 spacing](https://bootstrap5.hexschool.com/docs/5.0/utilities/spacing/) ### 補充：［helper 資料夾分類］ * helper 1. 做出一個功能，通常都是多個語法組成 1. ＂你永遠記不起來的輔助小功能＂ ex. 圖片取代文字 ex. BS5 的＂工具＂ ### Bootstrap 表單 + util + Btn * [表單 (Forms)](https://bootstrap5.hexschool.com/docs/5.0/forms/form-control/) ### Modal * [互動視窗 (Modal)](https://bootstrap5.hexschool.com/docs/5.0/components/modal/#live-demo) * Modal：HTML 屬性搭配對應 ID 做出彈跳效果 ### 手寫 SCSS 結構參考 ```sass= @import "variable";// 變數 @import "reset"; // reset.css @import "base"; // 全站設定 @import "util"; // 工具類 class，.mb-1、.pr-3 // layout 共同框架,第一層 @import "layout/header"; @import "layout/footer"; @import "layout/menu"; @import "layout/aisde"; // 頁面設計 @import "pages/index"; @import "pages/cart"; ```