[HTML] <button> , <input type="button"> 차이

button 태그의 type 속성

• submit :: 폼을 제출하는 이벤트를 발생.
• reset :: 폼안에 작성된 내용을 초기화.
• button :: 그 자체로는 아무런 이벤트가 없고, click이벤트와 연결시켜서 자바스크립트를 활용하는 방법으로 많이 사용.

button태그 type의 기본값은 submit이라 button이라고 명시해주는 것이 좋다.

button태그가 등장하기 전에 <input type="button"/>을 사용해 button동작을 대신했다고 한다.

button vs input

button태그와 input태그의 큰 차이점은 button은 스스로 닫지 않는 태그이고, input은 스스로 닫는 태그.

button은 하위 태그들을 추가할 수 있다.(input은 안됨)

button태그를 사용하는 경우 button의 자식으로 img태그 넣어 줄 수 있다. 그러나 input태그를 사용하면 img태그 사용할 수 없고 css의 background-image를 사용해야 한다.

Reference

input과 button의 공통점과 차이점

Html button의 type 속성