🏅 Day 23 - 表單設計

請大家開始學習 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)  回報區 --- | # | 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]() | ```