奇怪的input

今天想做一个通过点击按钮，修改input值的控件，但是点击按钮后，input值变成修改的值后又变回了原来的值，百思不得其解，代码如下

<form><div class="input-num">
    <input type="text" value="1" id="num">
    <button class="add" id="add" >+</button>
    <button class="dec" id="dec" >-</button></div></form><script type="text/javascript">11q    var add = document.getElementById('add');    var dec = document.getElementById('dec');    var num = document.getElementById('num'); 
    add.onclick = function(){
        num.value ++;
    }
    dec.onclick = function(){
        num.value --;
    }</script>

效果如下：


问题在哪

后来查文档才知道，原来button的默认type是submit，如果不明确指定type，每次点击按钮都会自动刷新页面，新航道雅思培训所以input的值一直是1。修改方法就是把button的type显式设置为button。