---
# System prepended metadata

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

---

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


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

![image](https://hackmd.io/_uploads/HyRgnyNEgg.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;`

作業說明：
該表單使用 Floating labels 浮動標籤做法，從下圖可以看到，當使用者輸入內容時，label 文字會移動到上方，在視覺呈現上更加順暢，有助於提升使用者體驗，可參考 [Floating labels 文件](https://getbootstrap.com/docs/5.3/forms/floating-labels/)

![](https://hackmd.io/_uploads/rJx-ueEVee.png)

### 題目
請複製下方模板，並依照提示做調整

提示：
* 表單區塊間需留白 24px
* 請將「`***`」更換為程式碼（spacing 的部分請自行判斷輸入位置）
* 聯絡電話 與 select 選單需完成整段程式碼

HTML
```htmlembedded=
<div class="container my-4">
  <div class="row">
    <div class="col-4">
      <h3 class="fw-bold">基本資料</h3>
      <p class="d-flex align-items-center text-secondary">欄位皆為<span class="badge rounded-pill text-bg-danger ms-1">必填</span></p>
    </div>
    <form class="col-8">
      <div class="form-floating ***">
        <input type="text" class="form-control" id="floatingName" placeholder="name">
        <label for="floatingName">姓名</label>
      </div>
      <div class="***">
        <input type="email" class="form-control" id="floatingEmail" placeholder="email">
        <label for="floatingEmail">信箱</label>
        <div id="emailHelp" class="form-text ms-2">盡量勿使用Yahoo或Hotmail郵件信箱，以免因擋信、漏信</div>
      </div>
      <div class="***">
        ***
      </div>
      <select ***>
        ***
      </select>
    </form>
  </div>
</div>
```

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



## 回報流程

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

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

<!-- 解答：
https://codepen.io/fhljksmg-the-styleful/pen/wBaYNxY?editors=1000
 -->


回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 01 | Nooooora | [Codepen](https://codepen.io/Nora-Ch/pen/ZYbQVqW) |
| 02 | Saika| [Codepen](https://codepen.io/saika4501/pen/jEbWdNb)|
|  03  |  Pastor  |[Codepen](https://codepen.io/peter_hung/pen/raOxooW) |
| 04 | Chia__ |[Codepen](https://codepen.io/Chia-the-encoder/pen/bNVEzbb) |
| 05 | jchunnn |[Codepen](https://codepen.io/jchunnn/pen/qEObgdo)|
| 06 | 登登登 |[Codepen](https://codepen.io/Duncanin/pen/qEObgBo)|
| 07 | Jerome |[Codepen](https://codepen.io/qsc002163/pen/OPyMdNK?editors=1000)|
|  08  |  Tetsu  |[Codepen](https://codepen.io/ttgchang/pen/gbaPqMN) |
|  09  |  7Lun  |[Codepen](https://codepen.io/mfyvqhsn-the-bold/pen/azvdXEK) | 
|  10  |  cks40660  |[Codepen](https://codepen.io/CKS40660/pen/PwPZVVZ) |
|  11  |  Jenna  |[Codepen](https://codepen.io/abiscc14/pen/zxvrbEX)|
|  12  |  社子畢卡索  |[Codepen](https://codepen.io/pen?template=RNWrvJX) |
|  13  |  燕  |[Codepen](https://codepen.io/keyrtlij-the-reactor/pen/RNWrORj) |
|  14  |  RUDY  |[Codepen](https://codepen.io/Rudy-crw/pen/VYveNMr?editors=1100) |
|  15  |  老屠  |[Codepen](https://codepen.io/fsgfxvlb-the-selector/pen/RNWrdqp?editors=1000) |
|  16  |  Fan  |[Codepen](https://codepen.io/btsihioy-the-reactor/pen/wBKMbQW?editors=1000) |
|  17  |  小懿  |[Codepen](https://codepen.io/YT-the-vuer/pen/VYveJGj) |
|  18  |  Leonard  |[Codepen](https://codepen.io/hyyfjqra-the-sans/pen/WbQrVoP) |
|  19  |  Kiku  |[Codepen](https://codepen.io/Kiku0110/pen/pvjgMeX?editors=1100) |
|  20  |  PK  |[Codepen](https://codepen.io/Percy-Ku/pen/QwjyeRW) |
|  21  |  平平  |[Codepen](https://codepen.io/ypinpin/pen/PwPNYMN) |
|  22  |  kashiwatei  |[Codepen](https://codepen.io/kashiwatei/pen/ZYbWELM) | 
|  23  |  An  |[Codepen](https://codepen.io/bzrpsbjq-the-encoder/pen/dPYMYox) |
|  24  |  Elvina  |[Codepen](https://codepen.io/Elvina-the-selector/pen/xbwVVLj?editors=1000) |
|  25  |  ja4071  |[Codepen](https://codepen.io/SHAO-L/pen/yyYOVmP?editors=1100) |
|  26  |  Sam.S.T.Y  |[Codepen](https://codepen.io/Sam-Yang-the-animator/pen/qEOZPao?editors=1100) | 
|  27  |  Chris Wang  |[Codepen](https://codepen.io/Wang-Chris/pen/wBKMgWq) | 
|  28  | Rogan  |[Codepen](https://codepen.io/RoganHsu/pen/gbaroOG?editors=1000) | 
|  29  | Huang Eagle  |[Codepen](https://codepen.io/YuCi/pen/zxvqeYN) | 
|  30  | Hao  |[Codepen](https://codepen.io/Howell/pen/EaVKJwV) |
|  31  | Katie |[Codepen](https://codepen.io/Katiekatiehsu/pen/azvZWBw?editors=1100) |
|  32  | suemma |[Codepen](https://codepen.io/suemma/pen/qEONjqg) |
|  33  | B |[Codepen](https://codepen.io/Babel777/pen/JoYbqwW) |
|  34  | Marco |[Codepen](https://codepen.io/MarcoChiu/pen/YPyNMVo) |
|  35  |  禹成林  |[Codepen](https://codepen.io/useirin/pen/azvWLVr) |
|  36  |  andy  |[Codepen]([連結](https://codepen.io/ewnblckz-the-styleful/pen/gbaWVVb)) |
|  37  |  Min  |[Codepen](https://codepen.io/cvqevoxk-the-decoder/pen/jEbLNKL) |
|  38  |  伊迪  |[Codepen](https://codepen.io/eku10rei/pen/KwdvMpR?editors=1000) |
|  39  |  NGNLzenos  |[Codepen](https://codepen.io/xmijbzdb-the-animator/pen/MYaEBzz?editors=1010) |
|  40  |  牛奶嘎  |[Codepen](https://codepen.io/Joyce-Niu/pen/pvjdYyP) |
|  41  |  Calvin  |[Codepen](https://codepen.io/CalvinChang/pen/PwPdzwp) |
|  42  |  Celia  |[Codepen](https://codepen.io/Cindy-Ho/pen/JoYmZdO) |
|  43  |  cindy  |[Codepen](連結)
|  44  |  Doreen翠翠翠  |[Codepen](https://codepen.io/cuei-sian-Wang/pen/GgpbpmO) |
|  45  |  星雪糖  |[Codepen](https://codepen.io/vfpofbgm-the-scripter/pen/zxrgGJv?editors=1010) |

<!-- 快速複製 -->
<!-- |  排序  |  姓名  |[Codepen]([連結](https://codepen.io/a50134/pen/MYaRxjW) | -->