---
# System prepended metadata

title: "\U0001F3C5 Day 23 - 表單設計"
tags: [網頁切版直播班 - 2023 夏季班]

---

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


回報區
---


| # |      Discord      |                                CodePen / 答案        |
|:-:|:----------------:|:-----------------------------------------------------:|
| 01 |Moreene|[CodePen](https://codepen.io/Moreene/pen/yLQxWWN)|
| 02 |Morning|[CodePen](https://codepen.io/sxzjnkxs-the-styleful/pen/WNYgqeV?editors=1100)|
| 03 |Eden|[Codepen](https://codepen.io/iseden/pen/bGQxPVP)|
| 04 | AYA | [Codepen](https://codepen.io/NoNameNote/pen/qBQMzWP) |
| 05 |hannahTW|[CodePen](https://codepen.io/hangineer/pen/rNQZExj)|
| 06 | Yu | [Codepen](https://codepen.io/yuch3n_chen/pen/XWyPLdM) |
| 07 | ryan.chou | [Codepen](https://codepen.io/csw8524/pen/GRwXbNz) |
| 08 | Amelia | [Codepen](https://codepen.io/Amelia-chin/pen/QWJVXGb) |
| 09 | shcopy | [Codepen](https://codepen.io/shcopy/pen/YzROoER) |
| 10 | m_m | [Codepen](https://codepen.io/minnn7716/pen/ZEmMdvK) |
| 11 | .icesam | [Codepen](https://codepen.io/icesam/pen/LYXJKmJ) |
| 12 | pinyi_9 | [Codepen](https://codepen.io/Wpypy/pen/JjeaQBZ?editors=1100) |
| 13 | 銀光菇 | [Codepen](https://codepen.io/genesynthesis/pen/KKrxjQg) |
| 14 | xuan#0808 | [Codepen](https://codepen.io/xuan0915/pen/rNQZErG?editors=1100) |
| 15 | cest_jessie | [Codepen](https://codepen.io/itsjessiechen/pen/BaGOgPy) |
| 16 | kuanju27 | [Codepen](https://codepen.io/Eero-Chiao/pen/NWELZZR) |
| 17 | Rochel#4754 | [Codepen](https://codepen.io/rochelwang1205/pen/NWELQqd)|
| 18 | SmallP | [Codepen](https://codepen.io/smallp/pen/ExOeqxp)|
| 19 | runweiting | [Codepen](https://codepen.io/weiting14/pen/rNQZERp) |
| 20 | ning_bobo | [Codepen](https://codepen.io/ninghsu/pen/JjeagPe?editors=1100) |
| 21 | lychee_kk | [Codepen](https://codepen.io/kakakala/pen/rNQZXeK) |
| 22 | Berlin | [Codepen](https://codepen.io/3qberlin/pen/PoxdMbz) |
| 23 | marskuo | [Codepen](https://codepen.io/MarsKuo/pen/gOQdVRM) |
| 24 | bf_tsai | [Codepen](https://codepen.io/BF-Tsai/pen/VwVGomZ) |
| 25 | zhu.lin | [Codepen](https://codepen.io/codepenplayer/pen/MWzqNwr) |
| 26 | hance__kao | [Codepen](https://codepen.io/HanceKao/pen/BaGOXzL?editors=1000) |
| 27 | Kimi #9564 | [Codepen](https://codepen.io/kimihu91/pen/gOQdozm)| 
| 28 | jacky7035 | [Codepen](https://codepen.io/adens123/pen/wvQEVYr) |
| 29 | Martin | [Codepen](https://codepen.io/markyourpage/pen/wvQEVQr) |
| 30 | hebin. | [codepen](https://codepen.io/landyhsiao776/pen/abQaero)|
| 31 | Uli | [codepen](https://codepen.io/uli1313/pen/mdQGNYW?editors=1100)|
| 32 | Ting.66 | [Codepen](https://codepen.io/Ting66/pen/gOQBYLo?editors=1100) |
| 33 | ann6212 | [Codepen](https://codepen.io/yqmegupa-the-styleful/pen/VwVGJON) |
| 34 | ovo.yun | [Codepen](https://codepen.io/yun-the-scripter/pen/gOQBYoe) |
| 35 | 依依 | [Codepen](https://codepen.io/Rita-Yang/pen/dyQgbdR) |
| 36 | 舜仁 | [Codepen](https://codepen.io/randomno/pen/GRwYKaX) |
| 37 | 墨墨#4571 | [Codepen](https://codepen.io/momof2e/pen/BaGqaze) | 
| 38 | hao2485 | [Codepen](https://codepen.io/Seanfeb16/pen/gOQBOWy) |
| 39 | eric0529 | [Codepen](https://codepen.io/delichaomoon/pen/yLQRLaO) |
| 40 | dodo_6666 | [Codepen](https://codepen.io/MissDouble/pen/poQxowb) |
| 41 | PayRoom | [CodePen](https://codepen.io/water38198/pen/OJaBJGV)
| 42 | townyuan | [Codepen](https://codepen.io/townyuan/pen/gOQBOZY) |
| 43 | .rainielin | [Codepen](https://codepen.io/Yunchian-Lin/pen/eYQPYyW) |
| 44 | 辣椒 | [Codepen](https://codepen.io/chilichen118/pen/dyQgoYp) |
| 45 | 出事了阿伯#9923 | [Codepen](https://codepen.io/BradpittLai/pen/WNYabqJ)|
| 46 | ming0712 | [Codepen](https://codepen.io/StevenHuang/pen/KKrGpVr)|
| 47 | Tina02 | [Codepen](https://codepen.io/chjitlox-the-bashful/pen/xxQywOX)|
| 48 | adele6199 | [Codepen](https://codepen.io/codepen-io-winnie/pen/BaGqNOq?editors=1100) |
| 49 | stevenchang421 | [Codepen](https://codepen.io/vwtrpqmm/pen/RwqeWpq) |
| 50 | 小夏 | [Codepen](https://codepen.io/michaelhsia/pen/wvQYKjB?editors=1100) |
| 51 | Paul#7426 | [Codepen](https://codepen.io/paul-1997/pen/gOQBPbp) |
| 52 | Cura | [Codepen](https://codepen.io/curalin/pen/QWJZymO?editors=1100) |
| 53 | yuyuyu#1330 | [Codepen](https://codepen.io/yuyu1215/pen/GRwYZZv) |
| 54 | yunhsinnnnnnn | [Codepen](https://codepen.io/yun___hsin/pen/OJaBNzE?editors=1100) |
| 55 | Long | [Codepen](https://codepen.io/Loonng/pen/qBQJNmx) |
| 56 | yuling#1634 | [Codepen](https://codepen.io/igzdflpu/pen/ZEmqOre) |
| 57 | Tami#6742 | [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/qBQJaYe) |
| 58 | awei | [Codepen](https://codepen.io/hong-wei/pen/JjemRgj?editors=1100) |
| 59 | cyrus_li | [Codepen](https://codepen.io/likahang/pen/RwqeGeR) |
| 60 | yu.t_liu | [Codepen](https://codepen.io/YuT200053/pen/NWEORYv?editors=1100) |
| 61 | JohnChien | [Codepen](https://codepen.io/glqwazid-the-selector/pen/eYQPmdr) |
| 62 | soniawu | [Codepen](https://codepen.io/YUJOU/pen/QWJZGOz?editors=1100) |
| 63 | Randy | [Codepen](https://codepen.io/landy510/pen/rNQqGGB?editors=1100) |
| 64 | Vic_Liou | [Codepen](https://codepen.io/allenliou-java/pen/bGQmoMm) |
| 65 | rjjq | [Codepen](https://codepen.io/rjjq/pen/bGQmYBP) |
| 66 | mm_ieat | [Codepen](https://codepen.io/MINN3/pen/rNQqpmK) |
| 67 | kimlemon0720 | [Codepen](https://codepen.io/znohmess-the-builder/pen/vYQVjXo) |
| 68 | tanuki5863 | [Codepen](https://codepen.io/tanuki320/pen/wvQYXgm) |
| 69 | Atsushi#6888 | [Codepen](https://codepen.io/atsushi-amuro/pen/dyQgJeb?editors=1100) |
| 70 | 泊岸#3466 | [Codepen](https://codepen.io/qoq77416416/pen/LYXJKZQ?editors=1100) |
| 71 |Johnson3669 | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/NWEEKyB) |
| 72 | liam9930 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/xxQQxzP) |
| 73 | wind | [Codepen](https://codepen.io/wind7y/pen/YzRRPXg) |
| 74 | Eileen#6454 | [Codepen](https://codepen.io/Eileen-io/pen/dyQQojN) |
| 75 | .ztion | [Codepen](https://codepen.io/ztion/pen/xxQQpdJ?editors=1100) |
| 76 | sinsaki225 | [Codepen](https://codepen.io/a8322342/pen/YzRRRwr) |
| 77 | Robert.H | [Codepen](https://codepen.io/Robert1205/pen/PoxxxKy) |
| 78 | meowmeow | [Codepen](https://codepen.io/snow1224/pen/mdQQgdv) |
| 79 | Renee Wang#1437 | [Codepen](https://codepen.io/RENEE-WANG-the-looper/pen/VwVEKyw) |
| 80 | Mylène | [Codepen](https://codepen.io/hamajibashi/pen/ZEmVEVO) |
| 81 | Aritan#1931 | [Codepen](https://codepen.io/Aritan/pen/ZEmVjqb) |
| 82 | 墨莉 | [Codepen](https://codepen.io/hoku0306/pen/PoxXBbR?editors=1100) |
| 83 | yuchou#5749 | [Codepen](https://codepen.io/yu-chou/pen/LYXMvoM) |
| 84 | 阿賀#3700 | [Codepen](https://codepen.io/sungho/pen/VwVqOYJ) |
| 85 | EY | [Codepen](https://codepen.io/EY-chen/pen/BaGMYMZ?editors=1010) |
| 86 | ROGER | [Codepen](https://codepen.io/jxyrmcxm-the-scripter/pen/QWJYxYa) |
| 87 | andersonshen | [Codepen](https://codepen.io/luxyenni-the-bold/pen/xxQMyvv) |
| 88 | Lianne._. | [Codepen](https://codepen.io/Elaina-L/pen/vYQbQGy?editors=1100) |
| 89 | dong2328 | [Codepen](https://codepen.io/htamlkdz-the-encoder/pen/BaGMbWJ) |
| 90 | vivianlu_ | [Codepen](https://codepen.io/viviannlu/pen/QWJoEYz) |
| 91 | hshushsophie#7338 | [Codepen](https://codepen.io/hsuhsusophie/pen/poQYVPo) |
| 92 | santu0868 | [Codepen](https://codepen.io/HatsumiSan/pen/MWzRapq) |
| 93 | yuan2781 | [Codepen](https://codepen.io/ismebir/pen/RwqOoNq) |
| 94 | NathanJames#8120 | [Codepen](https://codepen.io/ufo060204/pen/KKrYBpX) |
| 95 | 希月 | [Codepen](https://codepen.io/9001mina/pen/rNQgMGN?editors=1100) |
|96|KC_8685|[Codepen](https://codepen.io/cathy7411/pen/poQMQKe)|
|97|SKey|[Codepen](https://codepen.io/Dale-Chien/pen/eYQqwOz)|
| 98 | WA | [Codepen](https://codepen.io/ldddl/pen/KKbKNrE) |
| 99 | .zack_P | [Codepen](https://codepen.io/Designer-PH/pen/qBQzPdr?editors=1100) |
| 100| RX00#5351 | [Codepen](https://codepen.io/llqzknqv-the-styleful/pen/ExGaKXz) |
| 101 | peggy3169 | [Codepen](https://codepen.io/peggylai/pen/qBLExoB) |
| 102 | FanJJ#8061 | [Codepen](https://codepen.io/yfchenn/pen/VwqLZNj?editors=1100) |
| 103 | 歐陽龍龍#1061 | [Codepen](https://codepen.io/dizzydog-rgb/pen/RwEWyNx) |
| 104 | 阿維#2569 | [Codepen](https://codepen.io/iijojpli-the-looper/pen/RwEWEQB?editors=1100) |
| 105 | ChrisSQR | [Codepen](https://codepen.io/ChrisSQR/pen/oNJwbKa) |
| 106 | JimmyChang | [Codepen](https://codepen.io/JimmyChangWenChi/pen/PoXKpex) |
| 107 | patrickpie | [Codepen](https://codepen.io/patrickpie/pen/KKbZOXo?editors=1100) |
| 108 | 楓 | [Codepen](https://codepen.io/maplestartend/pen/XWGJzRQ) |


- 快速複製格式：

```markdown!
| 0 | user | [Codepen]() |
```
