button/submit

button은 기능적으로 차이가 없을까?

폼 전송 기능을 하는 <input type="submit"> 과 <button> 은 기능적으로 동일하다. 기본적으로 button 요소는 type 속성을 명시하지 않으면 submit 기능을 수행한다. 즉 폼에서 이를 대체하기 위한 목적으로는 안성맞춤이다.

button 속성값

브라우저별 기본 button 요소의 기능이 상이할 수 있으니 되도록 이를 명시하도록 하자.

• type="submit" : 폼의 전송 기능을 담당한다.
• type="reset" : 폼 작성 내용을 초기화하는데 사용한다.
• type="button" : 흔히 자바스크립트를 이용한 기능 구현에 많이 사용한다.

button 요소의 장점은?

무엇보다도 디자인적인 관점에서 input 요소와 달리 매우 자유롭다. 일반적인 요소들을 디자인하는 모든 것들을 적용할 수 있어 배경으로 이미지를 넣을 수도 있고, <button> 과 </button> 사이에 다른 태그들을 삽입할 수도 있다. 최근에는 각종 라이브러리에서 button 요소들에 대한 꾸밈을 적용한 CSS를 배포하기에 간단히 클래스명을 이용해 이를 적용할 수도 있다.

출처: https://webdir.tistory.com/421