奇怪的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。