---
# System prepended metadata

title: "\U0001F3C5 Day 24"
tags: [網頁切版直播班 - 2022 夏季班]

---

---
tags: 網頁切版直播班 - 2022 夏季班
---
# 🏅 Day 24

## 表單設計

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

---

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

```htmlembedded
<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 狀態

寫法一
```htmlembedded
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
```
寫法二：
```htmlembedded
<label for="name">
  姓名: <input type="text" id="name" name="name">
</label>
```

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

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


    ```htmlembedded
    <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：用來指定表單元素的初始值
    ```htmlembedded
    <input name="text" type="text" value="我的預設值">
    ```
    <img src="https://i.imgur.com/4VXoiCT.png" width="200">
* placeholder：用來指定表單元素的提示文字
    ```htmlembedded
    <input name="name" type="text" placeholder="請填寫姓名">
    ```
    <img src="https://i.imgur.com/H9GBmQV.png" width="200">


* disabled：用來禁用該表單元素
    ```htmlembedded
     <input name="submit" type="submit" value="送出">
     <input name="submit" type="submit" value="送出" disabled>  
    ```
    <img src="https://i.imgur.com/R7MZNCE.png" width="150">



**完整的表單範例：**
```htmlembedded
<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">


## 題目

請做出以下圖示中的表單
![](https://i.imgur.com/ibUxMUv.png)

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



## 回報流程

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

![](https://i.imgur.com/vftL5i0.png)

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


回報區
---


|      Discord      |                                CodePen / 答案                                |
|:-----------------:|:----------------------------------------------------------------------------:|
|     Anna Liu#3794     |              [CodePen](https://codepen.io/anna618/pen/KKoywYW)              |
|     𝓛𝓊𝒸𝓎#8635     |              [CodePen](https://codepen.io/lucygirl/pen/YzapXRo)              |
|   CloThEs#7837    |              [CodePen](https://codepen.io/CloThEsZ/pen/poLryWQ)              |
|  Iris Huang#6727  |              [CodePen](https://codepen.io/ythuang/pen/wvmrbxq)               |
|      YC#2522      |                [CodePen](https://codepen.io/YCLu/pen/vYReweN)                |
|    Clara#1275     |              [CodePen](https://codepen.io/bsupixqu/pen/oNqGRPg)              |
|  StellaHsu#2687   |     [CodePen](https://codepen.io/stella950114/pen/WNzZBWz?editors=1100)      |
|   Jamie Wu#9345   |              [CodePen](https://codepen.io/Wu220103/pen/GRxMaeW)              |
|    布魯諾#7239    |              [CodePen](https://codepen.io/bruno-yu/pen/ZExXNZw)              |
|     大衛#4869     |              [CodePen](https://codepen.io/exnsrpjc/pen/vYRewPX)              |
|   WEI_RIO#9342    |        [CodePen](https://codepen.io/wei_wu/pen/oNqGRmj?editors=1100)         |
|   Amberhh#2465    |        [CodePen](https://codepen.io/Amberhh/pen/QWmqXjV?editors=1000)        |
|    黃士桓#7654    |           [codePen](https://codepen.io/shr-huan-huang/pen/NWYaVVY)           |
| bonnieli1414#4906 |            [codePen](https://codepen.io/bonnieli1414/pen/mdxBYNW)            |
|    JackC#0411     |              [CodePen](https://codepen.io/key0329/pen/RwMLzNp)               |
|    Joyce#3790     |      [CodePen](https://codepen.io/joycehuang/pen/MWVEMwx?editors=1100)       |
|      Ke#1391      |             [Codepen](https://codepen.io/federerke/pen/JjLrQRG)              |
|    黑白兔#0684    |             [Codepen](https://codepen.io/johnny329/pen/QWmqXKZ)              |
|     洋蔥#5295     |         [Codepen](https://codepen.io/HSUNA/pen/rNdGEaE?editors=1100)         |
|   Daisy_Li#4231   |  [codePen](https://codepen.io/lidairong-gmail-com/pen/jOzGjYJ?editors=1100)  |
|     L0F0#8733     |         [Codepen](https://codepen.io/l0f0/pen/BarwgBJ?editors=1100)          |
|  christina#6185   |             [Codepen](https://codepen.io/chrisc0210/pen/BarwgLr)             |
|     peter#123     |       [Codepen](https://codepen.io/JIAN-RONG/pen/vYReqee?editors=1100)       |
|     小諾#1866     |              [Codepen](https://codepen.io/noichan/pen/gOeGNdK)               |
| Ryan Chiang#6649  |             [Codepen](https://codepen.io/ryanchiang/pen/yLKzdvm)             |
|     Hsiu#8767     |              [Codepen](https://codepen.io/amy-hsiu/pen/JjLrQrR)              |
|  PeggyLiao#1552   |      [CodePen](https://codepen.io/PeiJu-Liao/pen/ZExXdQN?editors=1100)       |
|    Yunei#6323     |               [CodePen](https://codepen.io/Yunei/pen/abYLggJ)                |
|     威爾#1694     |              [CodePen](https://codepen.io/WILL_Wu/pen/vYReoBr)               |
|  LHchien33#6232   |             [CodePen](https://codepen.io/lin_chien/pen/YzarovE)              |
|    Arista#5802    |            [CodePen](https://codepen.io/arista-hsieh/pen/XWEevpR)            |
|    azami#5986     |               [CodePen](https://codepen.io/azami/pen/QWmqXVP)                |
|     int#7518      |              [Codepen](https://codepen.io/intHuang/pen/qBoPeRx)              |
|     Chi#7605      |              [Codepen](https://codepen.io/YoChi84/pen/yLKzmGb)               |
|   ajhappy#6488    |            [Codepen](https://codepen.io/ajhappy5438/pen/KKoXOjm)             |
|     威0#6919      |      [codepen](https://codepen.io/n0918679182/pen/eYMeOYV?editors=1000)      |
|    ssozr#4680     |               [codepen](https://codepen.io/ssozr/pen/jOzGgRy)                |
|    leeli#4243     |       [codepen](https://codepen.io/leelilee/pen/mdxBNoN?editors=1100)        |
|     鴨鴨#9822     | [Codepen](https://codepen.io/qrvrqvxv-the-selector/pen/vYReobw?editors=1100) |
|     yuyu#6310     |       [Codepen](https://codepen.io/yuyu0905/pen/poLdzZK?editors=1100)        |
| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/rNdYBYq?editors=1100) |
| kevin8349#6131 | [CodePen](https://codepen.io/kun8349/pen/GRxORKm) |
| JarDar#6980 |[codepen](https://codepen.io/jardarpen/pen/eYMeOBK)|
|WEI#0797|[Codepen](https://codepen.io/wei-z/pen/GRxORzG)|
|zera#6060|[Codepen](https://codepen.io/zera-tseng/pen/VwXrYbB)|
|雷雷#7844|[Codepen](https://codepen.io/lei-yi-jie/pen/JjLOojy)|
|Melon#0380|[Codepen](https://codepen.io/BalaFang/pen/JjLOdPm)|
|Benson#6763|[Codepen](https://codepen.io/kumashow/pen/ExEbaqR)|
|Clara Cai#7097|[Codepen](https://codepen.io/Clara-Snowy/pen/vYRWOVG)|
| 小白#2406 | [CodePen](https://codepen.io/gracewhite/pen/oNqojXx) |
|群嘉#3943|[Coedpen](https://codepen.io/efzdamnp-the-lessful/pen/BarmoYP?editors=1010)|
|RayChen#6088|[Codepen](https://codepen.io/raychen1996/pen/VwXrvJy)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/wvmPMYa)|
|    YU #0618     |[CodePen](https://codepen.io/yoken_/pen/OJvONgR)    |
|Vian#7338|[Codepen](https://codepen.io/vianwu31/pen/YzaEqEP)|
| 我是泇吟 #5189 | [Codepen](https://codepen.io/kljuqbxs/pen/eYMeJLE) |
|yu魚#1330   |  [CodePen](https://codepen.io/Yu_yu/pen/BarmLob)| 
|    咻蹦#1526    | [Codepen](https://codepen.io/emmasyu/pen/yLKPaqg?editors=1100) |
| 楓之聲#6945 |[codepen](https://codepen.io/sshane258/pen/QWmOGQq)|
| kancheng#3915 |[codepen](https://codepen.io/kancheng/pen/oNqoeGd)|
| QOO#8446 |[codepen](https://codepen.io/QOOQOOQ/pen/ZExaXao?editors=1100)|
|Karol-Kuo#5287|[codepen](https://codepen.io/ting-yu-kuo/pen/yLKPPVZ)|
|Yuna Huang#2692|[codepen](https://codepen.io/Yuna1002/pen/LYdOOoL)|
|狸貓#5863|[codepen](https://codepen.io/tanuki320/pen/MWVOrya)|
|Cliff#4606|[codepen](https://codepen.io/Cliff_hex/pen/gOeXoLZ)|
|YI#0863|[codepen](https://codepen.io/YI0305/pen/yLKPPWB?editors=1100)|
|yo_yo#2678|[codepen](https://codepen.io/djmliogn-the-flexboxer/pen/wvmPmwr)|
|Henry#7386|[Codepen](https://codepen.io/h1nr9/pen/oNqoqYx)|
|Rita916#4384|[Codepen](https://codepen.io/rita0916/pen/XWEzZvG?editors=1010)|
|hungya#0773|[Codepen](https://codepen.io/hungya777/pen/LYdOQXP?editors=1100)|
|Barret#1119|[CodePen](https://codepen.io/barret0720/pen/dymZjWp)|
|SASIMI#5099|[Codepen](https://codepen.io/sashimi1327/pen/VwXzrQX)|
|Tuhacrt#0008|[Codepen](https://codepen.io/Tuhacrt/pen/BarmqZz)|
|Tori#1248|[Codepen](https://codepen.io/FlyTori/pen/NWYwOJa)|
|Sentiments#4883|[codepen](https://codepen.io/Sentiments/pen/zYWPywZ)
|Vera#5592|[codepen](https://codepen.io/skvera/pen/jOzaxzb)
|IreneY #0086|[Codepen](https://codepen.io/HalfPlannedJourney/pen/eYMeqZJ)|
|Carrie #2750|[Codepen](https://codepen.io/carrie-wang/pen/RwMjXgB)|
|LinaChen#1796|[Codepen](https://codepen.io/LinaChen/pen/QWmOeQw)|
| Yuan962#5897 | [Codepen](https://codepen.io/Jasmine-Liao/pen/bGvabxq)|
| mei#8421 | [Codepen](https://codepen.io/Shila-Chen/pen/QWmawyR)|
| 鉦勝 #8333 | [Codepen](https://codepen.io/atckmax823/pen/XWEVbXV)|
|piha#9987|[CodePen](https://codepen.io/pihahaha/pen/vYRpxov)|
|NeilLin#3009|[CodePen](https://codepen.io/a0071421/pen/xxWpdZj)|
|得源#8355|[CodePen](https://codepen.io/aglgvsie/pen/abYELWK) |
|Cream#3449|[CodePen](https://codepen.io/frxdwbbi-the-sasster/pen/OJvzEKb) |
|Mylène#2481|[Codepen](https://codepen.io/hamajibashi/pen/GRxyVoQ)|
|阿翰 #1984|[Codepen](https://codepen.io/JohnHan05/pen/dymdMYj)|
|Deborah#0033|[Codepen](https://codepen.io/deborah-tsai/pen/OJvzBVK)|
|choubree#4350|[Codepen](https://codepen.io/BreeChou/pen/bGvLeyM?editors=1100)|
|Fang#4680|[Codepen](https://codepen.io/std95174/pen/MWVQJLL?editors=1100)|
|sophiee#7015|[Codepen](https://codepen.io/sophiee2727/pen/ZExxQYP)|
|Van.CS #2067|[Codepen](https://codepen.io/fbacojji-the-selector/pen/YzaaxyG)|
|阿蘇 #8531|[Codepen](https://codepen.io/susu3131/pen/ExEEvzg)
|aki|[codepen](https://codepen.io/aki168/pen/VwXXJOL)|
|hua#9099|[Codepen](https://codepen.io/LHua/pen/NWYMmMY)|
|艾草#4830|[Codepen](https://codepen.io/jmkhsutp/pen/BarVpKX?editors=1100)|
|紙飛機|[Codepen](https://codepen.io/paperplanea/pen/qBoKmyj?editors=1010)|
|Nini Chen#5790|[Codepen](https://codepen.io/ninistyle/pen/NWYzEGK)|
|艾芮絲#6060|[Codepen](https://codepen.io/wangyingju/pen/rNdrxPP)|
|Pony#6778|[Codepen](https://codepen.io/Pony0303/pen/abYjEda)|
|肉魚#2149|[Codepen](https://codepen.io/zoechen13/pen/OJvwvWq)|
|manson許#2295|[Codepen](https://codepen.io/oupbzfxq-the-scripter/pen/qBoMJNW)|
|Shuo#1596|[Codepen](https://codepen.io/chiangchungshuo/pen/MWVPQGP)|
|Gui#9571|[CodePen](https://codepen.io/guitimliu/pen/rNdoxNO)|
|Rena#6249|[CodePen](https://codepen.io/aureate0116/pen/WNzLXVL)|
|NathanJames#8120|[CodePen](https://codepen.io/ufo060204/pen/poLqLjV)|
|曼曼#8356|[codepen](https://codepen.io/Vanyacheer/pen/GRxeNeV)|
|RuoAn#7124|[codepen](https://codepen.io/LiauRuoAn/pen/BarEdmJ?editors=1100)|
|jin.huang#4666|[codepen](https://codepen.io/haha1196/pen/dymLVje?editors=1100)|