# 🏅 Day 23 - 表單設計

請大家開始學習 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">

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

* 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 屬性

## 回報流程

將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）


<!-- 解答：
https://codepen.io/hexschool/pen/XWEKLKQ
-->

回報區
---

|#|Discord|CodePen / 答案|
|:----:|:----:|:----:|
| 1 | 陳小廷 |[Codepen](https://codepen.io/ting1124/pen/PorzrOr)|
| 2 | anderson666 |[Codepen](https://codepen.io/goodmanbuild/pen/NWZrZLx)|
| 3 | NocabWang(培根) |[Codepen](https://codepen.io/PeihanWang/pen/VwJjJVg?editors=1000)|
| 4 | tim |[Codepen](https://codepen.io/jskrtivy-the-animator/pen/abgoOme)|
| 5 | Mike |[Codepen](https://codepen.io/mike2049/pen/dyBXxbr)|
| 6 | jimmy.0706 |[Codepen](https://codepen.io/JimmyMao/pen/rNELERp)|
| 7 | Theodore |[Codepen](https://codepen.io/GustavoFringgg/pen/xxoOvLB)|
| 8 | hsiu8767 | [Codepen](https://codepen.io/hsiu8767/pen/QWXEegM) |
| 9 | MY | [Codepen](https://codepen.io/ahmomoz/pen/GRbqVWo) |
| 10 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/KKjMOJe) |
| 11 | emmayo | [Codepen](https://codepen.io/emmayo/pen/xxoEKOG) |
| 12 | KUN. | [Codepen](https://codepen.io/barry91205/pen/mdZrbem) |
| 13 | ss585801 | [Codepen](https://codepen.io/ss585801/pen/YzoGKZV?editors=1000) |
| 14 | Jim | [Codepen](https://codepen.io/JimChou/pen/XWLjrzJ?editors=1100)|
| 15 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/vYqXBeJ) |
| 16 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/gONwYve?editors=1100) |
| 17 | Sammy | [Codepen](https://codepen.io/fsczdlla-the-bold/pen/xxoEKLV?editors=1100) |
| 18 | fendy1223 | [Codepen](https://codepen.io/fendy1223/pen/yLdaBRB) |
| 19 | OSN |[Codepen](https://codepen.io/osncodepen/pen/dyBpybJ)|
| 20 | yoishere |[Codepen](https://codepen.io/yoishere/pen/PorzMpz)|
| 21 | lunlun0514 |[Codepen](https://codepen.io/f5badapple/pen/zYVKxGa?editors=1000)|
|22|Hailey|[Codepen](https://codepen.io/sxbokfja-the-flexboxer/pen/BagLyOR)|
| 23 | Kiwi | [Codepen](https://codepen.io/kiwi1113/pen/dyBpPey) |
| 24 | 俊 | [Codepen](https://codepen.io/jun12079/pen/oNrzXjx) |
| 25 | ya_meow |[Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/GRbjJWM)|
| 26 | kawa | [Codepen](https://codepen.io/z83xji6/pen/rNEMVda) |
| 27 | Noelle | [Codepen](https://codepen.io/NoelleKH/pen/KKjgzgr?editors=1100) |
| 28 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/oNrzxXb?editors=1100) |
| 29 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/JjQRXLR) |
| 30 | Chuang | [Codepen](https://codepen.io/uidoytjq-the-solid/pen/abgmNjZ?editors=1100) |
| 31 | brucelee0629 | [Codepen](https://codepen.io/xxhdklwi-the-decoder/pen/yLdaJXO) |
| 32 | wind | [Codepen](https://codepen.io/wind7y/pen/OJeRRMM) |
| 33 | 雪粒 | [Codepen](https://codepen.io/bzykdfhw-the-bashful/pen/MWMjogw) |
| 34 | xcx100 | [Codepen](https://codepen.io/c13026/pen/NWZRvbb) |
| 35 | Asu | [Codepen](https://codepen.io/wuasu/pen/RwzGZMW) |
| 36 | Anna | [Codepen](https://codepen.io/Anna-Teng/pen/YzoGxRy?editors=1100)|
| 37 | 皮皮 | [Codepen](https://codepen.io/rainbow-the-reactor/pen/GRbjONY)|
| 38 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/XWLjzGz) |
| 39 | Kai | [Codepen](https://codepen.io/beginneraboutlife116/pen/XWLjZdw?editors=1000) |
| 40 | hao jing | [Codepen](https://codepen.io/hjxu/pen/KKjgQYj) |
| 41 | abab016001 | [Codepen](https://codepen.io/abab016001Jin/pen/GRbjGwQ) |
| 42 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/yLdarmE) |
| 43 | n913239 | [Codepen](https://codepen.io/n913239/pen/jOjVNVK?editors=1000) |
| 44 | ninii傳教士 | [Codepen](https://codepen.io/niiniiii/pen/OJebJde) |
| 45 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/NWZbjjy)|
| 46 | AURA TAO | [Codepen](https://codepen.io/AURATAO/pen/JjQbyEB) |
| 47 | Kerwin | [Codepen](https://codepen.io/kerwin/pen/zYVoEzQ) |
| 48 | jerry_66983 | [Codepen](https://codepen.io/Barry-C/pen/wvLopeM) |
| 49 | zaoannihao | [Codepen](https://codepen.io/ckhwdvrx-the-solid/pen/WNqoJOx) |
| 50 | 610 | [Codepen](https://codepen.io/YI-LING-LIU/pen/eYwBxjo?editors=1100) |
| 51 | Dolce_墨 | [Codepen](https://dolcetseng.github.io/vite-training/23.html) |
| 52 | Hedwig | [Codepen](https://codepen.io/adirehfz-the-encoder/pen/dyBNbdG) |
| 53 | GAVI | [Codepen](https://codepen.io/qbafldcv-the-scripter/pen/zYVNBWB?editors=1100) |
| 54 | EdHuang | [Codepen](https://codepen.io/yide1986/pen/gONgMJZ) |
| 55 | jasonlin | [Codepen](https://codepen.io/gfswkraq-the-reactor/pen/xxogveJ) |
| 56 | chris | [Codepen](https://codepen.io/chrischen666/pen/oNrWxpO?editors=1000) |
| 57 | Chieh | [Codepen](https://codepen.io/Chieh_/pen/XWLRKyW?editors=1100) |
| 58 | Chun | [Codepen](https://codepen.io/Chun_debbie/pen/BagRQzN?editors=1100) |
| 59 | Antonio | [Codepen](https://codepen.io/gwhvusel-the-builder/pen/PormBXE) |
| 60 | Arvin | [Codepen](https://codepen.io/arvinyang1925/pen/xxodoNw) |
| 61 | glen_69515 |[Codepen](https://codepen.io/glenyaochih/pen/MWMogpm)|
| 62 | Joanne hu |[Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/RwzgQPe?editors=1100)|
| 63 | Toung | [Codepen](https://codepen.io/Toung/pen/bGPrGBg)
| 64 | Emma | [Codepen](https://codepen.io/Emma0919/pen/VwJMeRb) |
| 65 | 野鴿 | [Codepen](https://codepen.io/HoshinoSyouta/pen/OJezzJV) |
| 66 | zen | [Codepen](https://codepen.io/zen742937/pen/BagOMdE) |
| 67 | 深海 | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/MWMzPQg) |
| 68 | Lotte | [Codepen](https://codepen.io/hmkdoxuj-the-decoder/pen/MWMdxNM?editors=1100) |
| 69 | Amy(咂摳) | [Codepen](https://codepen.io/nnxucgmc-the-builder/pen/ExBmrMd) |
| 70 | Jainee | [Codepen](https://codepen.io/Jainee0110/pen/zYVgKzx) |
| 71 | Jack | [Codepen](https://codepen.io/kxbhixte-the-sasster/pen/zYgOzRL) |
| 72 | zen | [Codepen](https://codepen.io/zen742937/pen/BagOMdE) |
| 73 | Angela_la | [Codepen](https://codepen.io/Angela-the-builder/pen/MWNYzya) |
| 74 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/PwodmoL) |

<!--
| No | Discord | [Codepen]() |
-->