js修改不了input的值

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