button按钮和submit按钮有什么区别?

本篇文章给大家带来的内容是关于button按钮和submit按钮有什么区别?有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

button-普通按钮,submit-提交按钮。
submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮,所不同的是type属性和处发响应的事件上。

使用场景:

这里说的部分使用场景,并不是只能用一种,只是说,在这种场景下使用更加方便,程序员工作量小。

用表格对比一下:

场景 button submit

网页上需要提交信息到服务器
√网页上执行一个普通的事件,如重置、清空功能。√
提交表单需要绑定事件才能提交表单数据√局部刷新√不可以使用,在触发事件的同时会提交表单。没有表单,却要提交数据而button默认是不提交任何数据。可以绑定事件的方式来提交数据。submit需要有表单时,提交时才会带数据。当然使用submit也可以,但是前提要拦截onclick事件。表单数据太多的时候需要写很多数据的获取动作推荐提交数据是要使用JS进行校验的,但如果这时候用户禁用了JS,那么校验就失效了,如果后台也没有进行校验,那么不合法的数据就进入后台了。推荐:通过button提交数据,那么如果用户禁用JS,那么数据提交动作就激活不了不推荐补充

1、上面的场景中,表单在点击提交按钮后需要用JS进行处理(包括输入验证)后再提交的话,通常我们提倡用button,如果需要使用submit提交前验证的话 应在方法前加return。onClick方法不加return 会自动提交,并不会起到约束的作用, 所以,使用submit时需要验证请加 return true或false。
如一个登陆模块,先验证用户名是否为空,如果为空,SUBMIT点击时永远提交不到from表单指定页面。只能是表单形式发送噢!而且不能再表单指定的页面中去验证传进来的值。

function check(){   var name = document.getElementById("name").value;   if(name ==  null || name == ''){        alert("用户名不能为空");           return false;   }   return true;}    

登录后复制

以上就是button按钮和submit按钮有什么区别?的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/3123731.html

(0)
上一篇 2025年3月29日 18:52:43
下一篇 2025年2月23日 21:34:44

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • url完整结构以及同源跨域处理的介绍

    本篇文章给大家带来的内容是关于url完整结构以及同源跨域处理的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 前言:随着工作时间的增长,前面学过的东西开始慢慢遗忘,抽空的时候就将一些资料整理整理,顺一顺,也当作一种温习…

    编程技术 2025年3月29日
    100
  • HTML5网页水印SDK的实现方法

    本篇文章给大家带来的内容是关于html5网页水印sdk的实现代码示例,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在网站浏览中,常常需要网页水印,以便防止用户截图或录屏暴露敏感信息后,追踪用户来源。如我们常用的钉钉软件,…

    编程技术 2025年3月29日
    100
  • CSS定位position使用介绍

    position选项来定义元素的定位position,选项有5个可选值:position、relative、absolute、fixed、inherit 属性值为relative、absolute、fixed时position | posi…

    编程技术 2025年3月29日
    100
  • 关于css中text-overflow属性与文本截断的示例代码分享

    这篇文章主要给大家介绍了关于css中text-overflow属性与文本截断的相关资料,文中给出了详细的示例代码供大家参考学习,希望本文的内容对各位前端开发者们能带一定的帮助,需要的朋友们下面跟着小编一起来学习学习吧。 前言 本文主要给大家…

    编程技术 2025年3月29日
    100
  • css属性中fontVariant的介绍与实例

    font-variant font-variant设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。取值small-caps    浏览器会显示小型大写字母…

    编程技术 2025年3月29日
    100
  • css中line-height的深入理解

    语法: line-height : normal | length 参数: normal :  默认行高length :  百分比数字 | 由浮点数字和单位标识符组成的长度值,允许为负值。其百分比取值是基于字体的高度尺寸。请参阅长度单位 说…

    编程技术 2025年3月29日
    100
  • css中text-indent 用法及与padding 的区别详解

    语法: text-indent : length  参数:  length :  百分比数字|由浮点数字和单位标识符组成的长度值,允许为负值。请参阅长度单位  说明:  检索或设置对象中的文本的缩进。在被另一个对象(如)断开的对象内不能应用…

    编程技术 2025年3月29日
    100
  • 总结css中的text-overflow属性

    语法: text-overflow : clip | ellipsis 参数: clip :  不显示省略标记(…),而是简单的裁切 ellipsis :  当对象内文本溢出时显示省略标记(…) 说明: 设置或检索是…

    编程技术 2025年3月29日
    100
  • 解读css中的vertical-align属性

    语法:  vertical-align : baseline |sub | super |top |text-top |middle |bottom |text-bottom |length 登录后复制 参数: baseline :  将支…

    编程技术 2025年3月29日
    100
  • css的text-align与align区别

    text-align的text-align: 语法:  text-align : left | right | center | justify 登录后复制 参数: left :  左对齐right :  右对齐center :  居中ju…

    编程技术 2025年3月29日
    100

发表回复

登录后才能评论