When to use input type="button" or input type="Submit"

Asked

Viewed 5,235 times

8

I have a simple question facing the semantic part. The button I can modify your actions using the Javascript. When I should wear it or trade it for submit ?

<input type="button"> e <input type="submit">
html
  • 1

    I don’t know if it’s exactly duplicated, but see if this question helps input type="Submit" or button type="Submit"

  • 3

    I do not see it as a duplicate, but the question is also unclear because it lacks context. Context that could perhaps classify the question as duplicate.

1 answer

11


If you ask the difference between <button type="submit" and <button type="button"

The difference is that type="submit" does the Submit of a form into which that button is inserted; while the type="button" has no default action.

Javascript can intercept the event submit in case, for example, you want to validate the data entered in the form. The type="button" does no more than be a button and trigger any code that Javascript may have for it.

If you ask the difference between <input type="submit" and <button type="submit"

They are similar but different. Semantics must be the factor of choice:

User input: use input
Click on a button: use button

"In the old days" when browsers were less predictable and acted more unpredictably (I’m talking mostly about IE) input type="submit" was the safest.

The great advantage of button is that it can have HTML inside while the input is auto-closed and the text it shows is defined in the attribute value.

Don’t forget that button without type="button", or is without defined type acts as a type="submit", is its functionality "by default".

Button:

  • Different Types: Submit, reset, button

Input:

  • Different types: color, date, datetime, datetime-local, email, Month, number, range, search, tel, time, url, week, text, file, Hidden, image, Month, radio, reset, password and Submit
  • 2

    I loved the "by default".

  • And the <button>, when should I use it?

  • @Haxz If you want to put HTML in, like a svg or Giff from a Loading for example... Or if you are developing thinking of Firefox < 30 and have problems with the line-height in the <input>.

  • @Sergio, "is auto-closed and the text he shows is set in the value attribute." In fact by recommendation it should be used as follows: <button type="submit">Save changes</button>

  • 1

    Read wrong, oops! :)

  • Nowadays the thing goes beyond the logistics of the element. Do what is done with <button> using a <input> it’s a lot more work.

Show 1 more comment

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.