表单中submit和button按钮使用和区别

1.input[type=submit]

submit是button的一个特例,也是button的一种,它把提交这个动作集成了。

按回车键即提交表单

点击提交按钮后url变为?xxx=提交的内容

如果表单在点击提交按钮后需要用JS处理后再提交的话,通常都必须把submit改成button,即取消自动提交的行为,否则,会造成两次提交的结果。对于动态网页来说,也就是对数据库操作两次。或者可以在使用submit时验证加return true 或false

js中check()函数判断的时候要写 return true 或者 return false

2.input[type=button]

button,响应用户自定义的事件, 如果不指定onclick等事件处理函数,点击这个动作是不做任何事情的。

单纯的按钮功能,提交的是innerTEXT

使用场景:一个页面有多个提交按钮,需要根据用户的操作区确定到底提交到哪个控制器,这种情况下,就需要在JS中判断用户的操作,然后根据操作来给document.form1.action赋值并且document.form1,submit()来提交。

3.button[type=submit] 推荐

button就是一个按钮,不含数据,作用就是用户交互,但它也有type和value属性,type的默认值是submit,所以点击一个button会引起表单提交。
注:如果是IE浏览器,button[type]在IE中的默认值是button,这意味着它只是一个按钮,不会引发表单提交。

4.区别

使用submit后,页面支持键盘enter键操作
使用button页面往往不支持enter键。默认enter键对页面第一个submit进行操作。

执行完onClick,转到action。可以自动提交不需要onClick,所以说onclick这里可以不要。

执行完onClick,跳转文件在 js文件里控制,提交需要onClick.如果这儿没有 onClick

5.阻止表单提交

阻止表单提交用于客户端的表单验证,通用的方法是设置onsubmit。如果希望调用一个方法来决定是否组织提交,记得在此处返回方法的返回值。

猜你喜欢

转载自blog.csdn.net/weixin_38851970/article/details/107462929
今日推荐