input type = button 과 <button> 의 차이

lilyoh·2020년 7월 31일
0

둘은 기능적으로 비슷하지만 약간의 차이점이 있다.

1. <input type = button>

  • <button> 에 비해서 디자인에 제약이 있다. (css 로는 디자인 가능)

2. <button>

  • 텍스트 뿐만 아니라 이미지 or gif 요소를 자식으로 포함할 수 있다.
  • 디자인 폭이 넓다.
  • submit 기능이 기본적으로 들어있다. 따라서 submit 하고 싶지 않다면 type = "button" 을 적어줘야 한다.

<button> 의 속성값
: type = "submit" 서버 전송
: type = "reset" 내용 초기화
: type = "button" 기능 구현에 사용, 자바스크립트 이벤트 실행 목적

3. 결론

기본 링크들은 <a> 태그
자바스크립트 이벤트를 실행시켜야 하는 요소는 <button> 태그
단순한 button 기능이라면 semantic tag 인 <button> 을 사용하자.

0개의 댓글