button에 type="button"을 사용하는 이유

다른 사람의 코드를 읽다 보니 <button type="button">을 본 적이 있다.

한 번도 button에 type을 사용해본 적이 없던 나로서는 뭘까 싶었다.

솔직히 아무 문제없이 잘 사용하고 있어서 별로 관심이 없었던 것도 있다.

---

button의 type

mdn에서 button에 대해서 찾아봤다.

button의 type은 3가지가 있다.

1. submit
   서버로 양식 데이터를 제출. 타입을 지정하지 않는 경우 기본 값. 유효하지 않은 값일 때도 사용
2. reset
   <input type="reset">처럼, 모든 컨트롤을 초깃값으로 되돌린다.
3. button
   기본 행동이 없으며 클릭했을 때 아무것도 하지 않는다.

 

IE 10 이하에서 form 태그에 속하지 않은 input에서 엔터키를 누르면 submit을 실행하는 이슈가 있다.

type="button"을 명시해준다면 실행되지가 않는다.

 

보통 JS로 새로고침이 되지 않도록 조작하지만 어쩌다 JS가 동작하지 않는 경우도 있으니까 애초에 가능성을 차단하는 것이 좋은 것 같다.

 

양식 제출용 버튼이 아니라면 type="button"으로 지정하는 것을 잊지 말자

---

<input  type="button">????

여담으로 옛날에는 button 태그가 존재하기 전에 input 태그를 사용해서 <input type="button">으로 사용했다고 한다.

button과 기능은 동일하지만 input은 열린 태그로서 자식 요소를 가질 수 없다.