Html 按钮类型“按钮”与“提交”

Button type "button" vs. "submit"

提问by akantoword

Is there a difference between a buttonwith type="button"vs type="submit"? Are there functional differences, or is it just a descriptive name for easier code reading?

button与type="button"与有区别type="submit"吗？是否存在功能差异，或者它只是一个便于代码阅读的描述性名称？

Is this different than input?

这与input?

回答by Midas

From MDN:

来自MDN：

type
The type of the button. Possible values are:

• submit: The button submits the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.
• reset: The button resets all the controls to their initial values.
• button: The button has no default behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

type
按钮的类型。可能的值为：

• submit：按钮将表单数据提交到服务器。如果未指定属性，或者如果属性动态更改为空值或无效值，则这是默认值。
• reset：该按钮将所有控件重置为其初始值。
• button：按钮没有默认行为。它可以具有与元素事件相关联的客户端脚本，这些事件在事件发生时被触发。

As for the difference between buttonand input:

至于之间的区别button和input：

• A buttoncan have a separate value as data, while for an inputthe data and button text are always the same:

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

• A buttoncan have HTML content (e.g. images), while an inputcan only have text.

• A buttonmay be easier to tell apart from other inputcontrols (like text fields) in CSS. Note backwards browser compatibility.

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

• Abutton可以有一个单独的值作为数据，而对于input数据和按钮文本总是相同的：

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

• Abutton可以包含 HTML 内容（例如图像），而 aninput只能包含文本。

• Abutton可能更容易与inputCSS 中的其他控件（如文本字段）区分开来。注意向后浏览器兼容性。

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

回答by j08691

A button with type "button" won't submit a form but one with no type or type=submit (the default) will. Buttons with type=submit are nearly the same as inputs with type=submit but buttons are able to contain HTML content.

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

回答by Grecdev

Buttons can be stylized much better than inputs can be used for anchor tags(links).

按钮可以比用于锚标签（链接）的输入更好地风格化。

• Images
• Content etc.

• 图片
• 内容等

Inputs can achieve the same functionality as buttons but uglier design.

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

Let's say inputs are oldschool, buttons are cooler.

假设输入是老式的，按钮更酷。

回答by Ahmet Arslan

They have different default behaviour regarding submitting form data to the server The button has an attribute named "type" and can contain those values:

它们在向服务器提交表单数据方面有不同的默认行为。按钮有一个名为“type”的属性，可以包含这些值：

submit: Has default behaviour of submitting the form data to the server. This is the default if the attribute is not specified, or if the attribute is dynamically changed to an empty or invalid value.

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

button: The button has nodefault behavior. It can have client-side scripts associated with the element's events, which are triggered when the events occur.

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

回答by Pergin Sheni

<input type="button" /> 

buttons will not submit a form - they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application.

按钮不会提交表单 - 默认情况下它们不执行任何操作。它们通常与 JavaScript 结合使用，作为 AJAX 应用程序的一部分。

<input type="submit"> 

buttons will submit the form they are in when the user clicks on them, unless you specify otherwise with JavaScript.

除非您使用 JavaScript 另行指定，否则按钮将在用户单击时提交它们所在的表单。

when form submit by below code, We should use type=button instead of type=submit to prevent form submit twice.

当通过下面的代码提交表单时，我们应该使用 type=button 而不是 type=submit 来防止表单提交两次。

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

回答by Zihad Hridoy

<button type="button"></button>buttons will not submit a form - they don't do anything by default. Button won't submit form on its own.It is a simple button which is used to perform some operation by using javascript whereas Submit is a kind of button which by default submit the form whenever user clicks on submit button.

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