[html] input과 button tag의 차이점

! 공식문서를 참고해서 개념을 다시 한번 확인해주세요 !

 

1. input

-type 속성

button

checkbox

date

email

password

radio

search

submit

text ...

https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input

<input>: 입력 요소 - HTML: Hypertext Markup Language | MDN

 

-<form>안에서 사용

 

-스스로 닫는 태그 <input> </input>라서 하위 태그를 추가할 수 없어 디자인 폭이 좁음

이미지를 넣는 경우 css의 background-image를 사용함

 

 

2. button

-type 속성

(기본적으로 submit 기능이 있음)

submit : 서버 전송

reset : 내용 초기화

button : 그 자체로는 아무런 이벤트가 없고 js 이벤트와 연결시켜 사용

 

-아무데서나 사용

 

-스스로 닫지 않는 태그 <button>라서 하위태그를 추가할 수 있어 디자인 폭이 넓음

이미지를 넣는 경우 <img>로 추가 가능

 

Resources

https://take-it-into-account.tistory.com/201#:~:text=button%20vs%20input&text=%EB%94%B0%EB%9D%BC%EC%84%9C%20button%EC%9D%80%20%ED%95%98%EC%9C%84%20%ED%83%9C%EA%B7%B8,%EC%A3%BC%EB%A9%B4%20%EA%B0%84%ED%8E%B8%ED%95%98%EA%B2%8C%20%ED%95%B4%EA%B2%B0%EC%9D%B4%20%EB%90%A9%EB%8B%88%EB%8B%A4.