Understanding the <button> tag of HTML 4.0
Ever since the historic days of Netscape 3 and 4, web developers have used form buttons to instantly create depressible buttons. For example, the following is a simple form button that takes us to Coding Forums when clicked on:
<form> <input type="button" value="CodingForums" onClick="window.location='http://www.codingforums.com" /> </form>
While I have nothing against these buttons, I must say this- "They are damn ugly!" Well, with the advent of HTML 4.0, these buttons just got a makeover.
In this tutorial, we will discuss how to use the <button> tag of HTML 4.0 to create colorful buttons that can be decorated with both images and fancy text.
Understanding the basic syntax of the <button> tag
The basic syntax of the new <button> tag is like any other containment tag:
<button>Some text here</button>
Unlike the <input type="button"> tag, the new <button> tag does not require the company of the <form> tag surrounding it in order to display.
Now, at first glance, the <button> tag looks like a normal form button, but as mentioned, its a little more than that.
Embedding images and fancy text into the button
Don't try this with your usual form buttons. The <button> tag of HTML 4.0 will take in both images and fancy text, as illustrated below:
<button style="font: bold 14px Arial">Big text</button>
<button style="color: red"><b>Save the environment!</b></button>
Lets throw in some images and tables, shall we?
<button><img src="kitty.gif" /></button>
<button> <table border="1" width="100%"> <tr> <td width="19%"><img src="construct.gif" /></td> <td width="81%">Under Construction</td> </tr> </table> </button>
Things that CANNOT be embedded inside the button
Once a button, always a button. While the <button> tag of HTML 4.0 is easier to bully around with, there is a limit to what it can take. Apart from the obvious such as frames and embedded objects, you cannot include the following elements inside <button>:
Another <button> tag
Ok, time to make the button "practical" by adding functionality to it.
- Tutorial Introduction
- Adding functionality to the button tag
- Styling the button tag