46

I'm a little confused. What is the difference between these. Please don't reference really old postings. I notice that accessing some of the styles are different inline in html as well as in style sheets.

<input type=button> 
   vs 
<button>

I guess I'm wondering which one will out live which? or which is the best when taking into account ease of compatibility between all the general technologies that go into website creation? aka. which is going to cause the least amount of trouble

Strawberry Farmer
  • 882
  • 1
  • 8
  • 18
  • 1
    I use `` only when the point of the control is to *cause* a [form] postback. In all other cases I use ` – user2864740 Aug 21 '14 at 21:28

5 Answers5

53

Unlike <input> tags, <button>'s can contain other html elements as their labels. <input type="button"> can only accept a string as its label text (css styles not withstanding).

Additionally, the <button> element accepts a wide range of uncommon but useful attributes regarding multiple forms and click actions. See the MDN page for more details.

As for one "out living" the other, the HTML standard is remarkably backwards compatible. Humanity will put men on Mars before either is eliminated from the HTML standard.

Ben Roux
  • 7,308
  • 1
  • 18
  • 21
  • A number of tags are deprecated and a few have been obsoleted. Granted it is a slow process.. – user2864740 Aug 21 '14 at 21:29
  • 2
    Elon is counting the days... I presume – niico Nov 24 '16 at 01:54
  • 2
    If there is a clear downside i have not run into it. In the years since writing this answer, my usage of `` has been strictly for when i am putting it inside of a form, just to reduce surprises to future devs. All told, I suspect i have created 15-20 ` – Ben Roux Dec 08 '16 at 16:33
  • I will also add that ` – ShortFuse Mar 01 '18 at 20:10
2

Inside a <button> element you can put content, like text or images. eg: <button type="button" onclick="alert('Hello world!')">Click Me!</button>

If you use the <button> element in an HTML form, different browsers may submit different values. So always use <input type="button"> to create buttons in an HTML form.

Cerbrus
  • 70,800
  • 18
  • 132
  • 147
Jijin M
  • 21
  • 3
2

input type=button

The tag is the easiest way to submit a form. When a customer clicks on the button, it submits automatically. You don't need to add any scripts, the browsers know to submit the form when a submit INPUT tag is clicked.

The problem is that this button is very ugly and plain. You can't add images to it. You can style it just like any other element, but it can still feel like an ugly button.

Use the INPUT method when your form has to be accesible even in browsers that have JavaScript turned off.

button

The BUTTON element offers more options for submiting forms. You can put anything inside a BUTTON element and turn it into a submit button. Most commonly people use images and text. But you could create a DIV and make that entire thing a submit button if you wanted to.

The biggest drawback to the BUTTON element is that it doesn't automatically submit the form. This means there needs to be some type of script to activate it. And so it is less accessible than the INPUT method. Any user who doesn't have JavaScript turned on won't be able to submit a form with only aBUTTON element to submit it.

Use the BUTTON method on forms that are not as critical. Also, this is a great way to add additional submission options within one form.

Source: https://www.thoughtco.com/buttons-on-forms-3464313

AKNair
  • 1,369
  • 1
  • 12
  • 24
  • 1
    My experience seem to be just the opposite. In recent version of firefox (v60), clicking a button element would submit the form, whereas clicking an input type button would not (unless it is input type submit). Edit: clarification: this is when both are within a form tag. – Samik R Jun 28 '18 at 06:33
0

Use <button> from input element if you want to create button in a form.

And use button tag if you want to create button for an action.

More Info: Difference between <input type='submit' /> and <button type='submit'>text</button>

Community
  • 1
  • 1
Jatin
  • 3,065
  • 6
  • 28
  • 42
-2

depends where you want to use it. input should be inside form, where button can be used anywhere.

alexndm
  • 2,899
  • 5
  • 24
  • 25