# 🏅 Day 31 - 表單練習與 spacing 的運用

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


**spacing 簡易小教室**
* m => margin
* p => padding

上述與下列內容組合
* s => start (由左至右故 start 為左邊)
* e => end (由左至右故 end 為右邊)
* t => top
* b => bottom
* x => x 軸（左右）
* y => y 軸（上下）

> 基礎值 `$spacer` 預設為 16px
> 1： `$spacer * 0.25 ＝ 4px`
> 2： `$spacer * 0.5 ＝ 8px`
> 3： `$spacer ＝ 16px`
> 4： `$spacer * 1.5 ＝ 24px`
> 5： `$spacer * 3 ＝ 48px`
>
> 範例：
> `.mx-1` 即為
> `margin-left: 4px; margin-right: 4px;`

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


提示：
* Email address 的 input 無法輸入、更動內容（僅能閱讀）
* Name 的 input 帶有原始使用者資料
* Submit 按鈕無法點擊
* 整個表單區塊需上下留白 24px；內層各區塊（h2、div、button）需間格 16px。
* 請在「`***`」更換為程式碼（spacing 的部分請自行判斷輸入位置）
* radio 與 checkbox 須整段程式碼

HTML

<div class="container">
  <form>
    <h2>Edit Admin</h2>
    <div>
      <label for="email" class="form-label">Email address</label>
      <input type="email" class="form-control" id="email" placeholder="[e-mail]" ***>
    </div>
    <div>
      <label for="name" class="form-label">Name</label>
      <input type="text" class="form-control" id="name" ***>
    </div>
    <div class="radio">
      ***
    </div>
    <div class="form-check">
      ***
    </div>
    <button type="submit" class="btn btn-primary" ***>Submit</button>
  </form>
</div>

> 需透過 Codepen 繳交 （載入 [Bootstrap CDN](https://getbootstrap.com/)）

## 回報流程

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


<!-- 解答：
https://codepen.io/jmimiding4104/pen/mdzQzLb
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/vYqmvmd) |
| 02 | yoishere | [Codepen](https://codepen.io/yoishere/pen/GRbmPMB) |
| 03 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/QWXvzPw?editors=1000)|
| 04 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/poXPqOJ) |
| 05 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/dyBWwwm) |
| 06 | NocabWang(培根) | [Codepen](https://codepen.io/PeihanWang/pen/eYwWbwg?editors=1000) |
|07|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/gONWqMN)|
|08|Mars|[Codepen](https://codepen.io/MarsKuo/pen/jOjmJEa)|
| 09 | han | [Codepen](https://codepen.io/iamHanCheng/pen/KKjmEPy?editors=1100) |
| 10 | kawa | [Codepen](https://codepen.io/z83xji6/pen/RwzVdpR) |
| 11 | n913239 | [Codepen](https://codepen.io/n913239/pen/mdZmoOE?editors=1000) |
| 12 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/WNqjmoX)|
| 13 | anderson666 |[Codepen](https://codepen.io/goodmanbuild/pen/QWXveOR)|
| 14 | KUN. | [Codepen](https://codepen.io/barry91205/pen/oNrWKyo) |
| 15 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/vYqmqXL) |
| 16 | hao jing | [Codepen](https://codepen.io/hjxu/pen/mdZwbVo) |
| 17 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/mdZwybB) |
| 18 | Jim | [Codepen](https://codepen.io/JimChou/pen/GRbEJJe) |
| 19 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/jOjwqVq?editors=1000) |
| 20 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/poXwNJy) |
| 21 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/GRbmXXw) |
| 22 | lunlun0514 | [Codepen](https://codepen.io/f5badapple/pen/gONRgGg?editors=1100) |
| 23 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/rNEmbGx) |
| 24 | Dolce_墨 | [Codepen](https://codepen.io/DolceTseng1026/pen/MWMoJQP) |
| 25 | xcx100 | [Codepen](https://codepen.io/c13026/pen/ZEdyogW) |
| 26 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/bGPRKxE) |
| 27 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/rNEwQdo) |
| 28 | 陳小廷 | [Codepen](https://codepen.io/ting1124/pen/oNrwJZB) |
| 29 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/PorjgVy?editors=1000) |
| 30 | glen_69515 |[Codepen](https://codepen.io/glenyaochih/pen/bGPRXNv?editors=1100)|
| 31 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/dyBzbOe) |
| 32 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/ZEdymmV) |
| 32 | GAVI | [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/QWXgXLd?editors=1000) |
| 33 | Mike | [Codepen](https://codepen.io/mike2049/pen/xxorRZp?editors=1100) |
| 34 | PoWei | [Codepen](https://codepen.io/Po-Wei-Lai/pen/ZEdymmV) |
| 35 | wind | [Codepen](https://codepen.io/wind7y/pen/abgyPKv) |
| 36 | Toung |[Codepen](https://codepen.io/Toung/pen/GRbMpBp)
| 37 | 泊岸 |[Codepen](https://codepen.io/qoq77416416/pen/MWMEoWp?editors=1100)
| 38 | emmayo |[Codepen](https://codepen.io/emmayo/pen/vYqeRKP)
| 39 | EdHuang |[Codepen](https://codepen.io/yide1986/pen/abgLGpg)
| 40 | 俊 |[Codepen](https://codepen.io/jun12079/pen/XWLexWJ)
| 41 | Emma | [Codepen](https://codepen.io/Emma0919/pen/wvLrQWB) |
| 42 | jimmy.0706 | [Codepen](https://codepen.io/JimmyMao/pen/mdZwybB) |
| 43 | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/WNqZqRr) |
| 44 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/oNrpxZz) |
| 45 | Joanne hu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/RwzxBXm) |
| 46 | Enn | [Codepen](https://codepen.io/enntang/pen/wvLmJaV) |
| 47 | jasonlin | [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/MWMVmoB) |
| 48 | Ana | [Codepen](https://codepen.io/Ana-Wu/pen/MWMVRQp?editors=1000) |
| 49 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/ZEdrPRW) |
| 50 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/ZEdROqd) |
| 51 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/LYKBbOg?editors=1010)|
| 52 | OSN |[Codepen](https://codepen.io/osncodepen/pen/VwJBxjp)|
| 53 | Jainee |[Codepen](https://codepen.io/Jainee0110/pen/eYwxGJQ)|
| 54 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/jOjJWOb?editors=1000) |
| 55 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/ExBvyEr) |
| 56 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/ExqYoqP?editors=1100) |
| 57 | zen | [Codepen](https://codepen.io/zen742937/pen/eYqOodQ) |
| 58 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/NPWLZZY) |
<!--
| No | Discord | [Codepen]() |
-->