---
# System prepended metadata

title: 8/11(三) 每日任務(香水電商)
tags: [網頁切版直播班]

---

---
tags: 網頁切版直播班
---
# 8/11(三) 每日任務(香水電商)

## 題目

練習使用 Bootstrap 製作表單，可參考 [水平表單](https://bootstrap5.hexschool.com/docs/5.0/forms/layout/#horizontal-form) 以及 [表單網格](https://bootstrap5.hexschool.com/docs/5.0/forms/layout/#form-grid) 的使用方法來完成以下版型，如圖：
![](https://i.imgur.com/7HrdemB.png)

需注意 label 與 input / select 要透過 for 與 id 互相對應
例如：
```htmlmixed=
<label for="name">姓名</label>
<input type="text" id="name">
```
需透過 Codepen 繳交 （載入 Bootstrap CSS：https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css ）

![](https://i.imgur.com/9UbRit4.png)

## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
    解答及回報方式請參考下方


![](https://i.imgur.com/vftL5i0.png)

<!-- 解答：[Codepen 範例](https://codepen.io/Bingbingboom/pen/abJLxBV) -->


回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/abJLxBV
-->

<!-- 1. 

-->