form表单中的button,点击后浏览器中出现参数

2018年4月9日 0 作者 筱枫

这其实算是一个挺冷门的坑,不过之前自己踩过,所以还是有必要记录下
请看如下代码

    
    
<form>
    名称:<input name="name" type="text"> <br>
    密码:<input name="password" type="password"> <br>
    <button>点我</button>
</form>




首先点击按钮,出现 “你好,世界”对话框,没有问题,但是请看地址栏,刚刚我输入的名称密码,以GET参数的形式被附加到了url中,同时页面也进行了一次刷新
如图

是不是很奇怪?

其实,在form表单中的button的type会被默认设置为submit,如果不想要这种默认值,有两个处理方法
1.改为

<button type="button">点我</button>

2.将button按钮放到form表单外即可

谨以此文,望后来者少踩坑。