---
tags: 公益程式體驗營 - 2022
---

# 🏅 5/19 (四) 每日切版任務 - 基本表單元素 label ＆ input
## 題目

**基本表單元素 label ＆ input：**

label：用來給表單的控制元件一個說明標題。
input：有非常多不同的用途，主要是用 <input> 上的 type 屬性來指明不同的功能，[點我查看更多 type 種類](https://www.w3schools.com/tags/tag_input.asp)。另外要注意的是，input 並沒有結尾標籤，和 img 一樣都是單標籤。

label for 屬性與 input id 屬性對應：
點擊 label 文字時可以讓對應的 input 變成 focus 狀態

寫法一

<label for="name">姓名：</label>
<input type="text" id="name" name="name">

寫法二：

<label for="name">
  姓名: <input type="text" id="name" name="name">
</label>

**其他表單元素屬性：**

* name：表單元素都有一個 name 屬性，用來指定傳送給後端的資料要用什麼名稱。也會用在 radio 或是 checkbox 當作群組，同一群組的 input 需要使用相同的 name。

    <p>我喜歡：</p>
    <label for="ming">小明</label>
    <input name="like" id="ming" type="checkbox">
    <label for="auntie">漂亮阿姨</label>
    <input name="like" id="auntie" type="checkbox">
    <label for="jay">杰倫</label>
    <input name="like" id="jay" type="checkbox">

<img src="https://i.imgur.com/xBuYvCT.png" width="250">

* value：用來指定表單元素的初始值

    <input name="text" type="text" value="我的預設值">

<img src="https://i.imgur.com/4VXoiCT.png" width="200">
* placeholder：用來指定表單元素的提示文字

    <input name="name" type="text" placeholder="請填寫姓名">

<img src="https://i.imgur.com/H9GBmQV.png" width="200">

* disabled：用來禁用該表單元素

     <input name="submit" type="submit" value="送出">
     <input name="submit" type="submit" value="送出" disabled>  

<img src="https://i.imgur.com/R7MZNCE.png" width="150">

**完整的表單範例：**

<form>
  <label for="name">姓名</label>
  <input id="name" type="text">
  <input name="submit" type="submit" value="送出">
</form>

<img src="https://i.imgur.com/b4bhonN.png" width="300">

## 題目

請做出以下圖示中的表單

提示：
* 每個 label 都需要對應到相對的 input
* 一共有 6 種不同的 type
* 性別中的「男」「女」一次只能擇一選擇，預設為「男」，可以使用 checked 屬性

<!--
ans:
[label＆input](https://codepen.io/DoLucky/pen/xxYRVxG?editors=1100)
-->
---

## 回報流程

1. 將答案貼在 Codepen 並複製 Codepen 連結貼至「回報區」回報
（也可以將答案直接貼至「回報區」）


<!-- 解答： -->

回報區
---

<!-- 1. 白狐
Codepen：https://codepen.io/baihu7851/pen/ZErKKBR
-->

<!-- 2. yunyun
ans:
(https://codepen.io/yun_yunni/pen/ExQmmZG)
-->

<!-- 3. Bruno Yu
ans:
(https://codepen.io/bruno-yu/pen/VwQbbjZ)
-->

<!-- 4.IreneLee
codepen:https://codepen.io/ntjtcxpt-the-animator/pen/GRQmmMq
-->

<!-- 5. su#7798
codepen: https://codepen.io/wc-su/pen/ExQmWBp
-->

<!-- 6. CloThEs
codepen: https://codepen.io/bogwdnxx-the-sans/pen/poaPPEp
-->

<!-- 7. Mitour#0672
codepen: https://codepen.io/mitour/pen/OJQmmvm
-->

<!-- 8. Eric.S
codepen: https://codepen.io/Eric_Shen/pen/OJQmmog
-->

<!-- 9. Jason Chen
codepen: https://codepen.io/jason60810/pen/jOZmmZZ
-->

<!-- 10. Chi
Codepen: https://codepen.io/YoChi84/pen/gOvWWZW
-->

<!-- 11. Noy
https://codepen.io/MochiCodingPen/pen/wvyddOp
-->
<!-- 12. han#9437
https://codepen.io/qnrxylcw-the-reactor/pen/xxYdrgV
-->

<!-- 13. Leo Song
https://codepen.io/sunnylaba/pen/OJQmgXv?editors=1100
-->

<!-- 14. yuyu#6310
https://codepen.io/yuyu0905/pen/GRQmEGd?editors=1100
-->

<!-- 15. 楓之聲#6945
https://codepen.io/sshane258/pen/XWZRgEX
-->

<!-- 16. Muse#9741
https://codepen.io/mu24/pen/LYQyLWb
-->

<!-- 17. Hao#2485
https://codepen.io/hao216/pen/wvydqWV
-->

<!--18. Tuhacrt#0008
https://codepen.io/Tuhacrt/pen/eYVWEKE
-->

<!--19. NaRa#7954
https://codepen.io/chou-nara/pen/NWyjgBJ
-->

<!--20. Katie
https://codepen.io/Katie24/pen/JjpNyMv
-->

<!--21. Cheng-Yu#1813
https://codepen.io/ball77111/pen/oNEWGpN?editors=1111
-->

<!--22. Nini Chen#5790
https://codepen.io/ninistyle/pen/rNJmzop?editors=1100
-->

<!--22. Bao #4997
https://codepen.io/baoh/pen/WNMjEQe
-->

<!-- 23. 阿基基
https://codepen.io/JIJI_GNI/pen/bGLWoPL
-->

<!-- 24. Arvin#6347
ans:
https://codepen.io/family929317/pen/rNJmzZY?editors=1100
-->

<!-- 25.Peng
https://codepen.io/peng-027/pen/QWQvOMY
-->

<!-- 26.RJRS#9430
https://codepen.io/RJRS/pen/ZErKavE
-->
<!-- 27.ㄚ華
https://codepen.io/jzkonzat-the-typescripter/pen/zYRwEgg
-->

<!-- 28.雷雷#7844
https://codepen.io/lei-yi-jie/pen/dydWZBJ?editors=1100
-->

<!-- 29.Joyce
https://codepen.io/joycehuang/pen/ExQmoxW?editors=1100
-->

<!-- 30.Stanley#3825
https://codepen.io/sean_1215/pen/NWyjyNp
-->

<!-- 31. JustinLiu
Codepen: https://codepen.io/justin0227/pen/poaPVoJ?editors=1100
-->

<!-- 32. LHchien
https://codepen.io/lin_chien/pen/oNEWeWy?editors=1000
-->

<!-- 33. EG#7172
CodePen:
https://codepen.io/paneg-jpeg/pen/OJQmZqV
-->

<!-- 34. Vera#5592
CodePen:
https://codepen.io/skvera/pen/WNMjKLW
-->

<!-- 35. Chaoci#2460
Codepen:https://codepen.io/gmailchao/pen/mdXmGXo?editors=1010
-->

<!-- 36. 小不點#1793
Codepen:https://codepen.io/fwmfmgkx-the-flexboxer/pen/VwQbGJN
-->

<!-- 37.眠瀾#8857
CodePen: https://codepen.io/laron9486/pen/XWZRyrw
-->

<!-- 38. #EVC1876
Codepen: https://codepen.io/elvi-chuang/pen/BaYRGWx?editors=1100
-->

<!-- 39. 黑松胖#4836
CodePen：https://codepen.io/yi-chien-hsieh/pen/MWQmPNZ?editors=1100
-->

<!-- 40. Jia-Hong Chen#3863
CodePen：https://codepen.io/iloveleon19/pen/wvydRGb
-->

<!-- 41. hsiuhsiu
CodePen：https://codepen.io/hsiuhsiu/pen/WNMjLqG?editors=1000
-->

<!-- 42. amy芳#1385
CodePen：https://codepen.io/amy-chieng/pen/eYVWxej
-->

<!-- 43. andersonshen#4675
CodePen：https://codepen.io/luxyenni-the-bold/pen/jOZmJzJ
-->

<!-- 44. 小鹿Kerwin#5730
CodePen：https://codepen.io/tkoleo84119/pen/PoQmvab
-->

<!-- Easton#3863
Codepen:
https://codepen.io/EastonIsCodingNow/pen/GRQEJYj
-->

<!-- 46. Vicky Chang#8846
Codepen:
https://codepen.io/cychang/pen/XWZgbMB?editors=1100
-->

<!-- 47. Jean
Codepen:
https://codepen.io/jean-liu/pen/GRQWdXg
-->

<!-- 48. StellaHsu #2687
Codepen:
https://codepen.io/stella950114/pen/abqwzOJ
-->

<!-- 49.Omi#3467
https://codepen.io/chian0501/pen/vYdZLbP
-->

<!-- 50.Knn#0492
https://codepen.io/Knn_84/pen/KKQqVLN
-->

<!-- 51. hw#0715
https://codepen.io/Lhwei/pen/bGLRpMW
-->

<!-- 52. WangQQ
https://codepen.io/stevetanus/pen/YzeQqoq
-->

<!-- 53. SASIMI#5099
Codepen:
https://codepen.io/sashimi1327/pen/RwQgGQq
-->

<!-- 54. 鉦勝#8333
Codepen:
https://codepen.io/sashimi1327/pen/RwQgGQq
-->

<!-- 55. Jamie
https://codepen.io/Wu220103/pen/YzeQZEj
-->

<!-- 56. lyle#8123
https://codepen.io/tomys/pen/yLvXbgz?editors=1100
-->

<!-- 57. Lina Chen
Codepen: https://codepen.io/LinaChen/pen/MWQooKz
-->

<!-- 58. Arista
Codepen: https://codepen.io/arista-hsieh/pen/GRQEvyP
-->

<!-- 59. Raymond Lam#0344
https://codepen.io/manshun-lam/pen/RwQgZgY
-->

<!-- 60. Raymond WilliamChou#7375
https://codepen.io/williampo78/pen/QWQgqOg
-->

<!-- 61. 亞芽#1185
https://codepen.io/sanahsu/pen/bGLRrPV?editors=1100
-->

<!-- 62. Triple
https://codepen.io/riku30/pen/RwQgeeP -->

<!-- 63. Carrie#2750
Codepen: https://codepen.io/carrie-wang/pen/abqwPbm
-->

<!-- 64. danny123
codepen: https://codepen.io/binlandz123/pen/xxYrmGR?editors=1100
-->

<!-- 65. skypassion5000#4151
codepen: https://codepen.io/skypassion5000/pen/gOvRZXZ?editors=1000
-->

<!-- 66. Erica Chen#6929
codepen: https://codepen.io/ericachen/pen/abqwXrM
-->

<!-- 67. 小羅#9921
codepen: https://codepen.io/peizhen0609/pen/QWQgYRO
-->

<!-- 68. RyanLu#3642
codepen: https://codepen.io/ryanlu1125/pen/ZErywMo?editors=1100
-->

<!-- 69. Chaco#2993
codepen: https://codepen.io/chaco-wang/pen/wvyeZbv?editors=1010
-->

<!-- 70. Ayre#0016
codepen:https://codepen.io/yichunlin09/pen/mdXwYae?editors=1100
-->

<!-- 71 J_u_d_y#5993
Codepen:https://codepen.io/J_u_d_y/pen/VwQzwyK?editors=1100
-->

<!-- 72 Greta#0387
Codepen: https://codepen.io/gretali/pen/QWQMwwo
-->

<!-- 73. YEN#5757
https://codepen.io/chaco-wang/pen/wvyeZbv?editors=1100 -->

<!-- 74. Cynthia1111
https://codepen.io/Cynthia1111/pen/qBxXNqB?editors=1100 -->

<!-- 75. Newman
https://codepen.io/newmankz/pen/vYdJGxw?editors=1100 -->

<!-- 76. ajhappy#6488
Codepen: https://codepen.io/ajhappy5438/pen/RwQZRKG
-->

<!-- 77. bonnieli1414#4906
Codepen: https://codepen.io/bonnieli1414/pen/rNJzMBa
-->

<!-- 78. kuo
Codepen: https://codepen.io/sunny-sun/pen/eYVEzXq?editors=1010
-->

<!--79.
Codepen: https://codepen.io/Adif/pen/XWZgyqr?editors=1100
-->

<!-- 80. Charlotte Lee
Codepen: https://codepen.io/charlotte-lee/pen/LYQjRqd?editors=1100
-->

<!--81.yuling
Codepen: https://codepen.io/igzdflpu/pen/LYQjGQO
-->

<!--82.How
Codepen: https://codepen.io/howtobefine/pen/abqypOx
-->

<!--83.kk28976328#1197
Codepen: https://codepen.io/kk28976328/pen/abqypNr
-->

<!--84. Murmurline#6969
Codepen: https://codepen.io/murmurline/pen/oNEWJpM
-->

<!--84. xuan#0808
Codepen: https://codepen.io/xuan0915/pen/mdXMxRr
-->

<!-- 85. Van.CS #2067
Codepen: https://codepen.io/fbacojji-the-selector/pen/zYRdaVm -->

<!-- 86. Georgina#9761
Codepen: https://codepen.io/9gina/pen/jOZLpba?editors=1100
-->

<!-- 87. Kiwi#9804
Codepen: https://codepen.io/kiwi1113/pen/vYdJaay
-->

<!-- 88. weihsin#5643
Codepen: https://codepen.io/weisin/pen/ExQvdpR
-->

<!-- 89. 花禮湖燒#7359
Codepen: https://codepen.io/lai-pei/pen/YzexdKV
-->

<!-- 90.RayChen#6088
Codepen: https://codepen.io/raychen1996/pen/xxYLBMb
-->

<!-- 91. Mojito#6002
codepen: https://codepen.io/vu3xk41997/pen/jOZGEMd
-->

<!-- 92. deveryone#8090
https://codepen.io/raycheng/pen/rNJmQOE?editors=1100
-->

<!-- 93 singend#0876
codepen:https://codepen.io/singend/pen/BaYwVpg
-->

<!-- 94 ling chang#1024
codepen:https://codepen.io/ling-chang/pen/MWQEPME
-->

<!--95 piha#9987
codepen:https://codepen.io/pihahaha/pen/eYVeNeg
-->

<!-- 96 小天#7177
https://codepen.io/linyujing/pen/OJQORRO
-->

<!-- 97 muzz#0345
https://codepen.io/yunnnz/pen/PoQOKaR
-->

<!-- 98 JessieCho
https://codepen.io/jessieCho/pen/JjpOaeK
-->

<!-- 99. shujhen#7734
Codepen：https://codepen.io/shujhen/pen/poaPZZM
-->

<!-- 100. JackC
Codepen: https://codepen.io/key0329/pen/zYRPmEZ
-->

<!-- 101. Tori#1287
Codepen: https://codepen.io/FlyTori/pen/OJQOaEX-->

<!--102. 家洋#6999
Codepen:
https://codepen.io/yang940648/pen/eYVyRBE
有待修正-->

<!-- 103. Zera#6060
codepen : https://codepen.io/zera-tseng/pen/oNEpEwe
-->

<!-- 104. jing#6810
https://codepen.io/jing2357/pen/KKQZQOV
-->

<!-- 105. mei#8421
https://codepen.io/Shila-Chen/pen/mdXpjeo
-->

<!-- 106. EllieLo#9809
https://codepen.io/ellie-lo/pen/PoQQMrj
-->

<!-- 107. H2CO3#7232
https://codepen.io/guan-zhen-wang/pen/QWQmNXR?editors=1100 -->

<!--108. CrystalD#6007
https://codepen.io/Crystaldu/pen/ExQEbxg
-->

<!-- 109. COLOR#4378
Codepen:https://codepen.io/color0602/pen/BaYrYVx -->

<!-- 110. Yurii#7455
Codepen:https://codepen.io/Yurii-Wen/pen/KKQeoLK -->

<!--111. potatolee
Codepen:https://codepen.io/potatoleee/pen/abqjGpW -->

<!--112. Jumpye#8601
Codepen:https://codepen.io/Jumpye/pen/XWZPNPB?editors=1100 -->

<!--113. Zoey#0839
Codepen:https://codepen.io/zoec/pen/dydwJOo
-->

<!--114. 艾芮絲#6060
Codepen: https://codepen.io/wangyingju/pen/GRQzNQd -->

<!--115. 黑白兔#0684
Codepen: https://codepen.io/johnny329/pen/GRQzaPG -->