JS中type="button"和type="submit"的区别

 更新时间:2017年07月04日 16:25:39   作者:BigShow  
Submit是专门用于提交表单的Button,与Button的区别主要有两点:type=button 就单纯是按钮功能,type=submit 是发送表单 。下面通过本文给大家分享JS中type="button"和type="submit"的区别,感兴趣的的朋友一起看看吧

  Submit是专门用于提交表单的Button,与Button的区别主要有两点:

  type=button 就单纯是按钮功能 

  type=submit 是发送表单

   (1)Submit将表单提交(form.submit())作为其onclick后的默认事件,Button并非如此

   (2)表单提交时,所有具有name属性的html输入元素(包括input标签、button标签、select标签等)都将作为键值对提交,除了Submit对象。Submit对象只有在自己被单击后的提交中才会作为键值对被提交。

  但是对于从事WEB UI的人应该要注意到,使用submit来提高页面易用性:  

  使用submit后,页面支持键盘enter键操作,而很多WEB软件设计师,可能没有注意到submit统一.   

  用button后往往页面不支持enter键了。所以需要支持enter键,必须要设置个submit,默认enter键对页面第一个submit进行操作。  

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

  执行完onClick,跳转文件在 js文件里控制。提交需要onClick。 

  比如:

  1,onclick="form1.action='a.jsp';form1.submit();" 这样就实现了submit的功能了。   

 讲白一些,就是submit会有一个跳转,页面会刷新;而button不会刷新,就是一个button;可以用<button type="submit/button/reset"></button>来生成按钮,更加灵活,样式更好控制。  

以上所述是小编给大家介绍的JS中type="button"和type="submit"的区别,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • php对mongodb的扩展(初识如故)

    php对mongodb的扩展(初识如故)

    mongodb的数据存储格式是一种由于MongoDB的文档结构为BJSON格式(BJSON全称:Binary JSON),而BJSON格式本身就支持保存二进制格式的数据,因此可以把文件的二进制格式的数据直接保存到MongoDB的文档结构中
    2012-11-11
  • 基于JavaScript代码实现pc与手机之间的跳转

    基于JavaScript代码实现pc与手机之间的跳转

    本文通过一段代码实例给大家介绍pc跳转手机代码,手机跳转pc网站代码的相关知识,对js跳转代码相关知识感兴趣的朋友一起通过本篇文章学习吧
    2015-12-12
  • HTML的select控件美化

    HTML的select控件美化

    本文主要介绍了HTML的select控件美化以及js实现select选择功能的方法步骤。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • js前端如何写一个精确的倒计时代码

    js前端如何写一个精确的倒计时代码

    关于写倒计时大家可能都都比较熟悉,使用 setTimeout 或 setInterval 就可以搞定。几秒钟或者几分钟的倒计时这样写没有问题,但是如果是长时间的倒计时,这样写就会不准确
    2019-10-10
  • JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解

    JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解

    这篇文章主要介绍了JavaScript浏览器对象模型BOM(BrowserObjectModel),结合实例形式较为详细的分析了BOM模型的常用对象与相关使用技巧,需要的朋友可以参考下
    2016-11-11
  • Bootstrap按钮组件详解

    Bootstrap按钮组件详解

    按钮组和下拉菜单组件一样,需要依赖于button.js插件才能正常运作。通过本文给大家详细介绍Bootstrap按钮组件,感兴趣的朋友一起学习吧
    2016-04-04
  • javascript 事件对象 坐标事件说明

    javascript 事件对象 坐标事件说明

    javascript 事件对象 坐标事件说明,学习js坐标事件的朋友可以参考下。
    2010-05-05
  • 如何使用JavaScript策略模式校验表单

    如何使用JavaScript策略模式校验表单

    这篇文章主要介绍了使用JavaScript策略模式校验表单,对JS策略模式感兴趣得同学,可以参考下
    2021-04-04
  • javascipt:filter过滤介绍及使用

    javascipt:filter过滤介绍及使用

    filter是new一个新的array,这篇文章主要介绍了javascipt filter过滤介绍及使用,需要的朋友可以参考下
    2014-09-09
  • js清空表单数据的两种方式(遍历+reset)

    js清空表单数据的两种方式(遍历+reset)

    这篇文章主要介绍了js清空表单数据的两种方式(遍历+reset),需要的朋友可以参考下
    2014-07-07

最新评论