---
# System prepended metadata

title: "\U0001F3C5 切版任務 Day13 - 基本表單元素"
tags: [軟體工程師體驗營 - 2023]

---

---
tags: 軟體工程師體驗營 - 2023
---

# 🏅 切版任務 Day13 - 基本表單元素

## 題目 

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



## 回報流程

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

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

<!-- 

解答：
https://codepen.io/hexschool/pen/eYPJNLx?editors=1100

-->


回報區
---

| 報數 |   Discord 名字    |                              Codepen／其他回饋                               |
|:----:|:-----------------:|:----------------------------------------------------------------------------:|
|  1   |    Berlin#7338    |              [Codepen](https://codepen.io/3qberlin/pen/bGmjoRY)              |
|  2   |    Rochel#4754    |    [Codepen](https://codepen.io/rochelwang1205/pen/yLRqzbx?editors=1100)     |
|  3   |     冬天#5215     |              [Codepen](https://codepen.io/winter_/pen/XWxBeVw)               |
|  4   |     DeLi#8324     |            [Codepen](https://codepen.io/delichaomoon/pen/WNaKZKy)            |
|  5   |  Kulimusoda#2785  |            [Codepen](https://codepen.io/yuch3n_chen/pen/mdzjBXW)             |
|  6   |     Tami#6742     |         [Codepen](https://codepen.io/wqsdqbjn-the-vuer/pen/RweBLvg)          |
|  7   |     雲漢#5319     |        [codepen](https://codepen.io/keon981/pen/jOepGoX?editors=1010)        |
|  8   |     翔.#0859      |     [codepen](https://codepen.io/energy95272z/pen/VwEBMJp?editors=1100)      |
|  9   |     Lychee KK     |              [Codepen](https://codepen.io/kakakala/pen/dygjZpz)              |
|  10  |    黑白兔#0684    |             [Codepen](https://codepen.io/johnny329/pen/JjmBObE)              |
|  11  |  Jacky7035#9423   |              [Codepen](https://codepen.io/adens123/pen/WNaKXbL)              |
|  12  |   JimWang#6134    | [Codepen](https://codepen.io/Jim-Wang-the-selector/pen/NWOBwMZ?editors=1010) |
|  13  |    Snadra#1987    |              [Codepen](https://codepen.io/mlqmhltg/pen/QWZBOzW)              |
|  14  |    史滴芬#4310    |            [Codepen](https://codepen.io/steven870107/pen/gOBjGZX)            |
|  15  |     辣椒#1002     |            [Codepen](https://codepen.io/chilichen118/pen/dygjZEK)            |
|  16  |   judy123#2363    |             [Codepen](https://codepen.io/hsuantsong/pen/LYgBOMQ)             |
|  17  |     Eero#1147     |      [Codepen](https://codepen.io/Eero-Chiao/pen/QWZBOBL?editors=1100)       |
|  18  |   Ann Chou#0146   |            [Codepen](https://codepen.io/annchou_illu/pen/rNqrYQW)            |
|  19  |  しあわせね#0036  |         [Codepen](https://codepen.io/Front-end-engineer/pen/rNqrpMG)         |
|  20  |   Quantum#6093    |            [Codepen](https://codepen.io/Min-Hao-Hung/pen/XWxBzyp)            |
|  21  |   Ting.66#0912    |               [Codepen](https://codepen.io/Ting66/pen/BaqPJWy)               |
|  22  |   CuraLin#2648    |        [Codepen](https://codepen.io/curalin/pen/PoyBEzM?editors=1100)        |
|  23  |    gahwa#3562     |              [Codepen](https://codepen.io/gahwa17/pen/Exdpode)               |
|  24  |     Uli#1946      |              [Codepen](https://codepen.io/uli1313/pen/jOepYjG)               |
|  25  |    銀光菇#1692    |           [Codepen](https://codepen.io/genesynthesis/pen/ZEqjvXX)            |
|  26  |    Tina02#2691    |       [codepen](https://codepen.io/riifwerr-the-selector/pen/YzJjeyX)        |
|  27  |     vvay#4113     |        [codepen](https://codepen.io/pellmssx-the-sasster/pen/XWxBZEw)        |
|  28  |     汪汪#4486     |             [Codepen](https://codepen.io/hunwooooof/pen/yLRqvKQ)             |
|  29  |   PayRoom#8328    |             [CodePen](https://codepen.io/water38198/pen/BaqPYOJ)             |
|  30  |     DyH#0526      |              [CodePen](https://codepen.io/dorihung/pen/ExdpEKK)              |
|  31  |   Liyiling#4366   |            [Codepen](https://codepen.io/ritaling1021/pen/dygjmpR)            |
|  32  | LJerry456789#9029 |       [Codepen](https://codepen.io/aria198a/pen/yLRqKEN?editors=1000)        |
|  33  |    chichi#1534    |            [Codepen](https://codepen.io/chichihuang/pen/yLRqjYV)             |
|  34  |   ChaosTu#9311    |        [codepen](https://codepen.io/torotu/pen/jOepxGV?editors=1000)         |
|  35  |    jia yu#8896    |        [codepen](https://codepen.io/fjqxaznl-the-reactor/pen/MWPBGPr)        |
|  36  |     Kaya#8857     |             [codepen](https://codepen.io/laron9486/pen/abRjYRw)              |
|  37  |   肉個阿倫#7172     |[Codepen](https://codepen.io/i9574385/pen/MWPBVmY)|
|  38  |   Ataraxia#9977     |[Codepen](https://codepen.io/ataraxia8888/pen/abRwXvX)|
|  39  |   Hao#2485     |[Codepen](https://codepen.io/Seanfeb16/pen/QWZBxwq)|
|  40  |   satarkuo#5736     |[Codepen](https://codepen.io/SatarKuo/pen/eYPjKrX?editors=1100)|
|  41  |   Lainie#1931|[Codepen](https://codepen.io/Lainie88/pen/MWPBXmq?editors=1100)|
| 42 | Eden.C#9359 | [codepen](https://codepen.io/iseden/pen/zYmLaKe)|
| 43 | duck#3310 | [codepen](https://codepen.io/papy0715/pen/bGmjjgO)|
| 44 | Akira#9996 | [codepen](https://codepen.io/Akira-Chen/pen/QWZBVQG)|
| 45 | SKey#9905 | [codepen](https://codepen.io/Dale-Chien/pen/wvYxEXG)|
| 46 | jackwu#4437 | [codepen](https://codepen.io/jackwu1588003/pen/ZEqjMvX)|
| 47 | Evaxod#1266 | [codepen](https://codepen.io/evaxof/pen/vYVazvB?editors=1000)|
| 48 | K（アギルダー）#0386 | [codepen](https://codepen.io/klay376014/pen/GRYBYvr)|
| 49 | 浪裡小白龍#6860 | [codepen](https://codepen.io/Emillo/pen/oNaMPPV?editors=1100)|
| 50 |wiimax#4564| [Codepen](https://codepen.io/willismax/pen/gOBjBeW)
| 51 |homer#1525| [Codepen](https://codepen.io/Buckhorn/pen/rNqrZXr)
| 52 |jelly77#2088| [Codepen](https://codepen.io/Ming-chiang/pen/dygjqgL)
| 53 | Jennifer Chuang#3937 | [codepen](https://codepen.io/yujhen/pen/ZEqjqgd)|
| 54 | 吳偉雄恩#2256 | [codepen](https://codepen.io/Bamboo1212/pen/VwEBVmz?editors=1100)|
| 55 | David0799#4415 | [codepen](https://codepen.io/David0799/pen/ExdpOdW?editors=1000)|
| 56 | 兔子#6746 | [codepen](https://codepen.io/CarrotDetector/pen/NWOBEMV)|
| 57 | HsuanTang#1349 | [codepen](https://codepen.io/HsuanTang/pen/ZEqjVYL)|
| 58 | andrew0404#4576 | [codepen](https://codepen.io/Loonng/pen/NWOBeod)|
| 59 | 變羊魔法#6372 | [codepen](https://codepen.io/cssf998811/pen/XWxBowB)|
| 60 | Janet#5784 | [codepen](https://codepen.io/janetlinnn/pen/dygjaXy)|
| 61 | peihsuan#6315 | [codepen](https://codepen.io/peihsuanlai/pen/PoyBXPv)|
| 62 | N0c7iluc3n7#4390 | [codepen](https://codepen.io/huang-yu-cheng/pen/ExdprdY)|
| 63 | 司機叔叔#2463 | [codepen](https://codepen.io/bigv5566/pen/QWZBYQr)|
| 64 | 歐陽龍龍#1061 | [codepen](https://codepen.io/dizzydog-rgb/pen/MWPBZQv?editors=1100)|
| 65 | Rayo#8002 | [codepen](https://codepen.io/loborayo/pen/BaqPbzP)|
| 66 | MitA#7407 | [codepen](https://codepen.io/qaz15996398/pen/qBJyyzx)|
| 67 | YHT#1696 | [codepen](https://codepen.io/YHT31/pen/RweBQVG)|
| 68 | 姜承#8204 | [codepen](https://codepen.io/Troy0718/pen/gOBjybE)|
| 69 | snow#0255 | [codepen](https://codepen.io/snow21723/pen/ZEqjmBE)|
| 70 | Yuu#5361 | [codepen](https://codepen.io/alycehwy/pen/KKGBYQa)|
| 71 | mangotreeeee#7431| [codepen](https://codepen.io/KingJosephh/pen/rNqrgrb)|
| 72 | Pei#5161 |[Codepen](https://https://codepen.io/Pei0303/pen/oNaMRpX)
| 73 | henrykgb#5749 |[Codepen](https://codepen.io/henrymorgan666/pen/abRjgEB)
| 74 | 泊岸#3466 |[Codepen](https://codepen.io/qoq77416416/pen/oNaMroe)
| 75 | bonnieli1414#4906 |[Codepen](https://codepen.io/bonnieli1414/pen/VwEGLom?editors=1000)
| 76 | Döng#2328 |[Codepen](https://codepen.io/htamlkdz-the-encoder/pen/NWOLGRO)
| 77 | ABOOS#6276 | [Codepen](https://codepen.io/guhungyin/pen/oNaPXpg) |
| 77 | Pigsue#5981 | [Codepen](https://codepen.io/weixiii/pen/jOevWom) |
| 78 | 依依#6306 | [Codepen](https://codepen.io/Rita-Yang/pen/vYVzGxN?editors=1100) |
| 79 | 陳庭#3529 | [Codepen](https://codepen.io/yuting850309/pen/KKGxzMZ?editors=1100) |
| 80 | 鉦勝#8333 | [Codepen](https://codepen.io/atckmax823/pen/poxObzq) |
| 81 | penny#6214 | [Codepen](https://codepen.io/penny8989/pen/rNqZLQL) |
| 82 | Daisy_Li#4231 | [Codepen](https://codepen.io/lidairong-gmail-com/pen/zYmJKZE?editors=1100) |
| 83 | Aritan#1931 | [Codepen](https://codepen.io/Aritan/pen/QWZVdaP) |
| 84 | 不要迷戀媽的奶#0295 | [Codepen](https://codepen.io/kewdjbwp-the-typescripter/pen/ExdeNJY) |
| 85 | yoyo#1003 | [Codepen](https://codepen.io/pen/jOevBpV) |
| 86 | townyuan#2653 | [Codepen](https://codepen.io/townyuan/pen/BaqOpwO) |
| 87 | PoWei#8484 | [Codepen](https://codepen.io/harrison-wei-lai/pen/ExdeoJR) |
| 88 | liam9930#4129 | [Codepen](https://codepen.io/jgnjfvvt-the-lessful/pen/YzJOmQO) |
| 89 | andychiou#4830 | [Codepen](https://codepen.io/andychiou1113/pen/oNaPKdM)|
| 90 | 鄭舜仁#6606 | [Codepen](https://codepen.io/randomno/pen/ZEqqJKO)|
| 91 | 杰_jie#9088 | [Codepen](https://codepen.io/hmj8805/pen/wvYYrPo)|
| 92 | betty#0693 | [Codepen](https://codepen.io/betty-hu/pen/ExddoVN)|
| 93 | Rey#1878  | [codepen](https://codepen.io/yfatgmpc-the-bold/pen/oNaapmP?editors=1100) |
| 94 | 張金#7225 | [codepen](https://codepen.io/changxchieh/pen/abRRjor) |
| 95 | Maxine#9061 | [codepen](https://codepen.io/Maxine_Liao/pen/ZEqjNGR) |
|96|Yvonne#2721|[codepen](https://codepen.io/Evonne/pen/ZEqqjZE) |
| 97 | FiReBrO#0557 | [codepen](https://codepen.io/firebro42/pen/RweevJN) |
| 97 | alan0305#2423 | [codepen](https://codepen.io/alan0305/pen/gOBQOjX) |
| 98 | moins13#3346 | [codepen](https://codepen.io/kyechen13/pen/KKGrwmP) |
| 99 | moins13#3346 | [codepen](https://codepen.io/Wangtim4/pen/WNaYwJp) |
|100|阿榮#8277| [Codepen](https://codepen.io/codeitaday/pen/NWOERro)|
|101|小華#3024| [Codepen](https://codepen.io/franfranfran/pen/ZEqmrBy?editors=1000)|
|102|jun777#2468| [Codepen](https://codepen.io/js18151102/pen/dygQdGg?editors=1000)|
|103|jimhop#6510| [Codepen](https://codepen.io/jimsansssss/pen/JjmepZe?editors=1111)|
|104|wendyli#2155|[Codepen](https://codepen.io/rockayumitw/pen/vYVQQLN?editors=1010)
|105|JasonChang#7847|[Codepen](https://codepen.io/jsonChangJava/pen/qBJQeVm)
|106|冷曄#9378|[Codepen](https://codepen.io/HgHale/pen/MWPZYdy)
|107|alll6z#9204|[Codepen](https://codepen.io/A6Z/pen/KKGbKgQ)
|108| Jenny真#7532 | [CodePen](https://codepen.io/wei-chen-wu/pen/MWPZEYy) |
|109| Sonia Wu#7154 | [CodePen](https://codepen.io/YUJOU/pen/gOBZKNb?editors=1100) |
|110| bonnieli1414#4906 | [CodePen](https://codepen.io/bonnieli1414/pen/NWOeyWQ?editors=1000) |
|111| weiting#3489 | [CodePen](https://codepen.io/weiting14/pen/ZEqwrXp?editors=1100) |
|112| JhouHank#8132 |[CodePen](https://codepen.io/JhouHank/pen/bGmzvzR) |
|113| 小魚#8614 |[CodePen](https://codepen.io/gizelliang/pen/wvYOMBe) |
|114| 狸貓#5863 |[CodePen](https://codepen.io/tanuki320/pen/bGmZpBz) |
| 115 | 東東#5015 | [Codepen](https://codepen.io/wearymask/pen/wvYOzKe) |
|116|Syrena#3897|[Codepen](https://codepen.io/Syrena-Chung/pen/WNampoM?editors=1010)
|117|羽毛#5463|[Codepen](https://codepen.io/KYuFeather/pen/BaqbRNO)
|118|小明#4408|[Codepen](https://codepen.io/ujlylmbv-the-lessful/pen/yLRrqpV)
|119|喬喬#2824|[Codepen](https://codepen.io/joanne-wei/pen/RwembKg)
|120|Jaredlee#5887|[Codepen](https://codepen.io/jared-lee/pen/YzJbXgY?editors=1100)
|121|lishuan#3698|[Codepen](https://codepen.io/lishuan/pen/XWxwdVJ)
|122|FanJJ#8061|[Codepen](https://codepen.io/yfchenn/pen/vYVwWvb?editors=1010)
|123|Celia#1715|[Codepen](https://codepen.io/drdrvpgf-the-bashful/pen/GRYaYEE)
|124|NathanJames#8120|[Codepen](https://codepen.io/ufo060204/pen/ExdBLde)
|125|+7#8492|[Codepen](https://codepen.io/tojibom/pen/yLRdWXq)
|126|又竹#7302|[Codepen](https://codepen.io/YO_ZU/pen/WNYeeQR)
|127|初心#9021|[Codepen](https://codepen.io/Sylviax/pen/gOQbzeK?editors=1000)
|128|Joanne Hu#0010|[Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/VwVLQYy)
|129|Joanne Hu#0010|[Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/VwVLQYy)
|130|慢慢來#4035|[Codepen](https://codepen.io/kikiyang/pen/ExOVoyJ)
|131|cmlb0212|[Codepen](https://codepen.io/Chungmin0212/pen/mdQeZEo?editors=1000)|