前言：
今天用了原生的html与js写页面，突然发现，在form标签里写的button，点击button标签会刷新页面。显而易见，对于半路出家，基础知识薄弱的我来说，这实在是unbelivablely，于是网上一顿查，得到了下面的结论。
一、代码
我的代码是这样写的 ：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>dialog</title>
</head>
<body><form action=""><input type="text" name="name" value="123"><button onclick="showDialog()">按钮</button></form>
</body>
<script type="text/javascript">
function showDialog() {}
</script>
</html>点击按钮后的效果是，刷新了页面并且提交了form中的参数值：
查了资料后，MDN上是这样说的：
也就是说，button标签与form使用时，默认带有提交表单数据的作用，并且重新加载。
二、那么解决办法有哪些呢：
1、上边图片中说了一种：在button标签中加入属性type="button"，如下：
<button onclick="showDialog()" type="button">按钮</button>
2、 将button标签更换为input
3、在点击后执行的函数中加入阻止时事件e.preventDefault()，如下：
function showDialog() {var e = window.event || arguments.callee.caller.arguments[0];e.preventDefault();...
}三、拓展
上边说的是button写在form里边时，button会提交数据并重新加载，如果想让写在任何地方的按钮都能提交数据并重新加载，在HTML5中提供了一个属性：
实现如下：
<body><form action="" id="form"><input type="text" name="name" value="123"></form><button onclick="showDialog()" form="form">按钮</button>
</body>
