안녕하세요, 오늘은 요며칠 동안 엉뚱한 짓을 하면서 생각이든
<input type="button>과 <button>의 차이점을 써볼려고 합니다.
이게 그냥 하다가 보니깐 같은 button인데 왜?라는 생각이 들더군요.
그래서 찾아봤습니다.
오늘도 우리의 지식을 풍족하게 만드는걸 도와줄 MDN Web Docs 선생님을 모셔보겠습니다.
일단, <input type="button">
button 유형의 <input> 요소는 단순한 푸시 버튼으로 렌더링 됩니다. 이벤트 처리기(주로 click 이벤트)를 부착하면, 사용자 지정 기능을 웹 페이지 어느 곳에나 제공할 수 있습니다.
* 참고 자료 : MDN Web Docs - <input type="button">
그리고, <button>
HTML <button> 요소는 클릭 가능한 버튼을 나타냅니다. 버튼은 양식 내부는 물론 간단한 표준 버튼 기능이 필요한 곳이라면 문서 어디에나 배치할 수 있습니다. 기본값의 HTML 버튼은 사용자 에이전트의 호스트 플랫폼과 비슷한 디자인을 따라가지만, 외형은 CSS로 변경할 수 있습니다.
* 참고 자료 : MDN Web Docs - <button>
<input type="button">
<input type="button" value="click">일단, 두가지의 button을 만들어봤습니다.
처음의 button은 value값을 주지 않은 input 타입의 button과
두번째는 value값을 지정한 button입니다.
value값을 지정해주지 않은 input태그의 button은 밋밋한 회색 버튼만 덩그러니 생겼습니다.
value값을 지정한 input태그의 button은 지정해준 value값이 버튼의 이름으로 되었네요.
그리고 input 태그의 button은 하위 요소를 추가 할 수 없습니다.
음, 예를 들자면
<button>
<span style="color: blue;">c</span>
<span style="color: red;">l</span>
<span style="color: yellow;">i</span>
<span style="color: green;">c</span>
<span style="color: purple;">k</span>
</button>button태그는 이런식으로 button에 하위 요소를 추가 할 수 있습니다.
그리고, img도 css를 거칠 필요 없이 img태그를 사용해서 버튼을 만들 수 있구요.
물론 input태그의 button도 가능하지만, css작업을 거쳐야 합니다.
글을 쓰고 보니, input태그의 button은
<input type="button">은 뒤에 따로 </>닫아주지 않아도 혼자로써 기능을 하고,
button은 <button></button> 이런식으로 닫아주네요.
그렇기 때문에 button태그에 하위요소가 추가 되는거 같습니다.
이 밖에도, button은 3가지 type의 방식이 있습니다.
submit:
버튼이 서버로 양식 데이터를 제출합니다. 지정하지 않은 경우 기본값이며, 유효하지 않은 값일 때도 사용합니다.
reset:
<input type="reset">처럼, 모든 컨트롤을 초깃값으로 되돌립니다.
button:
기본 행동이 없으며 클릭했을 때 아무것도 하지 않습니다. 클라이언트측 스크립트와 연결할 수 있습니다.
댓글