button태그와 input태그의 차이점

input태그와 button 태그의 차이점

• <input> 태그는 종료태그 없이 type 속성을 이용해 버튼에 글자나 이미지를 넣는다.

• <button> 태그는 시작태그와 종료태그 사이에 글자나 이미지 넣는다.

button 태그란?

• <button> 태그는 누를 수 있는 단추로써, 누르거나 눌렀다 놓았을 때 이벤트를 발생시키도록 하는게 주된 목적이다.

• 그러므로, 이벤트를 발생시켜야 하지만 Submit 할 것은 아닌, 단순히 UI조작(기능 선택, 레이어 보이기, 숨기기, 삭제 등)을 위한 버튼이라면 <button>엘리먼트를 사용하는 것이 시멘틱하다는 의견이 있다.

button을 submit 시키지 않는 방법

• <button> 태그의 경우 IE(=익스플로러) 경우 기본 타입이 button 이나, 타 브라우저 경우 기본 타입이 submit 이다.

• 그래서 button 타입을 눌러도 submit 되지 않도록 하려면, <button> 태그의 type 속성을 button으로 명시해줘야 한다.

form 태그와 button

• <form> 태그 안에서 버튼 만들 땐, 반드시 <input> 태그를 이용해서 button을 만들어야 한다.

• IE(=익스플로러)의 경우 시작태그와 종료태그 사이의 텍스트나 이미지를 전송하기 때문이다. (타 브라우저는 <button>태그의 속성값을 전송함)