[HTML] form 태그 안에 button 태그가 있을 경우 click 이벤트가 발생하는 문제

form 태그 안에 button이 있을경우 onclick 이벤트를 달지 않았음에도 불구하고 click 이벤트가 발생했다.

심지어 click되면서 새로고침 + 라우팅까지 되어서 이게무슨.. 경우인가 계속 고민했고

처음엔 form 태그 안에 button이 있는지도 몰랐다. 

 

문제 발생 원인

form 태그 내에서 button 사용시 타입을 명시하지 않으면 default로 submit 타입이 들어가게되서 페이지가 새로고침 된 것이였다.

 

문제가 발생한 코드

<form>
    <input v-model="local.name">
    <button>클릭<button>
</form>

 

해결법은 두가지이다.

(form 태그를 div태그로 바꾸어 주거나 혹은) button의 타입을 button으로 설정해주면 된다. 

<form>
    <input v-model="local.name">
    <button type="button">클릭<button>
</form>

즉 form 태그 안에서 button을 사용할 경우 type="button"을 함께 사용해주어야 한다.

 

 

브라우저에 따라 default button 타입이 다르다고 하니.. 실수를 방지하기 위해선 button의 타입을 정확하게 명시해 주어야 겠다. 

 

Reference

https://www.w3schools.com/tags/tag_button.asp