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

32

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?

    
asked by anonymous 08.04.2014 / 21:26

7 answers

21

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>
    
08.04.2014 / 21:30
14

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

    
08.04.2014 / 21:31
12
  • <button> : Can put images and content inside.
  • <input> : Can not put images and content inside.
08.04.2014 / 21:31
9

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

    
08.04.2014 / 21:33
5

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.

    
08.04.2014 / 21:30
5

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.

    
08.04.2014 / 22:13
1

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
  • In sum: type has any value that is neither reset nor button

See here the specification of possible values from type to button

    
05.06.2018 / 14:37