Should I use input type="Submit" or button type="Submit" in forms?

Question

I usually use <button type="submit"></button>, but I see in most forms the use of <input type="submit" />, is there any difference? What is the ideal?

Answer 1

From the functional point of view there is no difference, both will submit the form in the same way. According to specification, if attribute type is absent from tag <button>, the default behavior will be submit.

The difference is in the declaration of tags and the visual area.

The tag <input> contains an attribute of value value that is displayed and is usually not closed or is auto closed. Example:

<input type="submit" value="Submit" />

Note that the value of <input> that is sent to the server is always equal to the text displayed on the button, docking the visual part with an implementation that depends on that value. It is not good practice, and buttons with images were used as alternatives.

On the other hand, <button> has a content between the opening and closing tag, being more flexible than the traditional tag, allowing for example images and more visual styles. Example:

<button type="submit" name="myButton" value="foo">Click me</button>

Answer 2

Functionally, with respect to the click, there is no difference - assuming a button whose property type has the value submit, which is the standard. If the button has another value for the property type, it becomes functionally equivalent to input type button.

The tag button was introduced into HTML to allow the creation of a richer control visually. The button supports content, the input no. So there are more possibilities of formatting with the button, that ends up being more friendly to the use of images, Cufon etc..

Reference: similar question in Soen - https://stackoverflow.com/questions/7117639/input-type-submit-vs-button-tag-are-they-interchangeable

Answer 3

• <button>: You can put images and content inside.
• <input>: You cannot place images and content inside.

Answer 4

The pattern used by the majority was <input type="submit" />, due to being something used from the beginning of the forms.

The current issue is more related to semantics than their actual functioning, since both forms are correct and, apart from some minor bugs in old and unused browsers and some differences in the way the button value is passed, are identical.

The biggest advantage of <button></button> is that it accepts HTML as value, which makes it possible to style more creative with images and other elements, in addition to pure CSS.

It is important to also mention which buttons are declared without the attribute type are considered to have been type="submit", then it is advisable to always use type="button" when you do not want to assume standard behavior, to use with custom Javascript events.

Answer 5

None is wrong, but input refers to a data input element, and a Submit button, unless it is useful to use its attribute value does not aim to wait for data entry. So by logic the most correct would be to use a button unless you need the attribute value.

Great tools like Twitter Bootstrap often adopt the button also, however it is a question somewhat conceptual in a certain way.

Answer 6

Basically what should be considered:

<button type="submit"> -- conteúdo html -- </button>

Using <button> gives you more layout and freedom about the button design, for example you can use images, icons and other components to render the button which is most common. In addition, you can even create other tags <span>,<small> within the tag <button>, and do what you wish with them.

<input type="submit" />

Usanto tag <input> is the easiest way to submit a form. It requires nothing but the tag itself, not even a value. The problem is that this button is very ugly and simple, you can even style it, more will have limitations.

So prefer <input> when your form is simple and does not require much styling and <button> when otherwise.

Answer 7

It is important to note that the default value of the attribute type of button is submit.

Thereby, button will submit a form whenever:

• type="submit"
• type="" (emptiness)
• type is not specified
• In short: type has any value other than reset nor button

See here the specification of possible values from type to button

Answer 8

The input has parameters that are sent, for example:

<input type="text" name="nome">
<input type="date" name="nasciimento">
<input type="submit" name="OK">

The above code sends the fields:

• name
• birth
• OK

---

<input type="text" name="nome">
<input type="date" name="nasciimento">
<button type="submit">OK</button>

In the above code the fields will be sent:

• name
• birth

If it is relevant to receive the input from OK the ideal is to use input, if it is not relevant the button reduces an element to be sent inside the form, ai vai depende de seu projeto para saber que seria melhor para utilizar.