`

type="button" ,"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进行操作。
 

    但由于ajax使用越来越多,使用ajax 时,要注意button type 为submit却会使表单自动提交,所以一般要把type改为button,而支持enter键可以在 input 框或者 button绑定事件keypress 事件,

if (evt.keyCode == Event.KEY_RETURN) {$.ajax();}

捕捉按下enter的时候 ,做提交


 讲白一些,就是submit会默认地提交表单,页面会刷新;而button不会,就是一个button;



分享到:
评论

相关推荐

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

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

    ASP.net开发经典button样式

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

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

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

    input标签里面的name与value的区别

    type="button",这就是一个按钮) type可选的值如下: button 按钮 checkbox 复选按钮组件 file 文件上传组件 hidden 隐藏域 image 图片区域 password 密码输入文本框 radio 单选按钮组件 reset 重置表单按钮 submit...

    Ecshop 一键发货

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

    html表单<form></form>

    &lt;input name="uid" type="text" value="" maxlength="20"/&gt; ... &lt;input type="button" value="HH" onclick="alert('!@#$%^&*()_+')"/&gt; &lt;input type="submit" /&gt; &lt;input type="reset"&gt; &lt;/form&gt;

    帝国cms批量增加专题插件

    &lt;input type="button" name="Submit52" value="增加专题" onclick="self.location.href='AddZt.php?enews=AddZt&lt;?=$ecms_hashur['ehref']?&gt;';"&gt; 在前面增加 &lt;input type="button" name="Submit52" value="批量增加...

    asp 批量添加

    &lt;input type="button" value="增加一条数据" onclick="addIt()" /&gt; &lt;form method="post" action="test.asp" id="myForm"&gt; &lt;input type="text" id="prname" name="prname" /&gt; &lt;input type="submit" value=...

    twitter bootstrap web 开发

    &lt;button type="submit" class="btn btn-primary"&gt;Submit&lt;/button&gt; ``` 5. **卡片**:卡片组件是一种灵活的内容容器,可用于展示文章、照片、用户评论等内容。 ```html &lt;div class="card" style="width: 18...

    网页asp php aspx提权包

    &lt;/select&gt; &lt;input type="submit" value="转到" style="width:50px;"&gt; &lt;div style="margin-top:3px;"&gt; &lt;form method="POST" action="?s=a&p={$THIS_DIR}" enctype="multipart/form-data"&gt; &lt;input type="button" ...

    网页按钮使用的各种代码.pdf

    &lt;input type="submit" name="B1" value="固定背景" style="FONT-SIZE: 12pt; background-image: url('mainbb1.jpg')"&gt; ``` 最后,我们可以控制按钮上的文字样式,包括字体大小和字体类型。使用`FONT-FAMILY`...

    input链接页面、打开新网页等等的具体实现

    &lt;input type="button" name="Submit" value="确定" class="btn" onclick="location.href='filename.html'" /&gt; ``` 这行代码定义了一个按钮,当点击该按钮时,浏览器会导航到`filename.html`页面。 2. **返回或...

    jsp音乐网源码

    &lt;input name="Submit" type="submit" class="btn_grey" value="保存"&gt; &nbsp; &lt;input name="Submit2" type="button" class="btn_grey" value="重置" onClick="window.location.reload();"&gt; &nbsp; &lt;input type=...

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

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

    网页按钮使用的各种代码.doc

    &lt;input type="submit" name="B1" value="固定背景" style="FONT-SIZE: 12pt; background-image: url('mainbb1.jpg')"&gt; ``` 最后,我们可以控制按钮上的文字样式。比如,调整字体大小和类型: ```html ...

    表单与javascript

    表单与javascript的课件,ppt中有源码,可以直接复制过来运行,是很好的教学资源: ... &lt;INPUT TYPE="submit" value="提交此表单" &gt; &nbsp;&lt;INPUT TYPE="reset" value="重置"&gt; &lt;/FORM&gt;&lt;/BODY&gt; &lt;/html&gt;

    定时关闭的滚动标签——jsp

    &lt;!-- Inserted by TRADOS: --&gt;&lt;META HTTP-EQUIV="content-type" CONTENT="text/html; charset=GB2312"&gt; &lt;title&gt;IDM Computer Solutions, Inc.... &lt;link href="style.css" rel=...&lt;input type="button"&gt;submit &lt;/html&gt;

    asp.net图书购物车

    &lt;asp:ButtonField HeaderText="购买" ButtonType ="Button" Text="购买" /&gt; &lt;PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" /&gt; &lt;SelectedRowStyle BackColor="#738A9C" Font-...

    html与xml 表单设计课件

    &lt;input type="SUBMIT" value="Submit"&gt; &lt;input type="RESET" value="Reset"&gt; &lt;!-- 下拉列表 --&gt; &lt;select name="dropdown" multiple size="dropdown_height"&gt; &lt;option value="option1"&gt;Option 1 ...

Global site tag (gtag.js) - Google Analytics