html <button> submit 방지

<form action="list.do">
<button onclick="view();" value="보기"/>
</form>

<script type="text/javascript">
function view() {
    console.log('보기');
}
</script>

submit 이 아닌 별도의 기능 구현을 위해 button 요소에 onclick 속성으로 자바스크립트 function 을 바인드했다.

그러나 클릭하게 되면 form action url "list.do" 으로 submit 동작하게 된다.;;

(몰론 onclick function 까지도 실행된다.) 

 

일단 기본적으로 button 태그에 type 속성을 지정하지 않으면 type="submit" 인 것이다.

<form action="list.do">
<button type="button" onclick="view();" value="보기"/>
</form>

<script type="text/javascript">
function view() {
    console.log('list.do 으로 submit 되지 않는다.');
}
</script>
​

명시적으로 type 속성값을 "button" 으로 지정해주면 form submit 되지 않는다.