HTML中表单内的普通button为何会触发表单提交？

这是一个很常见的HTML细节坑——表单内的<button>元素默认类型是submit！

你可能没注意到，HTML规范里明确规定：当<button>元素嵌套在<form>标签内部时，如果没有显式指定type属性，浏览器会自动把它的类型默认设为submit。这就导致哪怕你给按钮加了onclick事件用来打开新标签页，点击它的时候，浏览器还是会同时触发表单的提交行为，这就是你遇到问题的核心原因。

快速解决办法 #

最规范且直接的方案，就是给这个按钮显式加上type="button"属性，彻底取消它的默认提交行为：

<button type="button" onclick="window.open('http://www.jthink.net/songkong/buy.jsp','_blank');"> Get License </button>

另外还有一种临时补救方案：在onclick事件末尾加上return false;，手动阻止浏览器执行默认的提交动作，不过这种方式不如设置type属性规范，更推荐前者：

<button onclick="window.open('http://www.jthink.net/songkong/buy.jsp','_blank'); return false;"> Get License </button>

至于为什么移到表单外就正常？因为当<button>不在表单范围内时，它的默认type是button，不会触发任何表单相关的默认行为，自然就只执行你写的打开新标签页的逻辑了。

内容的提问来源于stack exchange，提问作者Paul Taylor