1. Technology

The Difference Between Input Tags and Buttons


HTML forms have several different ways to submit, as you've learned on the previous page. Two of those methods are the INPUT tag and the BUTTON tag. There are good reasons to use both of these elements.

The INPUT Element

The <input type="submit"> tag is the easiest way to submit a form. It requires nothing beyond the tag itself, not even a value. 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.

The BUTTON Element

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 a BUTTON 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.

This article is part of the HTML Forms Tutorial. Read it to learn more about how to use HTML forms.

©2014 About.com. All rights reserved.