# 🏅 Day 26 - 表單練習與 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;`

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


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

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

HTML

<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://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) | -->