Button or Input Tag – which to use?

Any user interaction with a web page is done with forms. One question about the various elements of a form is whether to use a "button" or an "input" tag; both basically do the same thing, sort of, and that's what this article is about, that difference.

The button and input tags looks like this in html:

Notice you need a separate closing tag with the button, and this allows for the differences with the input tag which is closed within the tag itself.

Here's what the button, input, and input tags look like in different browsers.  Not much difference.

Firefox

IE8

Chrome

Safari

Opera

You can style both the button and the input tags with CSS. Here, I've spaced things out so you can see how this is done. Of course, better would be to give the input or button an id tag, and do your styling in a CSS file, but for the sake of completeness we'll do it here.

CSS within the button and input


And this looks like this in the browser:

CSS Styling

Let's start to highlight the differences. Because the input tag does not use a separate closing tag, while the button tag does, this allows you to put images in your button.  The image size will control the size of your button.  Here, I've put an image in the first button and added a huge image to make a super big "eagle button."

Image code


Here's the look:

A big button

At this stage, you may be wondering why you wouldn't just use the button tag and be done with it. Well, because the input tag can do much more than the button tag. The reason is the many types you can have with the input that you can't have with the button.

As far as types, there are three types in common with both the button and input tag: button, reset, and submit.  The button type allows you to trigger a JavaScript event.  The reset will reset the values of the form to their original values, and submit will submit the form data.

Beyond this the input tag adds: checkbox, file, hidden, image, password, radio, and text.  Yes, the input tag is truly designed to allow you to input form data, while the button is designed to be a button. Given what we've covered so far, the image type may interest you.

Here's what it looks like in html:




I put the alt tag in for those that can't see the image and want to know what it is, and the title for those who can see and aren't sure what the image does.  The title adds a tool tip pop up.  The image tag when used with the input tag uses the image to submit the form, and that's about it. You can not add text to the image inside the input button itself, you would need to add text separately on the page.  If you want an image with text, well than use a button. Here's what the image type looks like with an input tag:
Input submit image

Hopefully, this clears up any cloudiness you might have had when it comes to when to use input and button tags. Enjoy.

Comments are closed.