Button에 대해

버튼 타입

• button type : submit, reset, button
• 기본값 : submit
  • 아무런 값을 지정하지 않을 경우
  • <button></button> === <button type="submit"></button>
  • form 태그 내에서 button 사용할 때, 기본적으로 submit 처리
    • type 없는 버트는 모두 submit 처리
    • submit 버튼은 새로고침됨

type="button"을 명시하는 이유

• type이 없을 경우 submit으로 처리하기 때문
  • form 내부에서는 새로고침되는 submit으로 처리
• 단순 버튼은 type="button" 명시하는것이 좋음
  • <button type="button"></button>

input의 타입이 button은 무엇일까?

• <input type="button">
• <button>은 <input>의 역할을 잇기 위해 나중에 추가된 태그
  • 둘의 기능은 동일
  • 활용성 면에서 큰 차이

차이점

• <input>은 열린 태그로 자식 요소를 가질수 없음

<form>
  <input type="submit" value="버튼" />
</form>

• <button>은 자식태그를 가질 수 있음
  • CSS에서 가상 선택자로 꾸며주는 것도 가능
  • input이 가진 한계를 넘어 다양한 이미지나 텍스트가 들어간 버튼을 표현할 수 있음

<form>
  <button>
    <img src="images/button.png" alt/>
    <span>버튼</span>
  </button>
</form>

정리

• <button>의 기본값은 submit
  • <button></button> === <button type="submit"></button>
• submit이 필요없는 버튼은 <button type="button"></button>로 type 명시하는 것이 좋음
• <button type="button"></button>과 <input type="button">은 같은 의미
  • <button>을 사용하는 것을 권장
    • <button>은 자식 요소를 가질 수 있다는 장점

해당 내용은 다음 자료를 참고했습니다.
버튼에 타입을 쓰는 이유 (button type="button")