---
tags: 網頁切版直播班 - 2021 夏季班
---
# 7/19(一) 每日任務

請大家開始學習 jQuery ，觀看 [此影片](https://www.youtube.com/watch?v=GVWOIP-HX70)
週四的每日任務將會有 jQuery 的題目來讓大家練習哩

---

除了上方的 jQuery 影片，今天也想要帶大家了解 HTML 表單：form
這週首頁設計稿中有一部分就是表單的設計，如果想要使用表單元素記得外層需要使用 <form> 標籤

<form>
  ...
</form>

**基本表單元素 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 屬性

## 回報流程

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


<!-- 解答：[Codepen 連結](https://codepen.io/AliceChiang/pen/dyXdqpL?editors=1100) -->

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

<!-- 1. 焦糖
Codepen: https://codepen.io/yen-kg/pen/BaWqyJj
-->
<!-- 2.孫 sunne
https://codepen.io/Sunne/pen/oNZrjKO -->

<!-- 3.Jasmin
Codepen:https://codepen.io/thejasmin/pen/MWpmLMK
-->

<!-- 4.Alpha
Codepen:https://codepen.io/alphatero/pen/bGWRqxz

-->

<!-- 5.LUMEI
Codepen:https://codepen.io/l_umei/pen/QWvgpVR

-->

<!-- 6.Xing
Codepen: https://codepen.io/xing10/pen/XWRgMOj
-->

<!-- 7.肉鬆
codepen: https://codepen.io/klrkicog/pen/LYyLWJL
-->

<!-- 8.huanan
codepen: https://codepen.io/hua_nan/pen/KKmqWYK
-->
<!-- 9. Vivian
codepen: https://codepen.io/vivian1223/pen/VwbWpgQ -->

<!-- 10. Lina Chen
codepen: https://codepen.io/LinaChen/pen/zYwzwGw
-->

<!-- 11.kane0927
codepen:https://codepen.io/kane-lin/pen/MWmopNK
-->
<!-- 12.陳sam
codepen:https://codepen.io/euldpliv/pen/XWRgRbM
-->
<!-- 13.Joy Cheng
codepen:https://codepen.io/joycheng5432/pen/jOmwmbP
-->

<!-- 14.peter.chen
codepen:https://codepen.io/JIAN-RONG/pen/PomjmZL?editors=1100
-->
<!-- 15. Tina Yen
codepen:https://codepen.io/tlorfrnl-the-typescripter/pen/bGWRWRN
-->
<!-- 16. curry
codepen:https://codepen.io/Ted19851223/pen/GRmEmdb
-->

<!-- 17. Sz
codepen:https://codepen.io/szyln/pen/NWjgjaq
-->

<!-- 17. YuriT
codepen:https://codepen.io/wenfisht/pen/LYyLWKO
-->

<!-- 18. 蔡明達
CodePen: https://codepen.io/bmzpfyxe/pen/LYWabjr
-->

<!-- 19. Vic
codepen: https://codepen.io/hsuan333/pen/yLbXbPg
-->

<!-- 20. Jean
codepen: https://codepen.io/jean-liu/pen/rNmwyZx
-->

<!--21. yijun
codepen:
https://codepen.io/sandy3068/pen/eYWRWXy
-->

<!--22. Gill
codepen:
https://codepen.io/Gill-Chin/pen/poPwPKR
-->

<!-- 23. Cheng Pei-hsuan
codepen: https://codepen.io/PaCheng/pen/NWjgjQb
-->

<!--24. 童筱涵
codepen: https://codepen.io/hsiaohan/pen/OJmgmdV?editors=1010
-->

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

<!--26. Cate Chang
codepen: https://codepen.io/tutz/pen/wvdedZG
-->

<!-- 27. 雷古娜
codepen: https://codepen.io/tinahopo/pen/mdmwmqg -->

<!-- 28. Elaine Liu
codepen: https://codepen.io/elaine7598/pen/ExmXXWG
-->

<!-- 29. hellocrab
https://codepen.io/hellocrab/pen/NWjggvv
-->

<!-- 30. Jun Chan
codepen: https://codepen.io/chujunchan/pen/PomjjWG
-->

<!-- 31. ZY Hsu
https://codepen.io/zihyin/pen/bGWRRMo -->

<!-- 32. 阿熊
codepen: https://codepen.io/hsiungchi/pen/YzVQxPN -->

<!-- 33. Sam li
codepen:https://codepen.io/sam830623/pen/xxdrLVw
--->

<!-- 34：Riley
codepen:https://codepen.io/jjpxbprd/pen/bGWRrBj
-->
<!-- 35. 阿和
codepen:https://codepen.io/shnny/pen/eYWREvO?editors=1100
-->

<!-- 36. Gui
codepen:https://codepen.io/guitimliu/pen/RwVgZyQ
-->

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

<!-- 38. Ruby Chiang
Codepen: https://codepen.io/rubyyl0701/pen/KKmqXwp
-->

<!-- 39. 群嘉
Codepen: https://codepen.io/efzdamnp-the-lessful/pen/MWmovqY
-->

<!-- 40. anna
Codepen: https://codepen.io/annhys/pen/GRmEONo
-->

<!-- 41. Ryan
Codepen: https://codepen.io/annhys/pen/GRmEONo

https://codepen.io/RyanYD/pen/wvdePxq
-->

<!-- 42. Fleur
Codepen: https://codepen.io/swwlee/pen/rNmWZPv
-->

<!-- 4３. yella moon
Codepen: https://codepen.io/pwbzvqja/pen/yLbXKJp
-->

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

<!-- 45. James
Codepen: https://codepen.io/james_413/pen/yLbXjvm
-->

<!-- 46. 吐司
Codepen: https://codepen.io/danielle-zhang/pen/qBmjKRx
-->

<!-- 47. ZOE WU
Codepen: https://codepen.io/Zoechiueh/pen/KKmqyvQ?editors=1000-->

<!-- 48. Katie Zhao
Codepen: https://codepen.io/katiezhao/pen/bGWRjrW -->

<!-- 49. Oober
codepen: https://codepen.io/xtsjrjdv/pen/eYWRjrP -->

<!-- 50. Archie
Codepen: https://codepen.io/WuChengHua/pen/YzVQjjw
-->

<!-- 51. Jamie
Codepen: https://codepen.io/JamieChenWs/pen/poPwZep
-->

<!-- 52. Calon
Codepen: https://codepen.io/Calon0118/pen/BaRZPqZ
-->

<!-- 53.阿瓜
https://codepen.io/hoick/pen/JjNJMJK -->

<!-- 54. stepha
codepen: https://codepen.io/w1112yb/pen/vYmZaaG
-->

<!--55. 格可
codepen:https://codepen.io/catabo/pen/BaRZPew
-->

<!--56. shanglin
codepen:https://codepen.io/rmovuagr-the-selector/pen/abWwQmQ
-->

<!--56. Summer.H
codepen:https://codepen.io/wan-chine/pen/wvdeOzz
-->

<!--57. axlrock1021
codepen: https://codepen.io/lnjbmmxo/pen/GRmvKxL
-->

<!--58. Joanna Chang
codepen: https://codepen.io/polilu1985/pen/LYyjPqJ?editors=1100
-->

<!--59. RitaHuang
https://codepen.io/Rita-Rossweisse/pen/qBmjQxz?editors=1100
-->

<!--60. Tori
https://codepen.io/hayen/pen/ExmvYJE?editors=1100
-->

<!-- 61: Sec
codepen: https://codepen.io/Sentiments/pen/mdmMJQg
-->

<!-- 62. Freya
codepen:
https://codepen.io/iyowai/pen/abWyZNa?editors=1100
-->

<!-- 63. Charles
codepen:
https://codepen.io/gemini9160/pen/LYyjZKE
-->

<!-- 64. Irene Wang
codepen:
https://codepen.io/irene-wang-the-looper/pen/qBmXNPw
-->

<!-- 65. natsu
Codepen: https://codepen.io/natsu19/pen/PomKWPw
-->

<!-- 66. 沈依蓉
Codepen:
https://codepen.io/lily-oa/pen/MWmvpoR
-->

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

<!-- 68. Sylvia-H
codepen:
https://codepen.io/Cosmosheart/pen/gOWxGQJ?editors=1100
-->
<!-- 69. ellie
https://codepen.io/hsu-yu/pen/RwVZMma
-->

<!-- 70. 黃羽均
https://codepen.io/azzfgtpo/pen/oNWePvg
-->

<!-- 71. PHIL
https://codepen.io/ctkeftjp-the-animator/pen/qBmXJrX
-->

<!-- 82. SihLe Huang
code: https://codepen.io/bugbug777/pen/wvdqYeZ
-->

<!-- 73. 黃小瑄
code: https://codepen.io/5quvgp2z/pen/MWmEpGL
-->

<!-- 74. zy
code:https://codepen.io/zy_c/pen/XWRaGeq?editors=1100
-->

<!-- 75. Una(點子數位)
code:https://codepen.io/xbsapbas-the-vuer/pen/WNjZzEx?editors=1100
-->

<!-- 76. Jim Hwang
code:https://codepen.io/jimh1129/pen/XWReYzK
-->

<!-- 77. LTL
code: https://codepen.io/ltlin93/full/eYWemjx
-->

<!-- 78. Winnie
code: https://codepen.io/winnie0208/pen/QWvOwrm
-->

<!-- 79.Zaii Hsu
codepen:https://codepen.io/ivy2846357/pen/BaRdKjM -->

<!-- 80. Erin Huang
Codepen: https://codepen.io/ErinHuang/pen/dyWZXJQ
-->
<!-- 81. Shani
codepen: https://codepen.io/ShaniMa/pen/wvdPxxa -->

<!-- 82. sarah
https://codepen.io/sarah-wang/pen/jOmaZZR?editors=1100
-->

<!-- 83. jimmyFang
https://codepen.io/pohxiqqo/pen/gOWoOQV?editors=1010
-->

<!-- 84. Joey
https://codepen.io/joyfeel/pen/jOmYEBL?editors=1100
-->

<!-- 85. KinHei Shing
https://codepen.io/kinhei-shing/pen/gOWoaXE
-->

<!-- 86. Yurie
https://codepen.io/_u_jung/pen/gOWoGBe
-->

<!-- 87. Tansy
https://codepen.io/subarashii-huch09/pen/YzVYEvJ?editors=1100
-->

<!-- 88. Min Chun Tsai
https://codepen.io/Tsai0926/pen/rNmpqLR
-->

<!-- 89. WilsonHan
https://codepen.io/wi0821/pen/KKmopRe
-->

<!-- 90. Benson
https://codepen.io/polarBear712/pen/xxdWwVV
-->
<!-- 91. debby yeh
https://codepen.io/bhliyoup/pen/poPLObg
-->

<!-- 92. irene
Codepen：https://codepen.io/lohas1107/pen/wvdjoMG?editors=1100
-->
<!-- 93. Paisley Chien
Codepen:https://codepen.io/canaerkk/pen/NWjMdRM?editors=1100
-->
<!-- 94. Paisley Chien
codepen:https://codepen.io/ovfxsavp-the-bashful/pen/NWjzBLM?editors=1010
-->

<!-- 95. Jessie Cheng
https://codepen.io/JessieMosbi/pen/XWRYvgX?editors=1010
-->

<!-- 96. 三隻小貓 radio使用上不熟
https://codepen.io/bagelover/pen/jOmpNwr?editors=1100
-->

<!-- 97. WA
https://codepen.io/ldddl/pen/ExmpLQK
-->

<!-- 98.Page
https://codepen.io/kanawin821/pen/JjNmgwd
-->

<!-- 99.ted31539
https://codepen.io/Ted31539/pen/gOWQXjY
-->

<!-- 100.聿凌
https://codepen.io/igzdflpu/pen/XWRyZYX?editors=1010
-->

<!-- 101.陳品宏
https://codepen.io/wtka/pen/VwbqrOq
-->

<!-- 102.YOYO
https://codepen.io/lumedkle/pen/vYmMedE?editors=1010
-->

<!-- 103.Joe Kuo
https://codepen.io/alertislow/pen/eYWaGYW?editors=1010
-->

<!-- 104.twoz
https://codepen.io/twoz/pen/QWvXzoX?editors=1100
-->

<!-- 105.keep
https://codepen.io/keep-/pen/yLXVOoN
-->