# 🗞 8/20 (五) － 取消表單預設效果
###### tags: `JavaScript 必修篇 - 前端修練全攻略`
本日對應章節為：DOM - 選取網頁元素、Event 事件 - 讓您的網頁具有互動效果。
## 觀念複習
### preventDefault ([參考章節](https://courses.hexschool.com/courses/202011122/lectures/33556243))
取消 HTML 標籤的預設行為，以下為示範：
HTML：

<a class="myLink" href="https://www.hexschool.com/">連結</a>

JavaScript：

//先透過 querySelector 選取 class myLink
const myLink = document.querySelector(".myLink");

//監聽使用者點擊就會執行大括號的內容
myLink.addEventListener('click',function(e){
  e.preventDefault();//阻止 a 標籤默認行為，所以不會轉址
  console.log("有被點擊到");
})

## 觀念補充

### 表單預設行為
如果使用 `<input type="submit">` submit ，或是使用 `<button></button>` 但不指定 type 屬性時預設也會是 submit，而 submit 會將表單提交到伺服器。
我們通常不會使用這個方式提交表單給伺服器，所以會使用 preventDefault 取消它的預設行為，範例如下：
HTML：

<form action="#">
    帳號:
    <input type="text" name="email"> 
    <br>
    密碼:
    <input type="text" name="passward"> 
    <input type="submit" value="送出">
</form>

JavaScript：

//先透過 querySelector 選取 form
const form = document.querySelector("form");

//監聽使用者點擊就會執行大括號的內容
form.addEventListener("click", function (e) {
  e.preventDefault();//阻止 submit 屬性默認行為，所以不會提交資料
});

## 問題

情境題：小龜在路上走著走著，被熱情的艾草給攔住了。

艾草：「同學，請問你信教嗎？」

小龜：「 ...？」

艾草：「現在信教就能立刻擁有能吃的肥皂，真是太神奇了#*$&@8(#&(下略一萬字)。」

小龜：「好了，你別說話了。我信還不行嗎？我信！我信！」

艾草：「來這個是入教申請表格，填寫完後，我們就可以頒發證書給您囉！」

小龜拿起來表格，標題上大大的寫著：「你該轉職成可愛鳥鳥教徒的一萬種理由！」

請同學 fork 這個 👉 [範例](https://codepen.io/jmkhsutp/pen/BaREoJV?editors=0010)，依步驟指引完成表單，讓小龜擺脫傳教士的威脅吧！

/* 步驟一 */
//請透過 querySelector 選取下方 5 個 HTML 標籤
//<input type="text" class="form-control" id="input-name" value="小龜">
//<input type="numbr" class="form-control" id="input-age" value="1987年2月30日">
//<span class="name"></span>
//<p class="birthday border-bottom pb-1"></p>
//<button type="submit" class="send btn btn-light btn-lg">送出</button>





/* 步驟二 */
//請利用步驟一選取的 button 送出按鈕
//透過 addEventListener 監聽 'click' 事件

/* 步驟三 */
//請注意：以下步驟皆在步驟二監聽函式的{}大括號內處理
//使用 e.preventDefault() 阻止 submit 效果
//使用 .value 的方式取出步驟一選取的 input id="input-name" 欄位值
//將 input 欄位的值，使用 textContent 的方式，賦予到步驟一選取的：
//<span class="name"></span>


//使用 .value 的方式取出步驟一選取的 input id="input-age" 欄位值
//將步驟一選取的 <p class="birthday border-bottom pb-1"></p>
//使用 innerHTML 輸出： <span class="birthday">出生日期：${id="input-age欄位值}</span>

## 回報流程
將答案寫在 CodePen 複製 CodePen 連結貼至下方作業投稿區中回報就算完成了喔!

## 作業投稿區(學員自行投稿)
1. [範例投稿](https://codepen.io/jmkhsutp/pen/KKmYrLL)（可點此連結觀看解答）
2. [Shelly](https://codepen.io/shellyhwung/pen/gOWVMdL)
3. [小韭菜](https://codepen.io/jhang-jhe-wei/pen/WNjVOqM)
4. [Shoppingq](https://codepen.io/shoppingq/pen/OJmKgGm)
5. [InchIK](https://codepen.io/inchik-the-styleful/pen/LYywLwE?editors=1011)
6. [Bucky](https://codepen.io/bucky0112/pen/vYmoZvL?editors=0010)
7. [肉鬆](https://codepen.io/klrkicog/pen/wvdVqgm?editors=0010)
8. [wendy](https://codepen.io/siaochanwu/pen/MWmNvoR?editors=1011)
9. [Nyx](https://codepen.io/PhoeNyx/pen/wvdVqPX)
10. [Allen Lin](https://codepen.io/lcf7891/pen/KKmOvWr?editors=0011)
11. [Lucien](https://codepen.io/Kesiang/pen/QWveMMZ?editors=0011)
12. [Yunei](https://codepen.io/Yunei/pen/jOmgLpJ)
13. [予予](https://codepen.io/kiqzcraa/pen/NWjQvOE?editors=1010)
14. [Betty](https://codepen.io/gtut3252300/pen/ZEKgJqz?editors=0010)
15. [Rain Liao](https://codepen.io/billpop741/pen/zYwgdRx)
16. [Wei](https://codepen.io/tartle120/pen/NWjQvYO)
17. [JuneFish](https://codepen.io/yyfish1414/pen/ZEKgXGb?editors=1010)
18. [陳sam](https://codepen.io/euldpliv/pen/yLbmzBL?editors=1010)
19. [LMY](https://codepen.io/l_umei/pen/xxdvXPP)
20. [Jack](https://codepen.io/yxzzktmb/pen/oNWKGZE?editors=1011)
21. [詠銓](https://codepen.io/GGfish26/pen/QWveqQb?editors=0010)
22. [Chiang](https://codepen.io/ChiangJ/pen/BaRXwQb?editors=1010)
23. [teddy wu](https://codepen.io/hongwei0522/pen/QWveMdV)
24. [Howard](https://codepen.io/yawdnhbm/pen/ExmqbjL)
25. [Bear](https://codepen.io/adaibear/pen/jOmgaqB)
26. [timothy80617](https://codepen.io/timothy_hippo/pen/QWveOdp?editors=1010)
27. [Arista](https://codepen.io/arista-hsieh/pen/PomMEwj?editors=1010)
28. [Joe Kuo](https://codepen.io/alertislow/pen/OJmKOKg)
29. [Sandy](https://codepen.io/Sandy_L/pen/VwborJv?editors=0011)
30. [Yu Sung](https://codepen.io/kevin-hsu-the-encoder/pen/mdmNBRz?editors=0011)
31. [黃士桓](https://codepen.io/shr-huan-huang/pen/yLbmpXZ?editors=0010)
32. [佳鈴](https://codepen.io/zpyfpsxa/pen/LYyweeR?editors=1010)
33. [janice](https://codepen.io/janice880624/pen/Vwboybm)
34. [群嘉](https://codepen.io/efzdamnp-the-lessful/pen/ZEKgvwE)
35. [axlrock1021](https://codepen.io/andy1021/pen/JjNgpVZ)
36. [Jane Lin](https://codepen.io/as60160/pen/mdmNxYr)
37. [Nick](https://codepen.io/nick-lin/pen/gOWVzzo)
38. [wind](https://codepen.io/wind7y/pen/qBmeKZX)
39. [Ulysses](https://codepen.io/dullshen/pen/ExmqwqE)
40. [LALA](https://codepen.io/bobee/pen/dyWxqJO?editors=1010)
41. [中年大叔](https://codepen.io/adens123/pen/XWRvPgv?editors=0011)
42. [Eva](https://codepen.io/hiYifang/pen/vYmoVOd?editors=0010)
43. [curry](https://codepen.io/Ted19851223/pen/oNWKJLj)
44. [草皮](https://codepen.io/twgrass/pen/xxdvmKo?editors=1010)
45. [Izumi 泉](https://codepen.io/izumi-dev/pen/jOwNEYe)
46. [DoraYu](https://codepen.io/dora-yu/pen/YzQKwRV?editors=1011)
47. [Wilson Han](https://codepen.io/wi0821/pen/XWgrRQg?editors=0010)
48. [Yiren](https://codepen.io/Yiren_Liou/pen/vYZBeVz)
49. [LOMO](https://codepen.io/lockinglomo/pen/ZEyzoxP)
50. [Amber_Lin](https://codepen.io/autum55853/pen/NWgKMzM?editors=1011)
51. [皮皮](https://codepen.io/super-shrimp/pen/WNOeKwr?editors=0010)
52. [番茄](https://codepen.io/Tomato451321-W/pen/QWgLBRM?editors=0010)
53. [AmberCYT](https://codepen.io/amberTing/pen/GREKXyW?editors=1111)
54. [shehome](https://codepen.io/ks0dcongra/pen/eYROPrZ)
55. [Hedy](https://codepen.io/babogooyache/pen/dyRbLwp)
56. [乃萱](https://codepen.io/nainaikuo/pen/wvewVge?editors=1011)
57. [andersonshen](https://codepen.io/luxyenni-the-bold/pen/OJgLKrO)
58. [Susan](https://codepen.io/susanbnak/pen/jOwOVqd)
59. [肉魚](https://codepen.io/zoechen13/pen/MWoWGdL?editors=0010)
60. [Allensph](https://codepen.io/allensph/pen/rNwNRoY)
61. [yojanni](https://codepen.io/unayo/pen/KKqKYbe?editors=0010)
62. [YinChenCheng](https://codepen.io/yinchengchen/pen/OJgPYvQ?editors=0011)
63. [colinhyun](https://codepen.io/colinhyun/pen/mdwJPQB?editors=1010)
64. [安迪](https://codepen.io/andyang1030/pen/MWowjdX)
65. [Mimino](https://codepen.io/mimino/pen/bGRVzaR?editors=1010)
66. [Jung](https://codepen.io/ROUJUNG/pen/XWgKLqo?editors=1010)
67. [Peter](https://codepen.io/peter_hung/pen/xxrEvwv)
68. [Eileen](https://codepen.io/Eileen-Ching/pen/gORLqpe)
69. [PeggyTsai](https://codepen.io/pei-chi-tsai/pen/ExXwzzO?editors=0011)
70. [Joy Cheng](https://codepen.io/joycheng5432/pen/OJgOdXY?editors=0011)
71. [LucieW](https://codepen.io/Lucie_W/pen/WNOJjry)
72. [Gill](https://codepen.io/Gill-Chin/pen/oNwyrJE?editors=0010)
73. [kimn](https://codepen.io/kimn/pen/LYLJZYp?editors=0011)
74. [WA](https://codepen.io/ldddl/pen/qBjgyNy)
75. [Tim](https://codepen.io/jake1155/pen/NWgmYwW)
76. [else](https://codepen.io/ningfleur/pen/dyRBpXq?editors=0010)
77. [betty Chen](https://codepen.io/Ying-Tzu/pen/PoKLggX?editors=0010)
78. [Sunny](https://codepen.io/Sunny0509/pen/ExvqqxL?editors=1011)
79. [Tina Yen](https://codepen.io/tlorfrnl-the-typescripter/pen/qBPOPML)
80. [BrunoYu](https://codepen.io/bruno-yu/pen/yLzMOoE?editors=0010)
81. [RuoAn](https://codepen.io/LiauRuoAn/pen/YzrxMPG)
82. [庭瑋](https://codepen.io/wei_wu/pen/YzEQXYN?editors=1010)
83. [JimmyFang](https://codepen.io/pohxiqqo/pen/oNoPoXY?editors=0010)
84. [Jay](https://codepen.io/JayWang123/pen/LYOwxGb)
85. [沈依蓉](https://codepen.io/lily-oa/pen/Rwxarya?editors=0010)
86. [Min](https://codepen.io/minnn7716/pen/KKZMZyq)
87. [Alice](https://codepen.io/Charlotte0805/pen/jOYLPeE?editors=1010)
88. [GaryYang](https://codepen.io/fong-yuyang/pen/gOoJEpb?editors=1010)
89. [int Huang](https://codepen.io/intHuang/pen/vYdOOOY)
90. [Peihan Wang](https://codepen.io/PeihanWang/pen/poajQyZ?editors=0010)
91. [JackC](https://codepen.io/key0329/pen/mdXWbWR?editors=0010)
92. [Cindy Huang](https://codepen.io/cindyhuang888/pen/vYdrgBx?editors=0011)
93. [shio](https://codepen.io/shioyen/pen/bGLOEga?editors=0011)
94. [Cliff](https://codepen.io/Cliff_hex/pen/rNdYrpB?editors=1011)
95. [0808jessie](https://codepen.io/0808jessie/pen/OJvzpxd?editors=0010)
96. [Winnie](https://codepen.io/TzuHsuanWu/pen/rNdqQGV?editors=0010)
97. [Cary](https://codepen.io/yi-chien-hsieh/pen/mdLbONM?editors=0011)
98. [amy](https://codepen.io/amy-chieng/pen/PoebGQw?editors=0010)
99. [Anna](https://codepen.io/rouchen/pen/GRdOXzN?editors=1010)
100. [Alex](https://codepen.io/datsxzqg-the-selector/pen/bGMvMgX?editors=1010)
101. [piha](https://codepen.io/pihahaha/pen/NWMOJxW)
102. [sasimi](https://codepen.io/sashimi1327/pen/gOzVjBr)
103. [qoq77416416](https://codepen.io/qoq77416416/pen/NWzRWJw?editors=0010)
104. [Eden](https://codepen.io/Eden-C/pen/jOpXXVO)
105. [yunifer](https://codepen.io/yunifer1227022/pen/rNrEMEX)
106. [chih](https://codepen.io/ftbvujte-the-styleful/pen/GRXMOYo?editors=0010)
107. [KiKi](https://codepen.io/ki-ki-the-builder/pen/oNmrBKQ)
108. [HaoJing](https://codepen.io/hjxu/pen/eYXpEQm?editors=1011)
109. [wei](https://codepen.io/Wei-the-sasster/pen/rNbzjxR?editors=0011)
110. [Hua](https://codepen.io/Hua-Hsieh/pen/GRaZMrN?editors=1010)
111. [ABEI](https://codepen.io/uwmrsusb-the-solid/pen/OJeNwZy?editors=0011)
112. [yuhao](https://codepen.io/tqdtaouh-the-styleful/pen/VYwmWGE?editors=1011)
113. [William](https://codepen.io/lsaimqxa-the-vuer/pen/NPPJvZe?editors=1010)