按钮类型 "button" 和 "submit" 的区别

Question

按钮类型 "button" 和 "submit" 的区别

htmlhtml-input

39

type="button"和type="submit"的之间有区别吗？它们在功能上有差异，还是只是为了更容易阅读代码而进行描述的名称？

这与输入框有什么不同吗？

- akantoword

1

该规范详细说明了它们应该如何操作。 - zzzzBov

2

这个回答解决了你的问题吗？<input type='button' />和<input type='submit' />之间的区别 - Miguel Vieira

6个回答

15

类型为 "button" 的按钮不会提交表单，但没有类型或类型为 submit（默认）的按钮将会提交。类型为 submit 的按钮与类型为 submit 的输入几乎相同，但按钮能够包含 HTML 内容。

- j08691

1

所以提交类型发生了什么，常规的按钮类型没有发生的事情？我问这个问题是因为无障碍功能要求我给一个按钮设置提交类型，但是我已经在使用backbone来监听按钮并进行post请求，所以我不想通过使用背景让html在后台处理提交类型按钮，除了backbone发起请求。 - akantoword

4

<input type="button" />

<input type="submit">

当用户单击按钮时，除非您使用JavaScript进行了其他规定，否则按钮将提交它们所在的表单。

当以下代码提交表单时，我们应该使用type=button而不是type=submit来防止表单重复提交。

@using (Html.BeginForm("View", "Controller", FormMethod.Post, new { id = "signupform" }))
        {
         //Form elements
        }

- Pergin Sheni

2

按钮的样式可以比输入框更好地进行修饰，用于锚点标签（链接）。

图片
内容等。

输入框可以实现与按钮相同的功能，但设计较丑。

假设输入框是老派的，而按钮则更酷。

- Grecdev

1

他们在提交表单数据到服务器方面有不同的默认行为。按钮有一个名为"type"的属性，可以包含如下值：

submit：具有将表单数据提交到服务器的默认行为。如果未指定该属性，或者该属性动态更改为空或无效值，则此为默认设置。

button：按钮没有默认行为。它可以与元素事件关联客户端脚本，这些脚本在事件发生时被触发。

- Ahmet Arslan

0

<button type="button"></button> 按钮不会提交表单 - 它们默认情况下什么也不做。按钮本身不会提交表单。它是一个简单的按钮，通过使用 JavaScript 执行某些操作，而“提交”是一种按钮，每当用户单击提交按钮时，默认情况下会提交表单。

- Zihad Hridoy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Midas · Accepted Answer

来自MDN:

type
按钮的类型。可能的值包括：

submit：按钮提交表单数据至服务器。如果未指定该属性或者将该属性动态更改为空或无效的值，则这是默认行为。

reset：按钮重置所有控件的初始值。

button：按钮没有默认行为。它可以与元素事件相关联的客户端脚本，当事件发生时触发脚本。

至于button和input之间的区别：

button可以具有单独的数据值，而对于input，数据和按钮文本始终相同：

<input type="button" value="Button Text"> <!-- Form data will be "Button Text" -->
<button type="button" value="Data">Button Text</button>

一个button可以包含HTML内容（如图片），而input只能包含文本。
在CSS中，一个button可能更容易与其他input控件（如文本框）区分。请注意向后浏览器兼容性。

input {

}
button { /* Always works */

}
input[type=button] { /* Not supported in IE < 7 */

}