---
# System prepended metadata

title: 2021 夏季切版直播班 week5 - 表單標籤
tags: [BS5, 上課筆記, form, SCSS, Utilities, Bootstrap, 網頁切版直播班 - 2021 夏季班]

---

# 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"; 
```