关于<button><form>标签的正确使用

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jianleking/article/details/53216211

1.背景

最近因为自己过失，遇到一个坑，问题不大自己折腾了很久。记录一下，代码如下：

    <form action='' id='userForm'>
        <input type='text' data-name='username' value='tom'/>
        <input type='password' data-name='password' value='123456'/>
        <button>确定</button><button type='reset'>取消</button>
    </form>

类似上面的结构，我写了一个工具方法，需要一个包裹标签，可以一键获取表单数据对象。就无意加了一个form标签，只是为了包裹，没有用到表单提交。

另外，现在开发中，用到的emmet插件。敲标签默认情况下，不会给form加action，button加type。当然，我的潜意识里，以为只有button的type=’submit’才会提交表单。然后悲剧就发生了…

2.异常结果

大概两种现象

1.network显示：ajax status canceled

2.浏览器url后面多了个问号‘?’

3.页面被刷新

3.解决方案

常用的两种方案

1.button设置 type='button'；

2.button绑定事件添加 return false;

4.总结

1.当ajax提交请求时，页面如果有其他请求操作会出现canceled状态。

2.form标签不设置action属性，提交后浏览器url会加？

3.button标签不设置type，也会提交表单

切记，勿再入坑！！！