`
小胖vs小猪
  • 浏览: 61522 次
  • 性别: Icon_minigender_2
  • 来自: 长沙
社区版块
存档分类
最新评论

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

 
阅读更多
type="button" ,"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"的区别

    在JavaScript和HTML交互中,创建按钮常常涉及到`type="button"`和`type="submit"`两种类型,它们在功能上有着显著的区别。理解这些差异对于优化表单操作和用户体验至关重要。 首先,`type="button"`的按钮是纯功能...

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

    在JavaScript和HTML交互中,创建按钮常常涉及到`type="button"`和`type="submit"`两种类型,它们在功能上有着显著的区别。理解这些差异对于构建高效且用户友好的Web表单至关重要。 首先,`type="button"`是用来创建...

    button和input type=button的区别及注意事项

    在HTML中,`&lt;button&gt;`和`&lt;input type="button"&gt;`都是用于创建按钮的元素,但它们之间存在一些关键的区别。理解这些差异对于编写兼容各种浏览器和提供良好用户体验的网页至关重要。 首先,`&lt;button&gt;`标签允许在按钮...

    submit和button的区别

    在HTML表单中,`submit`和`button`都是用于创建按钮的元素,但它们有着不同的功能和使用场景。理解这两者的区别对于构建交互式的Web应用程序至关重要。 首先,`submit`是一个特殊的`button`类型,它默认具有提交...

    html中submit和button的区别

    在探讨HTML中`submit`和`button`的区别之前,我们首先需要明确这两个元素的基本概念以及它们在网页设计和开发中的作用。HTML,全称为HyperText Markup Language,是用于创建网页的标准标记语言。在HTML中,`&lt;input&gt;`...

    button没写type=button会导致点击时提交

    然而,由于`&lt;button&gt;`元素没有指定`type`属性,浏览器按照默认行为处理,即`type="submit"`,导致了表单的提交,这可能是关闭弹窗的原因,因为表单提交可能触发了页面刷新或者跳转。 为了避免这种情况,我们需要...

    网页制作必备(最常用javascript onclick语句40条)

    &lt;INPUT onclick="window.external.ShowBrowserUI('OrganizeFavorites',null)" type=button value=ղؼ name=Submit2&gt; ``` 打开浏览器的收藏夹管理界面。 ### 11. 查看源代码 ```html &lt;INPUT onclick='window....

    sp\button和submit的区别及使用js实现页面跳转的方式

    sp\button和submit的区别及使用js实现页面跳转的方式 Button和Submit是两个常用的HTML表单元素,它们都是用于提交表单的,但是它们之间存在着一些区别。 首先,Button类型的按钮仅仅是一个普通的按钮,点击它不会...

    ASP.net开发经典button样式

    Button控件是一个服务器控件,它在客户端表现为HTML的`&lt;input type="submit"&gt;`或`&lt;input type="button"&gt;`元素。默认情况下,Button控件的样式相对简单,但我们可以对其进行自定义,以实现更精致的设计。 1. **基本...

    JavaScript在form表单中使用button按钮实现submit提交方法

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

    浅析一个表单多个Submit按钮的简单实现方法

    1. **使用name属性和JavaScript事件处理**:为每个Submit按钮设置唯一的name属性,例如`&lt;input type="submit" name="action1" value="提交1"&gt;`和`&lt;input type="submit" name="action2" value="提交2"&gt;`。然后通过...

    button没有指定type为submit点击按钮跳转不到指定url

    然而,正如题目所描述的问题,如果`&lt;button&gt;`元素没有指定`type`属性,或者没有将其设置为`submit`,在某些浏览器中,特别是旧版本的Internet Explorer(例如IE6、IE7),点击按钮可能不会触发表单的提交动作,导致...

    JS button按钮实现submit按钮提交效果

    然而form表单的 submit 且一旦提交则全部提交,所以想到的实现方法就是 使用button实现,代码实现见如下: form设置: &lt;form method=”post” name=”linkform”&gt; 隐藏的act方法设置,代码如下: &lt;input ...

    web开发中常用的input事件汇总

    &lt;INPUT onclick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type="button" value="组织收藏夹" name="Submit2"&gt; ``` 提供一个界面供用户管理他们的收藏夹,包括整理、删除等操作。 #### 查看源...

    定义input type=file 样式的方法

    &lt;input type="submit" name="submit" class="btn" value="上传" /&gt; ``` 在这个结构中,`&lt;input type="text"&gt;`用于显示用户选择的文件名,`&lt;input type="button"&gt;`则作为点击触发文件选择对话框的按钮。`&lt;input ...

    Ecshop 一键发货

    = 1 && $order.order_status == 1 }&lt;input name="invoice_no" type="text" style="color:#00F" value="" /&gt;&lt;input name="to_shipping" type="submit" style="color:#F00" value="快速发货" class="button"/&gt;{/if}

    页面提交submit的几种方法

    本文介绍了几种页面提交submit的方法,包括使用`&lt;input type="button"&gt;`配合JavaScript、使用`&lt;input type="submit"&gt;`以及结合这两种方式实现复杂的验证逻辑。同时,还探讨了在处理表单提交数据时可能遇到的编码问题...

    常用JS代码提供下载

    &lt;INPUT name=Submit2 onClick="window.external.ShowBrowserUI(OrganizeFavorites,null)" type=button value=ղؼС&gt; ``` - **功能**: 打开浏览器内置的收藏夹组织界面。 - **原理**: 调用 `ShowBrowserUI` 方法,...

    INPUT的TYPE用法

    `type="submit"` 和 `type="reset"` - 提交和重置按钮 `type="submit"`创建一个提交按钮,用于将表单数据发送到服务器进行处理。`type="reset"`则创建一个重置按钮,清除表单中的所有用户输入。 通过上述解析,...

Global site tag (gtag.js) - Google Analytics