input type V/S button type: Part 1
Tags: html, javascript
Published: 2020-05-03 17:36:23

Let me ask you a question. Which one is better to use?

![input and button code](https://dev-to-uploads.s3.amazonaws.com/i/36jf6qp3e0pp47zx2iky.png)

It depends on 2 things:
1. A scenario in which we are using it.
2. Developer's choice.

Just think... why we do have 2 tags with the same attribute? Isn't input enough to do all sorts of things that a button can do?

There must be a reason for it. Let's find out.

I will divide this post into 3 parts.

Part 1 - input type button V/S button type button
Part 2 - input type reset V/S button type reset
Part 3 - input type submit V/S button type submit

<h3>1. input type <b>button</b> V/S button type <b>button</b></h3>

![input and button code](https://dev-to-uploads.s3.amazonaws.com/i/36jf6qp3e0pp47zx2iky.png)
Both look the same.

Let see how both look on an HTML page.

![input code plunker](https://dev-to-uploads.s3.amazonaws.com/i/9bys7trcpjieomjf8z4q.PNG)

<h5>type="button"</h5> 
It just creates an HTML button. Nothing else. No button's label and no functionality on click of it.

![input code plunker](https://dev-to-uploads.s3.amazonaws.com/i/3bjx4srkfx0v7uf8ci0m.PNG)

Now after adding <b>value="click"</b>, we get button's label.

<b>Input</b> elements of type <b>button</b> are rendered as simple push buttons, which can be programmed to control custom functionality anywhere on a webpage as required when assigned an event handler function (typically for the click event).

<b>Input type="button" </b> elements have no default behavior unlike <b>type="submit"</b> and <b>type="reset"</b> have which I will explain in the later part.

To make input buttons do anything, you have to write JavaScript code to do the work.

For button <b>type="button"</b>, it looks like this.

![button type="button"](https://dev-to-uploads.s3.amazonaws.com/i/bzz3qywict9pi58ngcx4.PNG)

Let's add a label.

![button label](https://dev-to-uploads.s3.amazonaws.com/i/t5efd1b6ei9olrm6g498.PNG)

<b>button</b> tag does not have <b>value</b> attribute to set button label.
<b>input</b> tag does not have a closing tag while the <b>button</b> tag has a closing tag. 
So for those elements that have a closing tag, we can add <b>content</b> between the opening and the closing tag. 
<b>Content</b> mean any kind like text, image etc.

What if you put the value attribute in the button tag? Let's see...

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1smlx1i0bejqfngoutrf.PNG)

Nothing happened because the <b>button</b> has <b>value</b> attribute but it is not it's purpose to set button label. The <b>value</b> attribute specifies the initial value for a <b>button</b> in a <b>form</b> tag.(wait for next Part for form)

<b>Difference</b>

That's where the difference comes. In the <b>input</b> tag, you need <b>value</b> attribute to set label while in <b>button</b> tag, you do not need any attribute. You can directly put the label between opening and closing button tags.

Wait... It doesn't make any significant difference in there use. Till now its completely developer's choice. 

BUT what if I ask you:
1. I want a button that has an image in its label and no text? 
2. I want a button that has an image in its label with a text?  

Like this...

![button with image](https://dev-to-uploads.s3.amazonaws.com/i/4ft6sxpo4do7fvforenu.PNG)


Now you can see that we have a download button. If you see this is just a <b>button</b> tag with an <b>image</b> tag inside it.

To achieve this with the <b>input</b> tag, you have to use <b>type="image"</b> with <b>src</b> attribute in it.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0b32mfxia6hiqu5uso4r.PNG)

See UI Difference.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f69muvj5hhyer4hkz3kz.PNG)

<b>input type="image"</b> do not support [value](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image#Value) attirbute. So you cannot add label in input type="image" button

But we can achieve both image and label in button tag.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/uxoualvmzh3pf4fid0qa.PNG)

In simple, <b>button</b> tags can add different types of content but <b>input</b> can't.

<b>button</b> elements are much easier to style than <b>input</b> elements. You can add inner HTML content (think <b>i, br, or even img</b>), and use ::after and ::before pseudo-elements for complex rendering.
You can’t use pseudo-classes to style self-closing tags (img, input, hr etc).

If your buttons are not for submitting form data to a server, be sure to set their type attribute to button. Otherwise, they will try to submit form data and to load the (nonexistent) response, possibly destroying the current state of the document.

NOTE: If the button tag does not have a type attribute then by default type has "submit" as a value.

While <b>input</b> elements of type button are still perfectly valid HTML, the newer <b>button</b> element is now the favored way to create buttons. 

[button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) and [input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button) both have a lot of attributes but type attribute is the one that creates confusion. 

Till now we have seen, UI difference between the attribute. But what about the functionality... what will happen on there click?

Both input and button tag with type="button" attribute only create the idle button. They have no default behavior on click of it.

Even if you add <b>button type="button"</b> in the form, it will do nothing. It will not submit the form.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/22pfnczk2v4j2tjhrr05.PNG)

Same for <b>input type="button"</b>.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/peoi82cno9gjxgfqpa00.PNG)

So to do some action on button click just add <b>onclick</b> on both input and button tag and it will execute the function attached to <b>onclick</b>.


For more detail on button and input go to [MDN button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button) and [MDN input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button)


<h2>Conclusion</h2>

1. input type="button" and button type="button" both look same in UI as well as in functionality.
2. In the button tag, you can add complex content between closing and opening tags. For the input tag, you can't add complex content without using CSS hacks
3. Button tag comes with HTML5 and it is a quicker way to create a button. CSS changes are easy on the button tag as compared to the input tag.

In the end, it depends on your choice. I preferred the button tag. Comment down your choice.

I hope you guys get something from this post. If you find this useful, please like it, share it, comment down below, debate on it... 

If I missed something, plz point it out. It really helps me and other viewers. Your likes and comments motivate me a lot.

<h1>Who am I?</h1>
My name is Anshul Nautiyal. I am a Front-End Developer in Ajio.com
AJIO, a fashion and lifestyle brand, is Reliance Retail's first pan-Indian e-commerce venture. You will get an awesome product at an awesome discount. Do visit. [AJIO](www.ajio.com)

<h1>What I do in Ajio?</h1>
I mostly work on implementing new features in AJIO. Apart from that, I work on performance optimization, code refracting, and try to automate every possible manual work which I and my team are doing every day. I follow the DRY principle both in my code and life.


<b>Stay tuned for part 2...</b>