---
tags: 大學生體驗營 - 2021 夏季班
---
# 7/21(三) 每日任務(香水電商)

## 題目

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

需注意 label 與 input / select 要透過 for 與 id 互相對應
例如：

<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 ）


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


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

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

<!-- 1.小羊
Codepen：
https://codepen.io/eqsmebaz-the-selector/pen/OJmjwXV
-->

<!-- 2.羿宣
Codepen：https://codepen.io/Ann828/pen/VwbzBPN?editors=1000 -->

<!-- 3. JT
Codepen:
https://codepen.io/jsht-the-animator/pen/bGWrjvg?editors=1000 -->

<!-- 4.Cloudia
Codepen:https://codepen.io/hkps87/pen/yLboqMo -->

<!-- 5.黃彩雲
Codepen: https://codepen.io/corin19/pen/ZEKJjXr -->

<!-- 6.小胖
Codepen: https://codepen.io/a1073315/pen/RwVZBKX -->

<!--7.廖奕慈
Codepen: https://codepen.io/yiciLiao/pen/xxdLJYm -->

<!-- 8.蕭絜云
Codepen: https://codepen.io/cloudy_77/pen/XWRaBwo -->

<!-- 9. 辰
Codepen: https://codepen.io/dnangelapril/pen/YzVxOGW
-->

<!-- 10. 黃郁芳
Codepen: https://codepen.io/YuFang0323/pen/yLboRMN -->

<!-- 11. 黃珮雯
Codepen: https://codepen.io/pwh_27/pen/WNjELeX -->

<!-- 12. 劉子瑜
Codepen: https://codepen.io/superfish195/pen/bGWrOxj
-->

<!-- 13. Steve
Codepen: https://codepen.io/steve5631/pen/GRmvzZG
-->

<!-- 14. 人中
Codepen: https://codepen.io/renchong2424/pen/PomKVWx
-->

<!-- 15. 莊承叡
Codepen：https://codepen.io/Ray_ty39/pen/zYwdbMM?editors=1000
-->

<!-- 16.小松
Codepen：https://codepen.io/120061203/pen/bGWrJEY
-->

<!-- 17. Iris
Codepen：https://codepen.io/hungyen/pen/OJmjKMm
-->

<!--18. 劉永琦
Codepen: https://codepen.io/wjsvypvv-the-decoder/pen/bGWrXMM -->

<!-- 20. 廖仕雅
CodePen: https://codepen.io/sophia0121/pen/mdmMQBd?editors=1000
-->

<!-- 21. 謝旻臻
Codepen: https://codepen.io/julia20010828/pen/NWjaWrN?editors=1000 -->

<!-- 22. 薰
Codepen: https://codepen.io/chiaoshin/pen/RwVZzGz -->

<!-- 23. Jack
Codepen: https://codepen.io/JackChen89/pen/oNWeQQK -->

<!-- 24. Genie
Codepen: https://codepen.io/hcliii/pen/BaRwYJv -->

<!-- 25. 馮旻
Codepen: https://codepen.io/tboqkvhk/pen/gOWGeKb -->

<!-- 26. 霈楹
Codepen: https://codepen.io/nrweahgl-the-selector/pen/LYyzXov?editors=1010 -->

<!-- 27. 姚小芸
Codepen: https://codepen.io/crazzyamy/pen/wvdPvpa?editors=1100 -->

<!-- 29. 德德
Codepen: https://codepen.io/Chiouder/pen/wvdpQVB?editors=1010 -->

<!-- 30. 陳書妤
Codepen: https://codepen.io/shuyu227/pen/JjNZOvd?editors=1000 -->