# 第五堂 表單設計

本頁連結：https://hackmd.io/JBwctVhIT9CPSvsrlFPUWg

#### 1. AAPD 合作說明


#### 這是什麼活動：

你將有機會體驗與設計師協作並實際參與開發上線產品的過程，這將會是一次難得知識的實踐與經驗累積，讓你能夠站在第一線深入了解設計與工程的合作模式將想法落地。

#### 參加條件：
- 報名條件：完成第四堂課多頁式網頁 LV 2 （完成 4 頁含 RWD 且包含首頁）
- 組別人數：
- 一組 2-3 位工程師

#### 關鍵時程：
- 8/1：第六堂課開放正式報名表單填寫
- 8/7：正式報名表單截止
- 8/8：完成分組、配對組別
- 8/12：開營典禮 (雙方共同辦理)
- 8/13：工程師團隊開始切初版
- 8/31：工程師團隊完成切初版
- 9/21：研發營成果發表日 (六角主辦)

會做出怎樣的東西？參考：https://aapd.com.tw/uibc-2025

如果有興趣，請在 8/7 前填寫意願表單：

> 在參與前，建議掌握 Git 技能

### 2. 課程獎勵說明

- 50%：**8/4** 前超過 100 人挑戰成功，全班直播加碼一年（**～2027/8/30**）
- 60%：菁英班 DLC 切版影音課程
- 80%：菁英班直播一場（8/29） - 【原子化設計】Tailwind 使用教學（v4 +）
- 90%：抽 711 拿鐵 10 份
- 100%：切版直播班學霸獎狀

任務繳交期限：8/24(日) 23:59:59

更多說明可參考：https://hackmd.io/51ijGrBfRyWWHWciVmKNRQ

### 3. 同學之間的分享會
[同學們的分享會](https://hackmd.io/KxDPrWN5QhydzU6QCmw-3A)
可以分享的主題：
- 陪伴寫作業 ✅
- 筆記工具推薦 ✅
- 個人學習方式 ✅
- 工作經驗分享 ✅
- 個人的休閒、減壓方式 ✅
- 直播帶貨、個人政治傾向辯論 ❌

## input 表單標籤

請不要這麼做：https://goulartnogueira.github.io/BadUI/

表單基本知識：

- input 常見種類與屬性介紹
- form、input、button 三劍客
- name 屬性為後端傳值、id 為 label 所用
- [w3schools](https://www.w3schools.com/html/html_forms.asp)
- [MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input)
- 注意：id 在頁面中是唯一的
- 設計響應式時需注意的項目(date、tel)
- date 在桌面版可以使用其他套件
- tel、email 等請盡可能用現成的 type
- button 請正確設置 type
- select 與 type checkbox、Radio
- 屬性：
- value
- placeholder
- readonly
- disabled
- required -> 簡易驗證

type 在行動版上的影響：


其他常見問題：

- Select 的 Option 可以改樣式嗎？
- input id 一定要對 label for 嗎？
- button 一定要加入 type 嗎？

有趣的表單：https://chillcomponent.codlin.me/

### 表單樣式撰寫重點

- input 需要與 button 一樣的高度（往後對其一致
- 需要包含其狀態
- 基礎：
- input 包含 focus
- button 包含 hover、active 等
- 進階：
- 包含錯誤樣式

## 載入 BS5

- [教學連結](https://getbootstrap.com/docs/5.3/getting-started/introduction/)
- [影音課程](https://courses.hexschool.com/courses/20201122111/lectures/60728211)

### CSS 全域設置

https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss

### Bootstrap 結構概念

https://github.com/twbs/bootstrap/blob/main/scss/bootstrap.scss

1. CSS Normalize
2. Content
3. Grid System
4. **Component**
5. **Helpers**
6. **Utilities**

### Bootstrap 元件運用概念

> OOCSS
>
1. 容器與內容分離
2. 結構與樣式分離

範例1：

<button type="button" class="btn btn-primary">Primary</button>

範例2 - 額外樣式：

<button type="button" class="btn btn-primary btn-lg">Large button</button>

範例3 - 狀態：

<button type="button" class="btn btn-primary" disabled>Primary button</button>

技巧：

1. 結構
2. 樣式
3. 額外樣式
4. 狀態
5. Utilities

**範例二：表單開發**

### Bootstrap Helper 與 Utilities

教學：https://courses.hexschool.com/courses/2020112211/lectures/53653963

參考：https://getbootstrap.com/docs/5.3/helpers/color-background/

介紹卡片元件：https://getbootstrap.com/docs/5.3/components/card/

1. 基本卡片
2. 套用尺寸
3. 套用背景色、文字顏色
4. border 線條色彩
5. 圓角

### JavaScript 元素

必要流程：

1. 載入 JS 檔案
2. 元件加入 data-bs-*

## 手寫 SCSS 結構參考

### 手刻

@import "variable";// 變數
@import "reset";  // reset.css

// 1. 元件(進階)*
@import "button"; 
@import "..."; 

// 2. 雜項(進階)*
@import "utilities"; 

// 3. 共用樣式（如有 Bootstrap 通常不會寫這段）
@import "layout"; // 共同框架、第一層

// 4. 分頁樣式（可在此覆蓋 Bootstrap 樣式）
@import "index";
@import "page1";

### Bootstrap

建議預習：https://courses.hexschool.com/courses/20201122111/lectures/61177883

@import "variable"; // 變數
@import "bootstrap";

// 1. 自定義元件(進階)*
@import "button"; 
@import "..."; 

// 2. 雜項(進階)*
@import "utilities"; 

// 3. 分頁樣式（可在此覆蓋 Bootstrap 樣式）
@import "index";
@import "page1";

## 傳統命名問題：

- 產品的卡片列表
- product list…

問題：如果換頁還可以用嗎？

1. 用外觀命名：
1. 好的：card、button、btn-primary
2. 不好的：product-list、register-btn
2. 用視覺功能命名：
1. 好的：Slider
2. 不好的：Banner
3. 輔助、雜項、原子化：bg-primary、mt-3、d-flex
1. 檔名：_utilities.scss

## 第五週開發方向

1. 開始嘗試用 BS5 的 util 搭配自己手寫
2. 純手寫，並嘗試自己做 base+util

## 第五週主線任務

主線任務：[作業設計稿](https://www.figma.com/design/omevevD7bxbB3wQfL3jXR8/%E5%85%AD%E8%A7%92%EF%BD%9C%E8%81%B7%E6%97%85-WorkWay%EF%BD%9C%E8%81%B7%E6%B6%AF%E8%AB%AE%E8%A9%A2%E5%AA%92%E5%90%88-%EF%BC%88student-ver.%EF%BC%89?node-id=4032-9079&p=f&t=z9LE02L4HIm8PDz7-0)（僅供有參加切版直播班同學授權），[圖片下載連結](https://github.com/hexschool/2022-web-layout-training/tree/main/2025-week5)

### 作業地雷
- 注意 input readonly/disabled/value 用法
- 注意 label for 需對應 input id

## 挑戰等級
LV 1｜做職旅計劃頁面
LV 2｜做職旅計劃 + 個人資料或預約紀錄其中 1 頁
LV 3｜全部頁面都做

## 絕密，第八堂挑戰

[挑戰連結](https://www.figma.com/design/3bEeuchVUYwmA2PuHAxQVN/%E5%85%AD%E8%A7%92%EF%BD%9CZOBAA--%E6%97%85%E9%81%8A%E7%B6%B2%E7%AB%99--student-ver.%EF%BC%89?node-id=2-6972&p=f&t=mcWH7m3mkCfuw1AB-0)