Categories:

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>.....</button>

For example:

<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

  • <select> tag

  • <input> tag

  • <a> tag

Ok, time to make the button "practical" by adding functionality to it.