您现在的位置: 365建站网 > 365学习 > html中点击button标签会导致提交form原因及解决方法

html中点击button标签会导致提交form原因及解决方法

文章来源:365jz.com     点击数:84    更新时间:2018-07-01 11:42   参与评论

有时候我们可能需要在表单中放置多个按钮,比如表单页面常见的按钮有创建取消。点击创建按钮会触发单击响应事件,在单击响应事件中进行提交表单,这没有任何问题。点击取消按钮的时候,触发对应的单击响应事件,这个单击响应事件中主要处理关闭表单页面逻辑,所以会关闭页面,这也正常。但是!打开控制台监听请求会发现,它也会提交表单。

20180203134843052.png

原因

出现上述的问题主要是button标签的type属性惹的祸,buttontype属性值有三个分别为buttonsubmitreset。当我们在利用button标签写一个按钮且没有指定其type属性时,IE7以下版本(具体是IE7以下还是IE5以下给忘了)会默认指定为button,其他会被默认指定为submit当按钮的type属性被指定为submit的时候,点击它会提交表单。

解决

当需在form标签中放置一个button的时候,如果这个按钮不是做提交表单的,切记一定要设置其typebutton



button的type 属性,IE的默认是 “button”,非IE默认是 “submit”。 
如果想不提交需要指定type为”button”。

<form>
    <button type="button">button</button><!--不提交form-->
    <button type="submit">button</button><!--提交form-->
    <button>button</button><!--非IE提交form,IE不提交form--></form>


如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (84人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------