---
# System prepended metadata

title: "\U0001F3C5 Day 32"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 32

## 表單練習

### 題目
第三週練習到手刻表單，這次將要練習使用 [Bootstrap Forms](https://bootstrap5.hexschool.com/docs/5.1/forms/overview/) 來完成表單的部分，如圖：

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

> 說明：
> 編輯使用者資料時通常在畫面上會預設帶有原先的使用者資料，有些欄位甚至會是無法更動的

提示：
* Email address 的 input 無法輸入、更動內容（僅能閱讀）
* Name 的 input 帶有原始使用者資料
* Submit 按鈕無法點擊
* 請將三個部分的「`...`」更換為程式碼


HTML
```htmlembedded=
<div class="container">
  <form>
    <h2 class="mb-3">Edit Admin</h2>
    <div class="mb-3">
      <label for="email" class="form-label">Email address</label>
      <input type="email" class="form-control" id="email" placeholder="name@example.com" value="name@example.com" ...>
    </div>
    <div class="mb-3">
      <label for="name" class="form-label">Name</label>
      <input type="text" class="form-control" id="name" ...>
    </div>
    
     <button type="submit" class="btn btn-primary" ...>Submit</button>
  </form>
</div>
```
CSS
```css=
.container {
  max-width: 1200px;
  margin: 0 auto;
}
```

> 需透過 Codepen 繳交 （載入 [Bootstrap CDN](https://bootstrap5.hexschool.com/docs/5.1/getting-started/introduction/#css)）



## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔! 
解答位置請參考下圖（需打開程式碼的部分觀看）

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

<!-- 解答：https://codepen.io/hexschool/pen/xxWLmWa -->


回報區
---


|      Discord      |                           CodePen / 答案                            |
|:-----------------:|:-------------------------------------------------------------------:|
|     嗶嗶羊#8042     |        [CodePen](https://codepen.io/mazizlte-the-typescripter/pen/XWEypvK?editors=1100)         |
|     小白#2406     |        [CodePen](https://codepen.io/gracewhite/pen/ZExoZqZ)         |
|  Iris Huang#6727  |          [CodePen](https://codepen.io/ythuang/pen/poLKwMW)          |
|    布魯諾#7239    |         [CodePen](https://codepen.io/bruno-yu/pen/QWmxJKb)          |
|   LinaChen#1796   |         [CodePen](https://codepen.io/LinaChen/pen/WNzyYRv)          |
|    JackC#0411     |          [CodePen](https://codepen.io/key0329/pen/jOzKQBW)          |
|      YC#2522      |           [CodePen](https://codepen.io/YCLu/pen/JjLZeNL)            |
|    黃士桓#7654    |      [codePen](https://codepen.io/shr-huan-huang/pen/OJvEajK)       |
| bonnieli1414#4906 | [codePen](https://codepen.io/bonnieli1414/pen/QWmxJON?editors=1100) |
|    Clara#1275     |         [CodePen](https://codepen.io/bsupixqu/pen/dymKQeQ)          |
|   WEI_RIO#9342    |    [CodePen](https://codepen.io/wei_wu/pen/YzavROg?editors=1100)    |
|     Hsiu#8767     |         [CodePen](https://codepen.io/amy-hsiu/pen/abYKQaG)          |
|  Potatolee#7749   |        [CodePen](https://codepen.io/potatoleee/pen/BarVGxy)         |
|    Fang #4680     |   [Codepen](https://codepen.io/std95174/pen/mdxKQQN?editors=1000)   |
|    Benson#6763    |         [Codepen](https://codepen.io/kumashow/pen/ExEROeE)          |
|  LHchien33#6232   |         [Codepen](https://codepen.io/lin_chien/pen/zYWaMbj)         |
|  PeggyLiao#1552   |  [CodePen](https://codepen.io/PeiJu-Liao/pen/abYKQga?editors=1100)  |
|    Arista#5802    |       [CodePen](https://codepen.io/arista-hsieh/pen/ExERGjd)        |
|  Clara Cai#7097   |        [CodePen](https://codepen.io/Clara-Snowy/pen/YzavdVP)        |
|     L0F0#8733     |           [CodePen](https://codepen.io/l0f0/pen/rNdKQXd)            |
|     yuyu#6310     |         [CodePen](https://codepen.io/yuyu0905/pen/mdxKapE)          |
|     威0#6919      | [Codepen](https://codepen.io/n0918679182/pen/VwXdqJK?editors=1010)  |
|     威爾#1694     |          [CodePen](https://codepen.io/WILL_Wu/pen/qBoKgdb)          |
|   Jenny真#7532    | [CodePen](https://codepen.io/wei-chen-wu/pen/abYKXvO?editors=1000)  |
|    azami#5986     |           [CodePen](https://codepen.io/azami/pen/yLKEZbW)           |
|    JarDar#6980    |         [codepen](https://codepen.io/jardarpen/pen/NWYzowe)         |
|     小諾#1866     |          [codepen](https://codepen.io/noichan/pen/abYKXEZ)          |
|   CloThEs#7837    |         [codepen](https://codepen.io/CloThEsZ/pen/KKoeEpp)          |
|  christina#6185   |        [Codepen](https://codepen.io/chrisc0210/pen/xxWzBEP)         |
|  suihsilan#9485   |         [Codepen](https://codepen.io/suihsilan/pen/rNdKRop)         |
|     Vera#5592     |          [Codepen](https://codepen.io/skvera/pen/yLKErBz)           |
|     咻蹦#1526     |          [Codepen](https://codepen.io/emmasyu/pen/mdxKgRe)          |
|    Melon#0380     |         [Codepen](https://codepen.io/BalaFang/pen/XWEYQNP)          |
|    Chi#7605      |          [Codepen](https://codepen.io/YoChi84/pen/xxWzNXO)           |
|   雷雷#7844     |          [Codepen](https://codepen.io/lei-yi-jie/pen/rNdKgoe)           |
|Ke#1391|[Codepen](https://codepen.io/federerke/pen/poLKXQe)|
|ssozr#4680|[codepen](https://codepen.io/ssozr/pen/zYWagOa)|
|鴨鴨#9822|[Codepen](https://codepen.io/qrvrqvxv-the-selector/pen/abYKeLM)|
|int#7518|[Codepen](https://codepen.io/intHuang/pen/XWEYvyG?editors=1010)|
|RayChen#6088|[Codepen](https://codepen.io/raychen1996/pen/JjLBPmW)|
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/bGvjGvd)
|Joyce#3790|[Codepen](https://codepen.io/joycehuang/pen/gOejOEO)|
|IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/dymjPjo)|
|yu魚#1330   |  [CodePen](https://codepen.io/Yu_yu/pen/ZExjWzw)| 
|大衛#4869   |  [CodePen](https://codepen.io/exnsrpjc/pen/vYRaGZZ)| 
| 楓之聲#6945 | [Codepen](https://codepen.io/sshane258/pen/YzajWgg) |
|Cliff#4606|[Codepen](https://codepen.io/Cliff_hex/pen/PoRBjjg?editors=1100)|
|Yuna Huang#2692|[Codepen](https://codepen.io/Yuna1002/pen/YzajQLR?editors=1010)|
|yo_yo#2678|[Codepen](https://codepen.io/djmliogn-the-flexboxer/pen/ZExjXBZ)|
|我是泇吟 #5189|[CodePen](https://codepen.io/kljuqbxs/pen/MWVBOyK)|
|Amberhh #2465|[CodePen](https://codepen.io/Amberhh/pen/yLKqPbO)|
|Henry#7386|[CodePen](https://codepen.io/h1nr9/pen/ExEpbOo)|
|zera#6060|[codepen](https://codepen.io/zera-tseng/pen/jOzpadM)|
| Yunei#6323 |[codepen](https://codepen.io/Yunei/pen/OJvwZzR)|
|鉦勝 #8333 |[codepen](https://codepen.io/atckmax823/pen/yLKqxYX)|
|Ryan Chiang#6649|[Codepen](https://codepen.io/ryanchiang/pen/JjLBeby)|
|   YU #0618    | [CodePen](https://codepen.io/yoken_/pen/dymjaZO)          |
|   NeilLin#3009    | [CodePen](https://codepen.io/a0071421/pen/yLKqmOX)          |
|kevin8349 #6131|[Codepen](https://codepen.io/kun8349/pen/RwMYPVp)|
|黑白兔#0684|[Codepen](https://codepen.io/johnny329/pen/GRxXJyv)|
|YI#0863|[Codepen](https://codepen.io/YI0305/pen/rNdZOpW?editors=1100)|
|Tori#1248|[Codepen](https://codepen.io/FlyTori/pen/YzaOygR)|
| Yuan962#5897 |[Codepen](https://codepen.io/Jasmine-Liao/pen/BarOLvp)|
|艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/wvmEJMa)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/GRxXmpN)|
|紙飛機 #1335|[Codepen](https://codepen.io/paperplanea/pen/rNdZJpg)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/jOzvKGp)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/ZExMjyb)|
|aki|[codepen](https://codepen.io/aki168/pen/rNdqBvb)|
|Pony#6778|[Codepen](https://codepen.io/Pony0303/pen/jOzeOJE)|
|阿蘇#8531|[Codepen](https://codepen.io/susu3131/pen/VwXEzEN)|
|𝓛𝓊𝒸𝓎#8635|[Codepen](https://codepen.io/lucygirl/pen/mdxzpWo)|
|QOO#8446|[Codepen](https://codepen.io/QOOQOOQ/pen/LYdgBgj)|
|choubree #4350|[Codepen](https://codepen.io/BreeChou/pen/rNdQeYq)|
|郭芙蘭 #6374|[Codepen](https://codepen.io/flora_Kuo/pen/abYQPmW)|
|kancheng#3915|[Codepen](https://codepen.io/kancheng/pen/BarGMgZ)|
| J_u_d_y#5993 | [Codepen](https://codepen.io/J_u_d_y/pen/qBoLdGe?editors=1100) |
| Nini Chen#5790 | [Codepen](https://codepen.io/ninistyle/pen/rNdPVOw?editors=1000) |
|Shuo#1596 | [Codepen](https://codepen.io/chiangchungshuo/pen/jOzdBRE) |
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/qBogpWZ)|
|allen#0876|[codepen](https://codepen.io/sodarman/pen/mdxvXGN)|
|Rena#6249|[codepen](https://codepen.io/aureate0116/pen/dymrpJW)|
|Cream#3449|[codepen](https://codepen.io/frxdwbbi-the-sasster/pen/OJvqbdP)|
|mei#8421|[codepen](https://codepen.io/Shila-Chen/pen/xxWewOJ)|
|toshow#5609|[CodePen](https://codepen.io/toshow/pen/vYRwBWR)|
|Van.CS|[Codepen](https://codepen.io/fbacojji-the-selector/pen/gOeJvLe)|
|yuchenye#6119|[Codepen](https://codepen.io/yuchen/pen/oNqrwoy)|
|Jamie Wu#9345|[Codepen](https://codepen.io/Wu220103/pen/KKojoKP)|
|jin.huang#4666|[Codepen](https://codepen.io/haha1196/pen/QWmXzQM)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/BarXdKN?editors=1100)|
|Deborah#0033|[Codepen](https://codepen.io/deborah-tsai/pen/xxWvYQZ)|
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/XWqbGWY)|
|NathanJames#8120|[Codepen](https://codepen.io/ufo060204/pen/rNvOqoz)|
|狸貓#5863|[Codepen](https://codepen.io/tanuki320/pen/jOxMLam?editors=1010)|