UI 작업을 할 때 보통 버튼은 <input type=”button” /> 또는 <button></button> 을 사용합니다. 여기서 기본적으로 <button> 요소 자체는 submit 속성을 가지고 있기 때문에 type 정의가 되어있지 않다면 submit 동작을 하게 됩니다.
<form name="data_form" method="post" action="./"> <!-- 클릭시 form(data_form)의 submit 동작을 하게 됨 --> <button id="btn_example1">버튼 예제1</button> <!-- 클릭시 submit 동작하지 않고 아무 반응 없음 --> <button type="button" id="btn_example2">버튼 예제2</button> </form>
위 예제와 같이 button 태그에 type=”button” 이 정의되어 있냐 없냐에 따라 동작이 달라질 수 있습니다. 버튼 자체를 submit 용도로 사용한다면 문제가 안되지만 스크립트 동작을 원할 경우 type을 정의해주시면 되겠습니다.
그리고 추가로 type에는 submit, button, reset 이렇게 3가지 중에 정의할 수 있습니다. 물론 <input> 태그도 마찬가지 입니다.