[html/css] html button click submit issue / html 버튼 클릭시 새로고침 현상 해결방법

[html/css] html button click submit issue / html 버튼 클릭시 새로고침 현상 해결방법

 

 

html 에서

 

버튼태그를 사용하다보면

 

갑자기 버튼을 누르면 새로고침 혹은 다른 url 로 이동되는 현상이 생기곤 합니다!

 

대부분 버튼의 타입을 button 으로 설정해주지 않아서 발생되는 문제입니다!

 

 

우선 예를들어

 

아래와 같은 버튼태그가 있다고 가정하고,

<button>Test<button>

 

이 아래와 같이 버튼을 form 태그 안에 위치하게 하면

 

버튼을 클릭시 마다 새로고침 혹은 다른 url 로 이동되게 됩니다!

<form>
    ...
    <button>Test<button>
</form>

 

그럴대는

 

아래 나온 내용처럼, 버튼에 type 을 button 으로 설정해주시면 됩니다!

 

속성값이 없으면 기본적으로 submit 속성이 동작해서 새로고침되는 현상이 발생되게 됩니다!

<form>
    ...
    <button type="button">Test<button>
</form>

 

참고들 하세요!