<input type="button">, <button>, <button type="button"> 의 차이

3가지 태그는 모두 버튼의 기능을 하는 태그들입니다.

가장 먼저 사용된 버튼 표현 방식이 <input type="button">입니다.

초창기에는 대부분의 폼 요소들을 <input>으로 구현했고, 이후 여러 가지 폼 요소들이 추가되었습니다.

그중의 하나가 버튼의 기능을 하도록 고안된 <button> 태그입니다.

<input> 태그보다 나중에 나왔고, 보다 범용으로 사용할 수 있도록 고안되었기 때문에 <button> 태그는 <input> 태그보다 다양한 표현 기능을 지원합니다.

끝나는 태그가 있기 때문에 "<button></button>" 태그 쌍 사이에 라벨 텍스트, 이미지, 하위 태그 등 다양한 태그를 넣어서 버튼을 꾸밀 수 있습니다.

그럼에도 불구하고 여전히 "<input type='button'>"이 더 많이 사용되고 있습니다.

오래전부터 사용되어 왔고, 사실 CSS로 버튼의 디자인을 커스터마이징 하면 <input type="button"> 이나 <button>이나 모두 동일한 수준의 버튼 디자인을 만들 수 있습니다.

그리고 <button> 태그 안에 여러 하위 태그들을 넣을 수는 있지만, 버튼 기능에 하위 태그를 넣어서 실제로 뭔가를 더 만드는 경우는 사실 거의 없습니다.

대부분 버튼의 기능이 자바스크립트를 이용해 버튼에 이벤트 핸들러를 붙여 버튼의 특정 동작을 정의하는 방식이 모던 웹의 일반적인 버튼 사용 방법이기 때문입니다.

그리고 한가지 중요한 문제 때문에 HTML로 버튼 기능을 정의하는데 초창기 <button> 태그를 잘 사용하지 않는 원인이 되었습니다.

"<button> 버튼 </button>과 같이 기본으로 만든 버튼은 클릭하면 폼 전송이 일어납니다.

아무런 기능을 정의하지 않았지만, 잠재적으로 <button> 태그는 폼 전송 타입(type="submit")으로 정의됩니다.

<button> 태그는 3가지 타입으로 정의할 수 있습니다.

"<button>버튼</button>"은 "<button type='submit'>버튼</button>"과 같습니다.

<button> 태그의 기본 타입이 "button" 이었으면 혼동이 훨씬 덜 했겠지만, 초창기 이 부분이 사용자들에게 불편함을 주면서 "<input type="button">"을 고수하게 만드는 한 가지 원인을 제공했습니다.

불필요한 폼 전송을 피하려면 "<button type='button'>버튼</button>" 과 같이 버튼 타입을 명시해서 버튼 태그를 사용해야 합니다.