# 第五週｜課程直播｜切版班 by Sz
###### tags: `Sz` `第五週` `直播筆記` `2021夏季切版班`

[【總】小組任務｜2021夏季切版班 Team13](/GrA9x5TMQoGuIhR8xF7eyg)

## 行程
## 校長批改記錄
[洧杰老師批改眼鏡官網 SCSS 評論](https://hackmd.io/48BTVPQVR_y4jq2E0PFHXQ?view)

## input

<input type="text">

<input type="submit" value="表單送出">

### type
限制輸入內容類型

// 例如 date, tel, number

#### date 不建議
格式、時區不一樣，通常會用套件
例如 datepicker (jQuery)
### name
20:17的部份重聽
後端都是看 name，在網址上也會顯示
### value

<input value="ddd" disabled>
<!-- readonly 也可以，比較少用 -->

已經輸入的內容不給改
## form

<form action="/index.html" method="post">

### action
資料傳到哪，例如資料庫
### method
傳輸方式 post, get
## label

<label for="myName">姓名</label>
<input type="text" id="myName">

按在label範圍就可以直接 focus 在 該 input 可以直接輸入

## 統整
form 包起來
要記得寫 name 後端傳輸用重要
## 問答
想要問submit的input跟使用button標籤的差別
>建議用 input

老師請問每一個label input外面會建議包一個div嗎? <div> label input </div>
>good
>不包p

想問get和post的差別是要看後端需要哪一種嗎?
>傳資料給後端 post，https 也需要，才不會裸奔
>get 就是裸奔

>GET 就像明信片，大家都可以看到你的信的內容
>POST 就像寄信放信封一樣，只有收件者能看到你的內容

哪個最細心阿
>金流網站最細心
>綠界藍心
>金流御三家 - 紅綠藍

請問老師，為什麼 selcet 不是 name 的值 會傳到後端？
>name對應的 value

請問input type=“button”和submit差在哪呢
> button 在有 JS 客製化 event 時用
> submit 就會送出了

Submit 可以搭配驗證嗎
>可
>html form variation

<input name="111" required>

>必填欄位
>其實很少用，通常會刻其他樣式

## select
傳給後端的資料看 value
點選的地方可以改
但下拉選單改不動
手機版的內建改不動

## checkbox
也很難改，隱藏按鈕還是可以改，但很難改，還有不同載具的差別
隱藏 checkbox 按鈕
然後放一個div 在旁邊設定圖片

## 改樣式
改得動電腦版也改不動手機原生

## 獎品與加碼內容
加碼課程
徽章：四周＋小組四周

直播菁英團
彩蛋課程
https://courses.hexschool.com/p/43737a


## reset 與 normalize
看配合的設計師

## base
全站設定
整個網站都要套用的設定
bs 叫做 reboot

base 的裡面是只有對 html 標籤設定嗎，還是也會有寫在 class 上的樣式

// _base.scss 
h2, .h2 {
    // 樣式樣式
}

也有這樣的寫法，這樣 .h2 也可以套用到 p 之類的標籤上

### 範例
勉強可以，建議到 layout

放 base 比較好，reset 也可
reset 還是定義為瀏覽器樣式清空

## grid
.container 放這

## utilites
### 問
但這樣在做RWD的時候會比較不好修改嗎?
RWD的時後，mb不是5的話，怎麼辦?
> bs都會給你答案！！！

為了不寫重複的 css

BS下載後 丟進自己的STYLE就可以開始用了嗎?
>yes，但通常會想要客製化XD

## component
不會以位置名稱來命名
### card 的樣式要自己寫可以特別拿出來問老師

card樣式＋子樣式

## bs form
將 a 跟 input[type="submit"]的樣式統一了，好厲害
下班比較重要

## modal
https://bootstrap5.hexschool.com/docs/5.0/components/modal/#live-demo

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

## helper
mixin
圖片取代文字
一連串記不起來的util

mixin 漸漸被 util 取代掉了

## 作業精力分配
可以繼續做 3-4周
第五週可以放一放
6,8才是主力～