--- 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)|