Adam's Advanced HTML Guide- <button> tag

Unlike the previous tag I discussed (the <layer> tag), the tag we're going to see, the <button> tag, only works in IE 4 (we live in an imperfect world!) This tag allows you to create rich form buttons that can replace the usual form buttons (<input type="button"). Hang on tight as we change the face of dull and grey buttons forever!

leaf.gif (1184 bytes) The <button> tag

The idea is very simple: IE 4 supports a new tag, called the <button> tag, that renders a form button capable of displaying formatted text and images. Just wrap whatever HTML content you want to appear inside <button></button>, and it gets shown as part of the button.

Nothing speaks louder then a few good examples, so here goes:

<button><b>Click here</b></button>

<button><image sr.="dog.GIF"></button>

<button>Click here to go home!<img src="home.gif"></button>

As you can see, nothing complicated about it.

leaf.gif (1184 bytes) Creating a <button> submit button

Yes, the <button> tag can also be used as a working, form submit button. This is done by giving the button the attribute type="submit"

Your name: <input type="text" size=25><br>
Your email address: <input type="text" size=25><br>
<button type="submit"><b>Submit!</b></button

Bear in mind that since only IE 4 supports the <button> tag, you should create two form pages- one for IE 4 that uses this new <button> tag, and one for the other browsers that uses the usual <input type="button"> tag. Another solution would be to use JavaScript to dynamically write out the button code, depending on the browser type of the user.

Note: For more info on the <button> tag, visit JavaScript Kit


Back Home

Recommended resources