필자는 button 태그의 type 속성값으로submit과 button을 사용한다.
이마저도 submit이 99%는 차지하는 것 같다.
보통 검색창을 만들거나, 회원가입, 로그인 입력창을 만들 때 사용하는데
정확히 언제 뭐를 써야하는걸까?

button 태그

button 태그에는 3가지의 type이 있다.

1. reset
2. submit
3. button

만약, 아무런 type 선언이 없다면, 기본적으로 submit 타입으로 작동한다.

type = "reset"

1번 reset은 말그대로 초기화 버튼이다.
form 태그 내에 작성한 값들을 초기화하는 기능이 있다.

<form>
  <input placeholder="아이디를 입력하세요" />
  <button type="reset">버튼</button>
</form>

type = "submit"

2번 submit은 무엇인가를 제출한다는 뜻으로,
form 태그 내에 작성한 데이터들을 서버 등에 제출한다.
보통 이 버튼을 통해서 로그인, 회원가입 등을 구현한다.(필자는 그렇다)

그리고 이 타입은 신기하게도 새로고침을 유발한다.

버튼을 누른 뒤 새로고침으로 인해 흰 화면이 보이는 것을 알 수 있다.

type = "button"

3번 button은 말그대로 그냥그냥그냥 버튼이다.
클릭하면 눌리는 그냥 그런 버튼. 아무런 기능이 없다.

영상을 보면 알 수 있듯 다른 type과 비교해서 아무런 효과도 나타나지 않는 것을 볼 수 있다.

결론

결국...본인이 활용하고자 하는 방향으로 사용하면 된다.
button 타입을 사용하면서 onClick 같은 이벤트 핸들러를 사용하면 단순한 버튼 기능에서 벗어날 수도 있고,
form 태그의 데이터를 제출해야하는 로그인, 회원가입 등의 상황에서는 submit 타입을 사용하면 된다.
활용법이 정해져 있지는않다.

참고 자료

나나님의 블로그