input中type为submit和button时，在各浏览器下提交的表单数据不同

最新推荐文章于 2022-05-08 13:53:53 发布
最新推荐文章于 2022-05-08 13:53:53 发布
阅读量162 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： 前端 ViewUI
原文链接：http://www.cnblogs.com/kuncai/archive/2010/11/03/1868252.html

以下“有” 表示在后台表单有按钮数据，无表示在后台表单中无按钮数据。

同步提交表单：

<form id="form" method="post" id="TemplateEdit" class="g_form">
<input id="s1" name="data[sumbit]" type="submit" value="submit" >
<input id="s2" name="data[button]" type="button" value="button">
</form>

 

                     FF     IE7   chrome

 sumbit          有      有      有

 button          无      无      无

 

异步提交表单：

ExpandedBlockStart.gif代码
<form id="form" method="post" id="TemplateEdit" class="g_form">
<input id="s1" name="data[sumbit]" type="submit" value="submit" >
<input id="s2" name="data[button]" type="button" value="button">
</form>
<script>
    $(document).ready(function(){
        $("#s1").click(function(){
            $("#form").submit();
        });
        $("#s2").click(function(){
            $("#form").submit();
        });
    });
</script>

 

点s1   

                     FF     IE7   chrome

 sumbit          有      有      有

 button          无      无      无

 

点s2   

                     FF     IE7   chrome

 sumbit           无     无      无

 button          无      无      无 

 

转载于:https://www.cnblogs.com/kuncai/archive/2010/11/03/1868252.html

表单提交中的input、button、submit的区别
weixin_30376163的博客
12-29 2537
　　最近项目中用了很多的表单提交，发现input、button、submit甚至回车键都可以引发表单提交，下面将分别验证他们在使用中的区别。 1.input[type=submit] 我们直接来看例子： 代码如下： <form> <input name="name"> <input type="submit" value=...
type=＂button＂ ,＂submit＂ 的区别（转）
u010548226的博客
07-22 191
type=＂button＂ ,＂submit＂ 的区别（转） Submit是专门用于提交表单的Button，与Button的区别主要有两点： 　　type=button 就单纯是按钮功能 　　type=submit 是发送表单 　　 (1)Submit将表单提交(form.submit())作为其onclick后的默认事件，Button并非如此 　　 (2)表单提交时，所有...
由IE浏览器引发的Struts2的Bug(submit无法传至服务器)
难得悠闲自得
12-01 234
Struts2问题还真不少，哎，无耐已经上了这条船。 现在公开这个由IE浏览器引起的Bug，希望引起大家的注意。 下文也将给出一个简单的解决方案。 另注：如果觉得本文还点价值，请顺便帮忙解决一下以下的问题，不胜感激。 （问题放到“问答”里，没人理啊，无耐再次被扔到“问答”里，javaeye管理员的某些倾向性实在无法理解） [url]http://www.iteye.com/probl...
浏览器提交数据的两种方式
aiyangliao7942的博客
03-29 966
一、浏览器提交数据方式？(例) 1.表单：(数据藏在请求报文体中,格式:txtname=james&txtpwd=123) <form action=“login.ashx” method=“post”> <input type=“text” name=“txtname” /> <inpu...
input中submit和button的区别
AshlingCD
01-06 2579
在写到提交的时候混淆了submit和button，结果一直没能跳转界面。 区别： 1、submit和button,二者都以按钮的形式展现,看起来都是按钮，所不同的是type属性和处发响应的事件上:submit会提交表单，button不会提交表单 submit默认为form提交，可以提交表单（form）. button则响应用户自定义的事件,如果不指定onclick等事件处理函数，它是不做
html 提交按钮(input submit)
热门推荐
Claroja
02-02 2万+
submit默认是提交表单,跳转页面或刷新(跳转到本页),可以用prevent来阻止 <form> <input name="key"> <input type="submit" value="提交"> </form> 提交为: localhost?key=输入内容 这里只提交了第一个input元素的key和value(name指定的key,value是输入内容) 第二个input没有提交 但是当我们给第二个input加上name属性时也会
input、button的不同type值在ajax提交表单时导致的陷阱
09-06
在前端开发中，我们经常遇到一些看似简单却隐藏着危险的陷阱，这篇文章就讲解了在AJAX提交表单时，input和button的不同type值可能导致的陷阱。 首先，让我们来了解一下input和button的type属性。input标签的type...
input submit、button和回车键提交数据详解
10-21
它的 `type` 默认值在不同浏览器中可能有所差异，IE 默认为 `button`，不引发表单提交，而在其他浏览器中默认为 `submit`。`button` 也可以设置 `type="reset"` 来重置表单内容，方便用户重新填写。 再者，回车键...
JS中type="button"和type="submit"的区别
10-19
此外，如果你的表单中有多个`type="submit"`按钮，按下回车键时，浏览器会选择第一个`submit`按钮来提交表单。 在易用性方面，使用`type="submit"`可以提升用户体验，因为它允许用户通过键盘的回车键来提交表单，而...
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
10-31
在一个网页表单(form)中，通常我们通过设置不同的提交按钮(submit或button)来实现将数据提交至不同的处理页面。然而，在某些特定情况下，我们可能需要仅使用一个提交按钮(submit或button)来将表单数据同时提交到两个...
在 input type="submit" 按钮中添加事件
HappierRaining
10-24 2万+
如下代码，可以直接在&lt;input type="submit" ..&gt;中添加onclick事件。用户点击"submit"按钮后会触发两个操作：一是提交表单到后台服务器。二是触发onClick事件调用我自己定义的upLoadData()函数。 ​ &lt;form action="http://127.0.0.1:5000" method="post" &gt;
input的submit类型,点击跳转到新页面并搜索
yanhn123的博客
05-08 5971
<body> <form action="https://www.baidu.com/s" method="get" target="_blank"> <input type="search" name="word" placeholder="请输入搜索内容" class="se"> <input type="submit" value=...
关于form表单中button按钮自动提交问题
weixin_30632883的博客
05-23 219
坑:点击确认按钮,form表单提交2次,发送后台2次请求 　　 //错误代码: <Button id="btnSubmit" name="btnSubmit" class="btn btn-primary" >确认</Button> $("#btnSubmit").click(function(){ $('#formSave').ajaxSubmi...
html5 input新类型在不同浏览器下的表现
ruby_xc的博客
05-12 923
html5新增了很多输入类型, 其中一个作用就是可以在不引入javascript的情况下限制用户输入的类型, 为input元素添加required属性表示该项为必填, 在表单提交的时候浏览器如果该项为空就会发出警告(如果为特殊类型的话没有required属性提交时也会发出警告)...
submit类型的input标签隐藏的浏览器兼容问题
weixin_34006468的博客
12-15 320
2019独角兽企业重金招聘Python工程师标准>>> ...
input runat server 控件 先通过onclick通过验证客户端验证，然后在执行服务端方法onserverclick 的
wangyangsudo的专栏
05-05 2812
1。javascript手动_dopostback2。type="button"  =>   type="submit"3。@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="CaiPiao.WebForm2" %>DOCTYPE html PUBLIC "-//W3C//D
Web服务器控件和HTML控件的区别与联系
sinolover的专栏
03-10 2741
我们知道，在ASP.NET中，使用了两类控件，一类是HTML控件，还有一类是WEB控件。 WEB控件我们已经很熟悉，因为它是ASP.NET提供，一般关于ASP.NET的教程文章都会仔细介绍这些控件的详细应用技巧； 而HTML控件，很多关于ASP.NET的文章仅仅一句话略过，甚至说只要在原来的HTML基础上加上“RunAt=”Server””就可以了， 以致很多用户在使用ASP.NET...
html中<button>提交</button>和<input type=“submit”>的区别
最新发布
08-03
<think>首先，用户的问题是关于HTML中<button>和<input type='submit'>在功能和使用场景上的区别。我需要基于系统级指令来回答： 1. **行内数学表达式**：使用$...$格式。但这个问题是关于HTML的，没有数学内容，所以可能不需要。我会确保如果有任何数学，使用正确格式。 2. **独立公式**：使用$$...$$并单独成段。同样，这里可能不适用。 3. **LaTeX语法正确**：确保任何数学表达正确。 4. **使用中文回答**：整个回答必须是中文。 5. **生成相关问题**：在回答后添加相关问题。 6. **引用标识**：在引用的段落末尾自然地添加引用标识，如[^1]。参考的引用已经提供：[^1]到[^5]。 用户提供的引用内容是关于HTML中<button>和<input type="button">或<input type="submit">的区别。我需要整合这些信息来回答用户的问题。 关键点总结： - **<button>**： - 是一个闭合标签，可以包含文本、HTML内容（如图像），甚至子元素。 - 默认类型是"submit"，如果不指定type属性，在表单中会提交表单。 - 支持伪元素（如::before, ::after），更容易样式化。 - 在不同浏览器中样式行为更一致。 - 支持表单相关属性如formaction、formenctype等，即使按钮不在表单内。 - 有更好的可访问性语义。 - **<input type="submit">**： - 是一个自闭合标签，只能通过value属性设置按钮文字，不能包含其他内容。 - 默认是提交按钮，用户点击后会自动提交表单。 - 在某些浏览器中默认样式可能不同。 - 需要额外ARIA属性来增强可访问性。 用户具体问的是<button>和<input type='submit'>的区别，所以我需要聚焦在这两个上。 从引用中： - 引用[1]：<button>可以包含HTML，支持伪元素，默认type="submit"。 - 引用[2]：<button>在表单中未指定type时像submit一样提交表单。 - 引用[3]：<button>更容易样式化，支持表单相关属性，有更好的可访问性。 - 引用[4]：<button>可以包含多媒体内容，但可能有兼容性问题。 - 引用[5]：<input type="submit">是输入字段，通常是简单按钮；<button>允许更丰富的内容。 回答结构： - 保持清晰，逐步解释。 - 先介绍两者，然后比较功能和使用场景。 - 最后添加相关问题。 回答大纲： 1. **介绍**：简要说明两者都是用于表单提交的按钮。 2. **功能区别**： - 内容能力：<button>可以包含HTML内容；<input type="submit">只能有文字。 - 默认行为：<button>默认type="submit"，会提交表单；<input type="submit">总是提交表单。 - 样式和灵活性：<button>更容易样式化，支持CSS伪元素。 - 表单属性：<button>支持formaction、formenctype等属性。 - 兼容性和可访问性：<button>有更好的语义和一致性。 3. **使用场景**： - 当需要自定义按钮内容（如图文结合）时，使用<button>。 - 当只需要简单文字按钮时，<input type="submit">也适用。 4. **总结**：推荐使用<button>以获得更多灵活性。 5. **相关问题**：生成2-3个相关问题。 生成相关问题： - 例如： 1. 如何为<button>添加自定义样式？ 2. 在表单提交中，如何处理按钮的默认行为？ 3. <button>和<input type="button">有什么区别？ 确保引用标识：在回答中，当引用内容时，添加[^1]等。例如，根据引用[^3]，<button>支持伪元素。 最终回答： - 用中文。 - 结构清晰。</think>### HTML中<button>和<input type='submit'>的区别 在HTML中，`<button>`和`<input type='submit'>`都用于创建表单提交按钮，但它们的功能、使用场景和特性有显著差异。以下我将逐步解释它们的区别，帮助您更好地理解何时使用哪种元素。回答基于可靠的HTML标准和常见实践[^3][^4][^5]。 #### 1. **标签结构与内容能力** - **`<button>`**： - 这是一个闭合标签（如`<button>点击我</button>`），可以包含文本、HTML内容（如图像、图标或其他元素），甚至子元素。例如： ```html <button type="submit"> <img src="icon.png" alt="图标"> 提交表单 </button> ``` - 默认情况下，如果不指定`type`属性，其类型为`submit`（在表单中点击时会自动提交表单）[^1][^2]。建议显式声明`type`属性（如`type="submit"`）以避免意外行为。 - **`<input type='submit'>`**： - 这是一个自闭合标签（如`<input type="submit" value="提交">`），只能通过`value`属性设置按钮文字。它不能包含任何HTML内容或子元素，只能显示纯文本[^3][^4]。 - **关键区别**：`<button>`更适合需要丰富内容（如图文结合）的场景，而`<input type='submit'>`仅适用于简单文本按钮[^4][^5]。 #### 2. **功能与默认行为** - **`<button>`**： - 默认类型为`submit`，因此在表单中点击时会自动提交表单。但您可以通过`type`属性指定其他行为： - `type="submit"`：提交表单（默认）。 - `type="reset"`：重置表单输入。 - `type="button"`：普通按钮，无默认行为[^1][^3]。 - 支持表单相关属性，如`formaction`（指定提交URL）、`formenctype`（设置编码类型），即使按钮不在表单内部（通过`form`属性关联表单）。这允许更灵活的提交控制，例如提交到不同地址[^3][^5]。 - **`<input type='submit'>`**： - 总是作为提交按钮，点击时自动提交表单。它没有`type`的其他选项（如`reset`或`button`），且不支持`formaction`等高级属性。功能相对单一，主要用于标准表单提交[^4][^5]。 - **关键区别**：`<button>`提供更细粒度的控制和扩展功能（如自定义提交逻辑），而`<input type='submit'>`行为固定，适合简单提交需求[^3][^5]。 #### 3. **样式与灵活性** - **`<button>`**： - 更容易样式化，支持CSS伪元素（如`::before`和`::after`），允许添加图标、动画等效果。在不同浏览器中样式表现更一致[^3]。 - 示例：通过CSS轻松实现悬停效果。 ```css button:hover::after { content: "→"; color: blue; } ``` - **`<input type='submit'>`**： - 样式受限，不支持伪元素。默认样式可能因浏览器而异（如按钮大小或边框），需要更多CSS覆盖来统一外观[^3][^4]。 - **关键区别**：如果您需要高度自定义的按钮设计，`<button>`是更优选择；`<input type='submit'>`在简单场景下更轻量，但样式灵活性低[^3]。 #### 4. **兼容性与可访问性** - **`<button>`**： - 语义更清晰（表示一个可交互按钮），默认有较好的可访问性，适合屏幕阅读器。现代浏览器（包括IE9+）支持良好，但旧版IE（如IE8）可能需要额外处理默认行为[^2][^3]。 - **`<input type='submit'>`**： - 语义较弱，可能需要ARIA属性（如`aria-label`）来增强可访问性。浏览器兼容性普遍良好，但样式差异可能影响用户体验[^3][^4]。 - **关键区别**：`<button>`在可访问性和语义化上更优，尤其对于无障碍网站；`<input type='submit'>`在兼容旧系统时可能更稳定[^3]。 #### 5. **使用场景推荐** - **使用`<button>`时**： - 需要按钮包含图像、图标或多行文本。 - 需要自定义提交逻辑（如不同表单动作）。 - 重视样式一致性和可访问性。 - 示例：电商网站的“购买”按钮，包含购物车图标。 - **使用`<input type='submit'>`时**： - 只需简单文本按钮，且表单提交逻辑标准。 - 追求代码简洁性（自闭合标签更短）。 - 示例：登录表单的标准“提交”按钮。 - **最佳实践**：优先使用`<button>`以获得更多功能和控制权，但确保显式设置`type`属性（如`type="submit"`）[^3][^5]。 #### 总结 `<button>`和`<input type='submit'>`的核心区别在于内容能力、功能扩展性和样式灵活性。`<button>`支持富内容、高级表单属性，并易于样式化，适合复杂交互；而`<input type='submit'>`更轻量，但功能有限，适合简单场景。在大多数现代Web开发中，`<button>`是推荐的选择，除非有特定兼容性需求[^3][^4][^5]。 如果您有具体代码示例或场景，我可以进一步分析！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值