# 第五週直播筆記 by 夏天
---
###### tags `夏天`
---

type → 標籤類型(文字text以及送出submit等)
action → 表單資料要回傳的地方
method → 將資料傳送方式(post/get等)，通常用post
for和id、name互相搭配 → 設計使用者體驗，按下「姓名」後會聚焦在相對應的輸入標籤
後端工程師會抓name的值
value → 顯示預設值， 可刪改，如為「""」則為空值
readonly → 只能讀(但會回傳)
disabled → 關閉無法填寫

type="submit" → 將填寫後表單送出，可以做到驗證 required(一定要填寫)
type="button" → 只是輔助性質，需要自己寫js才會送出，所以不建議使用，通常是按下後刪除或按下後觸發其他動作才會使用button

type的介紹
https://developers.google.com/web/fundamentals/design-and-ux/input/forms

https://www.w3schools.com/html/html_forms.asp

type="date"→建議不要用，因為每個user的格式(ios/Android)不同，後端撈出來的資料形式會無法使用，日期建議用套件去撈，直接去用別人已經寫好的套件
建議使用：https://jqueryui.com/datepicker/

http:// → 千萬不要傳送任何資料，會在傳輸中途被擷取(盜用)
https:// → 加密網站，資料有保障

select option → 下拉選單，無法改css樣式，傳輸方式為把option所選到的value帶回name內回傳
checkbox、radio、select → 無法改css樣式

---
css Base 全站設定
(字體、line-height、fone-size)

*, *::after ,*::before{
box-sizing: border-box;
}

a{
display: block;
text-dectoration: none;
}

ul, ol{
list-style:none;
}

img{
max-width:100%;
height:auto;
}

90%以上元件都會相同的設定

---
layout(grid)

.container{
margin: 0 auto;
}

---

help

---

Utilities 通用類別

此類別為一段語法，和其他元件相組合併用 ex: d-flex jc-center al-end margin padding等

通用單位：通常會以8px為單位
$spacer: 8px;
$spacer-3 : $spacer*3;

設計元件通常用元件名稱為命名，不會以頁面名稱為命名，否則名稱會衝突
(ex: bolg-pagination可能也會放到shopping頁面使用，所以直接叫pagination即可)

---

html屬性是搭配對應id做出效果(js已經有bs5寫好啦，香)

---

helper：重要的小功能，一系列的(一段語法)，酷東西，輔助，通常是多個語法組合
(例如：圖片取代文字；css三角形；mixin等)
.text-hide{

}