button 태그의 type="button"에 관하여
어쩌다가 찾게 되었나?
코드리뷰를 받다가 내 button tag에 type="button" 속성이 없는 것을 멘토님께서 보시고 왜 button 태그에는 type="button"을 써야하는지 알아보고 댓글로 남겨달라는 리뷰를 받았다.
button의 type
button의 type을 지정하는 방법은 총 4가지가 있다.
type="submit"
button을 누르면 form의 데이터를 서버로 제출한다. form 태그 내의 button에 속성(attribute)을 지정하지 않았거나 비었거나 유효하지 않을 경우이 기본값이 적용된다.
type="reset"
input의 type="reset"과 같이 모든 조작들을 기본값들로 리셋한다.
type="button"
기본값으로 어떤 기능도 없다. 클라이언트 측의 스크립트에서 요소의 이벤트가 있어야 버튼이 작동(event)한다.
결론
참조 : button의 type 설명
참조의 내용과 특히 예제를 꼭 사용하고 확인해보자
- form 태그 내부에 button이 있을 때
<form>
<button>버튼에 type이 없어요!</button>
</form>이 경우 button은 기본값으로 type="submit"을 갖는다. 그렇기 때문에 type을 설정하지 않는 button이 form 내부에 있을 경우 의도하지 않은 submit 기능이 있을 수 있다!
그렇기 때문에 반드시 button에 type="button" 속성을 추가해서 버튼이 의도하지 않은 동작을 하지 않도록 해야한다.
- form 태그 없이 button이 있을 때
<div>
<button>버튼에 type이 없어요!</button>
</div>form 외부에서 button을 누르면 그 어떤 동작도 하지 않는다. 특정 이벤트를 버튼에 적용을 해야 해당 이벤트를 버튼이 수행한다.
알고나서
이전에 button 태그를 쓸 때마다 어떤 때에는 type을 썼다가 말았다가 했는데 동기 몇몇에게 물어봤더니 안 쓴다는 사람들이 꽤 있어서 그냥 안 썼었다.
역시... 의문은 풀고 갔어야 하는데 그냥 그렇구나 하고 넘어갔더니 이런 리뷰를 받았다.
앞으로 사소한 것도 찾아보고 그 순간이라도 왜 그런지는 알고 넘어가야겠다. 느리더라도 착실하게 한 걸음씩... 꼭 기억하고 실천하는 사람이 되자.
<button type="button"></button>