---
# System prepended metadata

title: "\U0001F3C5 Day 31 - 表單練習與 spacing 的運用"
tags: [網頁切版直播班 - 2023 夏季班]

---

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

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

**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;`

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

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

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

HTML
```htmlembedded=
<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="name@example.com" ***>
    </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://i.imgur.com/vftL5i0.png)

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


回報區
---


| # |      Discord      |                           CodePen / 答案                     |
|:--:|:-----------------:|:----------------------------------------------------------:|
| 1 | hebin. | [Codepen](https://codepen.io/landyhsiao776/pen/poQBJVw) |
| 2 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/KKrYprq) |
| 3 | Beriln | [Codepen](https://codepen.io/3qberlin/pen/MWzRwqO?editors=1010) |
| 4 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/XWyQbPq?editors=1000) |
| 5 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/vYQMORq) |
| 6 | Yu | [Codepen](https://codepen.io/yuch3n_chen/pen/KKrYpbv?editors=1000) |
| 7 | deli0529 | [Codepen](https://codepen.io/delichaomoon/pen/ExOJjMd) |
| 8 | m_m | [Codepen](https://codepen.io/minnn7716/pen/ExOJjzd) |
| 9 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/NWEmqod?editors=1010) |
| 10 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/gOQypJP) |
| 11 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/oNQOXRR) |
| 12 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/BaGENbz) |
| 13 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/gOQypNP?editors=1010) |
| 14 | Tami | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/KKrYdVQ) |
| 15 | SmallP | [Codepen](https://codepen.io/smallp/pen/vYQMNGN) |
| 16 | townyuan | [Codepen](https://codepen.io/townyuan/pen/oNQOjxv) |
| 17 | Morning  | [Codepen](https://codepen.io/sxzjnkxs-the-styleful/pen/ZEmZbWj?editors=1100)
| 18 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/JjeVdqx) |
| 19 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/yLQrYzx) |
|20|Moreene|[CodePen](https://codepen.io/Moreene/pen/WNYWQzz?editors=1010)|
| 21 | Rochel#4754 |[Codepen](https://codepen.io/rochelwang1205/pen/OJaGywx)|
| 22 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/QWJPjBx?editors=1000) |
| 23 | dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/LYXvpGw) |
| 24 | billy_ti | [Codepen](https://codepen.io/Ti-Show/pen/dyQLYxN) |
| 25 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/ExOJPWy) |
| 26 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/BaGEjRq?editors=1000) |
| 27 | tanuki5863 | [Codepen](https://codepen.io/tanuki320/pen/KKrYdGG) |
| 28 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/OJaGMdq) |
| 29 | .icesam | [Codepen](https://codepen.io/icesam/pen/bGQJpGb) |
| 30 | awei | [Codepen](https://codepen.io/hong-wei/pen/jOQRPvm) |
| 31 | runweiting | [Codepen](https://codepen.io/weiting14/pen/jOQRWbd) |
| 32 | Uli | [Codepen](https://codepen.io/uli1313/pen/ZEmZWVr) |
| 33 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/NWEmGmB) |
| 34 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/YzRMqrg?editors=1000) |
| 35 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/RwqOawq) |
| 36 | 依依 | [Codepen](https://codepen.io/Rita-Yang/pen/YzRMwva?editors=1100) |
| 37 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/YzRMGQE) |
| 38 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/KKrYgYp) |
| 39 | Eden |[Codepen](https://codepen.io/iseden/pen/vYQMxGJ)|
| 40 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/NWEmpje) |
| 41 | hannahTW | [Codepen](https://codepen.io/hangineer/pen/abQxJjJ) |
| 42 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/ZEmZKpe?editors=1000) |
| 43 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/JjezyXW) |
| 44 | Tina02 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/mdQgwPV) |
| 45 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/KKrYqEG) |
| 46 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/poQBpjY?editors=1100) |
| 47 | Randy | [Codepen](https://codepen.io/landy510/pen/BaGErzp?editors=1000) |
| 48 | PayRoom | [Codepen](https://codepen.io/water38198/pen/eYQoMVb) |
| 49 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/VwVNXJm) |
| 50 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/wvQZmLm) |
| 51 | ning_bobo | [Codepen](https://codepen.io/ninghsu/pen/BaGExzV) |
| 52 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/oNQOyJm?editors=1000) |
| 53 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/KKrYxOw) |
| 54 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/XWyQxJM) |
| 55 | rjjq | [Codepen](https://codepen.io/rjjq/pen/mdQgzQN) |
| 56 | Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/abQxMKg) |
| 57 | shcopy | [Codepen](https://codepen.io/shcopy/pen/JjeVvYX) |
| 58 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/XWywmvw) |
| 59 | Kimi | [Codepen](https://codepen.io/kimihu91/pen/WNYmwmZ) |
| 60 | ding2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/vYQwoJx) |
| 61 | Renee Wang | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/wvQZKxp) |
| 62 | wind | [Codepen](https://codepen.io/wind7y/pen/KKrjNdO) |
| 63 | shuuu | [Codepen](https://codepen.io/afjrvjzl-the-bashful/pen/MWzMjdN) |
| 64 | Lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/abQrMQM?editors=1000) |
| 65 | Sinsaki225 | [Codepen](https://codepen.io/a8322342/pen/zYMVLqp) |
| 66 | Long | [Codepen](https://codepen.io/Loonng/pen/LYXopvV) |
| 67 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/XWyvrOM) |
| 68 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/KKrjrma?editors=1100) |
| 69 | 郭芙蘭 ＃6374 | [Codepen](https://codepen.io/flora_Kuo/pen/oNQKjYP) |
| 70 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/GRwVwOa) |
| 71 |KC_8685|[Codepen](https://codepen.io/cathy7411/pen/OJrLoxX)|
| 72 |andersonshen|[Codepen](https://codepen.io/luxyenni-the-bold/pen/bGObQOd)|
| 73 | user | [Codepen](https://codepen.io/ldddl/pen/QWzWpbE) |
| 74 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/oNQrVPO) |
| 75 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/eYbYjJN) |
| 76 |cura| [Codepen](https://codepen.io/curalin/pen/LYMVLpG?editors=1000) |
| 77 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/KKbPPqE) |
| 78 | Martin | [Codepen](https://codepen.io/markyourpage/pen/KKbpOBz) |
| 79 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/rNoxvXW?editors=1100) |
| 80 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/vYvGEee) |
| 81 | RX00#5351 | [Codepen](https://codepen.io/jmimiding4104/pen/mdzQzLb) |
| 82 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/QWzEebO) |
| 83 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/eYbWVXb) |
| 84 | ChrisSQR | [Codepen](https://codepen.io/ChrisSQR/pen/GRPvmWb) |
| 85 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/KKbQZJe?editors=1000) |


---

- 快速複製格式：

```markdown!
| 0 | user | [Codepen]() |
```