form表单中的button，点击后浏览器中出现参数
这其实算是一个挺冷门的坑，不过之前自己踩过，所以还是有必要记录下
请看如下代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试button</title> </head> <body> <form> 名称：<input type="text" name="name" /> <br /> 密码：<input type="password" name="password" /> <br /> <button onclick="alert('你好，世界')">点我</button> </form> </body> </html> |
首先点击按钮，出现 “你好，世界”对话框，没有问题，但是请看地址栏，刚刚我输入的名称密码，以GET参数的形式被附加到了url中，同时页面也进行了一次刷新
如图
是不是很奇怪？
其实，在form表单中的button的type会被默认设置为submit，如果不想要这种默认值，有两个处理方法
1.改为
1 | <button type="button" onclick="alert('你好，世界')">点我</button> |
2.将button按钮放到form表单外即可
谨以此文，望后来者少踩坑。