---
tags: 網頁切版直播班 - 2021 夏季班
---
# 8/3(二) 每日任務

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

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

提示：
* Email address 的 input 無法輸入、更動內容
* Name 的 input 帶有原始使用者資料
* Submit 按鈕無法點擊
* 請將三個部分的「...」更換為程式碼

HTML

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

CSS

.container{
  max-width:1200px;
  margin: 0 auto;
}

需透過 Codepen 繳交 （載入 Bootstrap CSS：https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css ）


## 回報流程
1. 將答案寫在 Codepen 並複製 Codepen 連結貼至「回報區」中回報就算完成了喔～
解答及回報方式請參考下方


<!-- 解答： [Codepen 範例](https://codepen.io/Bingbingboom/pen/rNymLMz) -->

回報區
---
<!-- 0. Bingbingboom（回報範例，請使用註解回報）
Codepen：https://codepen.io/Bingbingboom/pen/rNymLMz
-->

<!-- 1. 焦糖
Codepen：https://codepen.io/yen-kg/pen/NWpJQjB
-->

<!-- 2 Jasmin
Codepen：https://codepen.io/thejasmin/pen/qBRQoeB
-->

<!-- 3 Alpha
Codepen：https://codepen.io/alphatero/pen/dyWjOMK
-->

<!-- 4. Vic
Codepen: https://codepen.io/hsuan333/pen/oNWMYXq
-->

<!-- 5. LiShang
Codepen:
https://codepen.io/li-shang/pen/ZEKjBOL
-->

<!-- 6. Ruby Chiang
Codepen: https://codepen.io/rubyyl0701/pen/GRmBNje
-->

<!-- 7. Jean
Codepen: https://codepen.io/jean-liu/pen/ZEKjBQB
-->

<!-- 8. Lina Chen
codepen: https://codepen.io/LinaChen/pen/XWRBNRa
-->

<!-- 9.Sam li
codepen:https://codepen.io/sam830623/pen/zYwLozP
-->

<!-- 10. peter.chen
codepen:https://codepen.io/JIAN-RONG/pen/eYWjBvW?editors=1100
-->

<!-- 11. Xing
codepen:https://codepen.io/xing10/pen/mdmjOJQ
-->

<!-- 12. 雷古娜
codepen:https://codepen.io/tinahopo/pen/oNWMYeP -->

<!--13. Cheng pei-hsuan
codepen: https://codepen.io/PaCheng/pen/poPLjoG
-->
<!--14. 陳sam
codepen: https://codepen.io/euldpliv/pen/BaRPQqo
-->
<!--15. lumei
codepen: https://codepen.io/l_umei/pen/JjNBbem
-->

<!--16. Fleur
codepen: https://codepen.io/swwlee/pen/OJmjqLL
-->

<!--17. Tori
codepen: https://codepen.io/hayen/pen/abWKGZZ?editors=1010
-->

<!--18. KK
codepen: https://codepen.io/potatokaka/pen/YzVjpMo?editors=1100
-->

<!-- 19. hellocrab
https://codepen.io/hellocrab/pen/GRmBrZo
-->

<!-- .20 大衛
https://codepen.io/exnsrpjc/pen/rNmrjer
-->

<!-- 21. Sz
https://codepen.io/szyln/pen/eYWjggL
-->

<!-- 22. huanan
https://codepen.io/hua_nan/pen/JjNBEWq
-->

<!-- 23. Cate Chang
https://codepen.io/tutz/pen/OJmwWWb
-->

<!-- 24. Dory
https://codepen.io/dorihung/pen/vYmagJL
-->

<!-- 25.Phil
https://codepen.io/ctkeftjp-the-animator/pen/QWvBdvO
-->

<!-- 26. 蔡 Ming Da
Codepen: https://codepen.io/bmzpfyxe/pen/rNyKVVa?editors=1100
-->

<!-- 27. SihLe Huang
code: https://codepen.io/bugbug777/pen/ExmpZEz?editors=1100
-->

<!--28. yijun
codepen:
https://codepen.io/sandy3068/pen/jOmpyQK
-->

<!-- 29. Gui
https://codepen.io/guitimliu/pen/dyWjNwM -->

<!--30. Gill
codepen:https://codepen.io/Gill-Chin/pen/MWmBJPz
-->

<!-- 31.肉鬆
codepen: https://codepen.io/klrkicog/pen/XWRBMPK
-->

<!-- 32.tim Chou
codepen: https://codepen.io/tim-chou/pen/wvdxJNO
-->

<!-- 33. curry
codepen: https://codepen.io/Ted19851223/pen/NWjBjxK
-->

<!-- 34. kevinhes
codepen: https://codepen.io/dwpwdpad/pen/BaRPZJR
-->

<!-- 35. Joy Cheng
codepen: https://codepen.io/joycheng5432/pen/mdmjwGO
-->

<!-- 36. jameskrauser
codepen: https://codepen.io/jameskrauser/pen/rNmrwvP?editors=1100
-->

<!--37.Peggy Tsai
codepen: https://codepen.io/pei-chi-tsai/pen/oNWMeNL
-->

<!--38.axlrock1021
codepen: https://codepen.io/andy1021/pen/NWjBvrL
-->

<!-- 39.阿瓜
https://codepen.io/hoick/pen/BaRPpRW?editors=1100 -->

<!-- 40. jimmyFang
https://codepen.io/pohxiqqo/pen/GRmBvvQ
-->
<!-- 41. Winnie
https://codepen.io/winnie0208/pen/oNWMoXR
-->
<!-- 42. 群嘉
https://codepen.io/efzdamnp-the-lessful/pen/NWjBwmY?editors=1100
-->

<!-- 43. Meng
https://codepen.io/MGHN/pen/GRmExgg
-->

<!-- 44. 黃士桓
https://codepen.io/shr-huan-huang/pen/NWjBYWb
-->

<!-- 45. Jim Hwang
https://codepen.io/jimh1129/pen/WNjKzdX
-->

<!--46.童筱涵
https://codepen.io/hsiaohan/pen/xxdJWox
-->

<!--47.Benson
https://codepen.io/polarBear712/pen/mdmjKez
-->

<!-- 48. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/KKmBeLm
-->

<!-- Hi Annie
https://codepen.io/lhohdalu/pen/GRmBxBN
-->

<!-- 50. Jessie Cheng
https://codepen.io/JessieMosbi/pen/YzVjOXN
-->

<!-- 51. anna
https://codepen.io/annhys/pen/xxdJajE
-->

<!-- 52. Jamie
https://codepen.io/JamieChenWs/pen/wvdxYrw
-->

<!-- 53. 沈依蓉
https://codepen.io/lily-oa/pen/jOmpXRg
-->

<!-- 54. ellie
https://codepen.io/hsu-yu/pen/bGWjzOE
-->

<!-- 55. zy https://codepen.io/zy_c/pen/yLbxBLN
-->
<!--56 icy https://codepen.io/Bingbingboom/pen/rNymLMz-->

<!-- 57. KatieZhao
https://codepen.io/katiezhao/pen/gOWdaxr -->

<!--58. 阿和
codepen:https://codepen.io/shnny/pen/rNmZBjj?editors=1010
-->

<!--59. Una(點子數位)
codepen:https://codepen.io/xbsapbas-the-vuer/pen/JjNaXzZ
-->

<!--60. Tina Yen
codepen: https://codepen.io/tlorfrnl-the-typescripter/pen/VwbGKXb
-->

<!--61. yella moon
codepen: https://codepen.io/pwbzvqja/pen/poPOeqX
-->

<!--62. Alberto
https://codepen.io/AlbertoLL/pen/BaROWXG
-->

<!--63. YuriT
https://codepen.io/wenfisht/pen/QWvVxZj
-->

<!--64. KinHei Shing
https://codepen.io/kinhei-shing/pen/xxdayZq
-->

<!--65. 袁祥恩
https://codepen.io/ovfxsavp-the-bashful/pen/mdmGzwG?editors=1000
-->

<!-- 66. ZOE WU
https://codepen.io/Zoechiueh/pen/RwVYEXx?editors=1000
-->

<!-- 67. Yurie
https://codepen.io/_u_jung/pen/xxdypzb
-->

<!-- 68. Sylvia-H https://codepen.io/Cosmosheart/pen/oNWayNB?editors=1000 -->

<!-- 69. Min Chun Tsai
https://codepen.io/Tsai0926/pen/RwVqwPq
-->

<!-- 70. Erin Huang
https://codepen.io/ErinHuang/pen/VwbVPvB
-->

<!-- 71. Jocelyn Wu
https://codepen.io/enjoyful/pen/VwbVPVN
-->

<!-- 72. Karen Huang
https://codepen.io/Coding_Snorlax/pen/BaRGWBz
-->

<!-- 73. WilsonHan
https://codepen.io/wi0821/pen/jOmQYrG
-->
<!-- 74.Shani
https://codepen.io/ShaniMa/pen/RwVqxyR -->

<!-- 75: Sec
https://codepen.io/Sentiments/pen/GRmwQry
-->

<!-- 76. Elaine Liu
https://codepen.io/elaine7598/pen/gOWQveK
-->

<!-- 77.Page
https://codepen.io/kanawin821/pen/XWRyOqm
-->

<!-- 78.Oober
https://codepen.io/xtsjrjdv/pen/bGWOmjj
-->

<!-- 79.Riley
https://codepen.io/jjpxbprd/pen/wvdxgKo
-->

<!-- 80. 魚魚
https://codepen.io/YuYu_29/pen/wvdNWxL
-->

<!-- 81.Jun Chan
codepen:https://codepen.io/chujunchan/pen/abWXQeL
-->

<!-- 82. YOYO
codepen:https://codepen.io/lumedkle/pen/MWmRzOR
-->

<!-- 83. Joe Kuo
codepen: https://codepen.io/alertislow/pen/YzVbOxY
-->

<!-- 84. WA
https://codepen.io/ldddl/pen/ExmBaQg
-->

<!-- 85. YJ kung
https://codepen.io/bagelover/pen/bGRGjmE
-->

<!-- 86. AKI
https://codepen.io/akichen27/pen/XWgKXWW
-->