The button element works almost identically to the input element when you specify a type of button, reset, or submit. As with an input tag, the button tag must be placed within a form (anyone using it outside of a form even when they have it in a web page where the code validates is using it incorrectly).

Here is the minimum amount of code that you'd need in order to use a button tag correctly (since if you didn't provide some HTML to style the button text you might as well use an input tag instead).

<form action="index.html" method="get">
<button type="submit"><em>Home</em></button>

The only difference in usage between using an input tag and a button tag to create a button are that the input tag is self closing and has the button text supplied via a value attribute while a button tag does not have a value attribute and instead supplies the button text between the opening and closing button tags. This means that you can include HTML inside of the text of your button allowing you to provide something more than just plain text in your button.

Note that a button can have a type="submit", type="reset", or type="button" just as the input tag can have with them each resulting in the same effect (submitting the form, resetting the form, or doing nothing beyond whatever the attached JavaScript does). The only difference is that since the button tag can only produce a button the default value for a button is submit where the default type for an input is text.


This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow