회원가입 페이지를 개발중에 아이디 중복확인, 닉네임 중복확인 버튼을 만들어 두 버튼을 클릭해서 중복확인 과정을 진행 해 중복되지 않아야만 회원가입 진행이 되는 회원가입 페이지를 만들었는데 form 태그 안에 중복확인 버튼이 있어 중복확인 버튼을 클릭하면 form 태그의 onsubmit 이벤트가 발생하는 것이었다. 이것은 내가 원하는 이벤트가 아니었는데 갑자기 예전부터 궁금하긴 했지만 아 귀찮아 그냥 아무거나 써야지~ 생각했던 input 태그로 만든 버튼과 button 태그로 만든 버튼이 무엇이 다른지 왜 버튼을 만드는 태그가 두개나 존재하는지 알아보기로 했다.

input 태그와 button 태그의 타입

input 태그

우리는 input 태그의 타입에 따라서 다양한 ui 를 만들어 데이터를 입력 받을 수 있습니다.
input 태그로 버튼을 만들 수 있는 타입은 submit, reset, button 이 있습니다.
그럼 이 타입으로 만들어진 버튼들을 클릭하면 어떤 이벤트가 발생하느냐?
submit 은 말 그대로 폼에 입력한 정보를 제출하는 이벤트가 발생합니다.
reset 은 폼에 작성되어 있는 모든 데이터를 삭제해 초기화 합니다.
button 은 정말 버튼의 기능을 하고 여기에 이벤트를 달아서 버튼을 클릭하면 해당 이벤트가 발생할 수 있도록 지정할 수 있고 대표적으로 클릭 이벤트를 달아줄 수 있습니다.

button 태그

button 태그도 input 태그와 같이 submit, reset, button 타입을 가지고 있고 해당 타입으로 생성한 버튼은 위와 같은 input 태그에 같은 타입으로 생성한 버튼과 같은 기능을 합니다.

button 태그의 기본 타입은 submit 입니다. 그래서 글의 처음에 작성했던 것과 같이 중복확인 버튼을 클릭하니 form 태그에 submit 이벤트가 발생한 것 입니다.

input 태그와 button 태그의 차이점

그럼 input 태그와 button 태그는 뭐가 다를까?
다른점 이라면 button 태그에는 하위에 태그를 집어 넣어 버튼을 커스텀 할 수 있고
input 태그는 할 수 없다는 것이다.

form 태그 안에서 submit 목적이 아닌 버튼을 사용할려면 타입을 button 으로 사용해야 한다.