I usually use <button type="submit"></button>
, but I see in most forms the use of <input type="submit" />
, is there any difference? Which is the ideal?
I usually use <button type="submit"></button>
, but I see in most forms the use of <input type="submit" />
, is there any difference? Which is the ideal?
From the functional point of view there is no difference, both will submit the form in the same way. According to the specification , if attribute type
is missing from the <button>
tag, the default behavior will be submit
.
The difference is in the declaration of the tags and in the visual area.
The <input>
tag contains a value attribute value
that is displayed and is not usually closed or closed. Example:
<input type="submit" value="Submit" />
Note that the value
of <input>
that is sent to the server is always the same as the text displayed on the button, coupling the visual part with an implementation that depends on that value. This is not a good practice, whereas image buttons were used as alternatives.
On the other hand, <button>
has a content between the tag of opening and closing, 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>
Functionally, with respect to the click, there is no difference - assuming a button whose type
property has the value submit
, which is the default. If the button has another value for the type
property, it becomes functionally equivalent to input with type button
.
The button tag was introduced in HTML to allow the creation of a richer control visually. The button supports content, the input does not. This is why there are more possibilities for formatting with the button , which turns out to be more user-friendly with images, cufon etc.
Reference: similar question in SOen - link
<button>
: Can put images and content inside. <input>
: Can not put images and content inside. The default used by most was <input type="submit" />
, due to being something used since the beginning of the forms.
The current question is more about semantics than its actual operation, since both forms are correct and, taking a few small bugs in old browsers and no longer used 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 more creatively stylize with images and other elements as well as pure CSS.
It is also important to mention that buttons declared without the type
attribute are considered to have type="submit"
, so it is always advisable to use type="button"
when you do not want to assume default behaviors for use with custom JavaScript events
None is wrong, but input refers to a data entry element, and a submit button, unless it is useful the use of its value
attribute is not intended to wait for data entry. So for logic it would be best to use button
unless you need the value
attribute.
Large tools like Twitter Bootstrap often adopt button
as well, but it's a bit of a conceptual issue in a way.
Basically what should be considered:
<button type="submit"> -- conteúdo html -- </button>
Using <button>
gives you more layout and freedom over button design, for example you can use images, icons, and other components to render the button, which is more common. In addition, you can still create other <span>
, <small>
tags within the <button>
tag, and do whatever you want with them.
<input type="submit" />
Usanto <input>
tag is the easiest way to submit a form. It does not require anything other than the tag itself, not even a value. The problem is that this button is very ugly and simple, you can even stylize it, but you will have limitations.
So, prefer <input>
when your form is simple and does not require much stylization and <button>
when otherwise.
It is important to note that the default value of the type
attribute of button
is submit
.
With this, button
will submit a form whenever:
type="submit"
type=""
(empty) type
is not specified type
has any value that is neither reset
nor button
See here the specification of possible values from type to button