### 題目 第三週練習到手刻表單,這次將要練習使用 [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 ```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://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]() | ```
×
Sign in
Email
Password
Forgot password
or
By clicking below, you agree to our
terms of service
.
Sign in via Facebook
Sign in via Twitter
Sign in via GitHub
Sign in via Dropbox
Sign in with Wallet
Wallet (
)
Connect another wallet
New to HackMD?
Sign up