버튼에 타입을 쓰는 이유? (button type="button")

<button> 태그의 type 속성은 해당 버튼의 타입(type)을 명시한다.

브라우저별로 <button> 요소에 대한 서로 다른 기본 타입을 사용할 수 있으므로,

<button> 요소에는 언제나 type 속성을 명시해야 한다.

 

근데 나는 이 <button> 태그가 그냥 버튼이지 버튼 타입을 줘야하나?? 생각했다.button의 type에는 3가지 값을 정해줄 수 있는데, submit   reset   button 이다.근데 만약에 아무런 값도 지정해주지 않았다면 기본값은 submit  이 된다.<button></button>  ===   <button type="submit"></button> 이라는 것!

 

속성값	설명
button	해당 버튼이 클릭할 수 있는 버튼(clickable button)임을 명시
submit	해당 버튼이 폼 데이터(form data)를 제출하는 제출버튼(submit button) 임을 명시
reset	해당 버튼이 폼 데이터를 초기값으로 리셋하는 리셋 버튼(reset button)임을 명시

 

type을 지정해주지 않으면 submit으로 되어버리기 때문에 단순 버튼에는 type="button" 을 명시해주는 것이 좋다!

 

정리글

• button의 기본 type은 submit 이다
• button에 타입을 명시하지 않아도 큰 문제는 없다. form 내부에서 쓰이지 않으며, 하위 IE가 아니면! 
  - form 태그 내에 타입 명시 없는 버튼은 submit으로 동작하므로 클릭 시 새로고침된다. 
  - IE10 이하에서 form 밖의 input에서 엔터 입력은 submit 버튼과 연결된다.
• 명확한 구분을 위해 submit이 아닌 버튼에는 type="button"을 지정해주는 것이 좋다.

 

인풋 타입 = 버튼 

<input type="button" value="버튼"/>

 

이거는 옛날 일반적인 웹사이트의 방식이였다.

아마 대부분 <form>으로 사이트를 구성했으니 웹 사이트 접속한 사람들은 form 안에서 input으로 상호작용을 했을 것!

그래서 옛날 방식말고 요즘 쓰는 <button>은 <input> 의 역할을 잇기 위해 나중에 추가된 태그이다.

 

그리고 <input> 태그는 아래 보이는 것처럼 열린 태그라서 자식 요소를 가질 수 없다는 단점을 가진다.

 

<form>

    <input type="submit" value="버튼" />

</form>

 

하지만 <button> 은 자식 태그를 가질 수 있고, CSS에서 가상 선택자로 꾸며주는 것도 가능하다.

input이 가진 한계를 넘어서 다양한 이미지나 텍스트가 들어간 버튼을 표현할 수 있게 된 것!

 

<form>

    <button>

        <img src="" alt/>

        <span> 버튼 </span>

    </button>

</form>

 

 

정리글

• <input/>의 한계를 넘기 위해 나온 것이 <button> 태그다.
• <input type="button">을 써도 되지만, <button>을 쓰는 것이 권장된다.
• <button>은 자식 요소를 가질 수 있기 때문에 이미지, 텍스트, 가상요소 등 다양한 활용이 가능하다.

 

 

참고글

https://nykim.work/96?category=773151 

버튼에 타입을 쓰는 이유 (button type="button")

http://www.tcpschool.com/html-tag-attrs/button-type

코딩교육 티씨피스쿨