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!
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.
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"
<form>
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
Recommended resources
|