[html] input과 button의 공통점과 차이점

button 태그

---

form 태그 안에 form data와 관련 없는 버튼을 만든 후 그 버튼을 눌렀더니 form이 전송되는 경우가 있는데,

이는 button 태그의 type속성의 default값이 submit 이기 떄문입니다.

 

사실 button태그의 type 속성 값들은 input 태그의 type 속성 값들과 겹칩니다.

 

button 태그의 type 속성 값인 submit, reset, button 은 input 태그의 type 속성으로도 사용할 수 있습니다.

그럼에도 불구하고, 더 다양한 type을 제공하는 input을 사용하지 않고, button을 사용하는 이유는 다음과 같습니다.

---

button 태그의 type 속성

---

button 태그의 type속성값은 submit, reset, button 이 있습니다.

 

submit은 폼을 제출하는 이벤트를 발생시킵니다.

reset은 폼안에 작성된 내용을 초기화시킵니다.

button은 그 자체로는 아무런 이벤트가 없고, click이벤트와 연결시켜서 자바스크립트를 활용하는 방법을 많이 사용합니다.

 

 즉, form에서 활용할 수 있는 태그입니다.

---

button vs input

---

button 스스로 닫지 않는 태그

input   스스로 닫는 태그

 

따라서 button은 하위 태그들을 추가할 수 있는 반면에 input은 그럴 수가 없습니다.

 

예를 들어, 폼의 제출 버튼에 이미지를 삽입한다고 하면 button태그를 사용하는 경우 button의 자식으로 img태그를 넣어주면 간편하게 해결이 됩니다.

 

하지만 input 태그를 사용한다면 img태그를 사용할 수 없고, css의 background-image를 사용해야 합니다.

또한, 이미지는 img태그를 사용하는 것이 검색엔진 최적화등에 도움이 된다는 사실이 있습니다.

---

출처 : https://cocoder16.tistory.com/18?category=1173631 

[HTML & CSS] input과 button의 공통점과 차이점