39
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?
39
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?
26
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>
In the specification of the MDN, the value submit
is the standard for the property type
. I confess that I did not see the specification of the other browser maintainers, so I am sure that submit
is the default value is restricted to the Mozilla universe. Anyway +1.
@Renan Confirmed in the specification. The default is submit.
15
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
14
<button>
: You can put images and content inside.<input>
: You cannot place images and content inside.10
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.
6
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.
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.
2
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 specifiedtype
has any value other than reset
nor button
See here the specification of possible values from type to button
1
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:
<input type="text" name="nome">
<input type="date" name="nasciimento">
<button type="submit">OK</button>
In the above code the fields will be sent:
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.
Browser other questions tagged html
You are not signed in. Login or sign up in order to post.
the use of the element
<button>
is also due to the fact that it is easier to manipulate their styles.– Leandro RR
I advise the article if you read English http://css-tricks.com/use-button-element/
– Leandro RR