[코딩 공부_10] <button> vs <input type="button">, 둘의 차이는?

이번에는 내가 실수했고 궁금했던 부분에 대해 포스팅하고자 한다.

내가 태그에 대한 의미나 기능에 대해 알아보지 않고 사용했기 때문에 생긴 일이라 생각한다. 

조금 더 주의해서 태그를 볼 필요가 생겼고, 똑같이 구동하지만 작은 차이가 있기 때문에 연관있는 태그는 한번 더 보고

가야된다는 생각을 하게 만든 태그이다. 내용은 스텍 오버플로를 참고하여 제작하였다.

---

<button>과 <input type="button">의 차이는 무엇일까? 

두 태그를 실행 시켰을 때 동일한 버튼의 모양이 나오기 때문에 헷갈릴 수 있지만, 둘의 역할이 다르다.

<button> 태그는 여는 태그와 닫는 태그로 이루어져 있어 컨텐츠를 감쌀 수 있고,

<input type="button">은 단일태그인 차이점이 있다.

그렇기 때문에 <button> 태그가 더 자유롭게 사용이 가능하며, 이미지와 같은 컨텐츠를 버튼으로 제작할 수 있다.

<input type="button">은 form태그안에 속해서 어떠한 정보를 전송 또는 명령하는 버튼의 역할이 가장 크다.

 

<총 정리>

구분	설명
<button> 내용 </button>	① 여는 태그와 닫는 태그로 이루어져 있다. ② 이미지, 텍스트 콘텐츠를 넣어 사용할 수 있다. → <input type="button">보다 자유롭다. ③ <form>태그 없이 사용이 가능하다. ④ CSS 의사 요소 허용 * 더 많은 스타일을 지정할 수 있으므로 선호한다.
<input type="button">	① 단일 태그로 이루어져 있다. → 열고 닫는 태그 X ② 텍스트 콘텐츠만 사용할 수 있다. ③ <form>태그 내에서만 사용이 가능하다. ④ CSS 의사 요소 허용 X * 제출 요소로 작동하려면 "input type="submit""을 사용해야한다.

 

 

출처>>

https://stackoverflow.com/questions/469059/button-vs-input-type-button-which-to-use

What are the main differences between the two, if any? Are t...