Website resource guide, web development,Button Tags using HTML 4.0

The HTML 4.0 standard tries to bring all the capabilities of text and graphical buttons together into one form element, the <BUTTON> tag. This tag supports text and images, along with submission, reset, and "plain button" capabilities. Unlike the <INPUT> tag, the <BUTTON> tag has conventional HTML content. This content is used by the browser to create the button image placed into your form. To create a text button, an i.e:

<BUTTON TYPE="submit">

  Sign Up!

</BUTTON>

The required TYPE attribute tells the browser what to do when the button is pressed. In this case, the form parameters are submitted to the server. This example is identical to creating a button with:

<INPUT TYPE="submit" VALUE="Sign Up!">

You can add the NAME and VALUE attributes to the <BUTTON> tag, so that the button will contribute a value to the form data.

You can use TYPE="reset" with the <BUTTON> tag to create a regular reset button, equivalent to using <INPUT TYPE="reset">. While it may seem that the <BUTTON> tag adds nothing new to HTML, the designers of the <BUTTON> tag gave it a few other great features.

For starters, you can specify TYPE="button" with the <BUTTON> tag, creating a button that does nothing except push in and out. While these buttons do little for your form, they are great for activating Java and JavaScript applets within your HTML pages.

The other big advantage of the <BUTTON> tag is that its content is a complete HTML. You can put almost anything inside a <BUTTON> tag to create all sorts of buttons.

<BUTTON TYPE="submit">

  <CENTER>

  Sign

  <BR>

  <I>Up!</I>

  </CENTER>

</BUTTON>

would create a button with centered text, and some italic text.

With the <BUTTON> tag, "anything" means anything, including images. To create a graphical button, put an <IMG> tag within the <BUTTON> tag:

<BUTTON TYPE="submit">

  <IMG SRC="airplane.gif">

</BUTTON>

The only difference between this button and one created using <INPUT TYPE="image"> is what the button sends to the server when it is clicked. The <BUTTON> tag sends the name and value of the button, while <INPUT TYPE="image"> sends the coordinates of the mouse when it was clicked.

As you might have guessed, the <BUTTON> tag also supports mixed text and images within a single button. It is perfectly correct to create a button like this:

<BUTTON TYPE="submit">

  <B>Fly</B>

  <IMG SRC="airplane.gif">

</BUTTON>

This button would have the word "Fly" in bold, followed by the image of a airplane.

The possibilities are almost endless with the <BUTTON> tag.

Which is better?

There is clearly some overlap between the <BUTTON> tag and the older <INPUT> based buttons. Which should you use?

In general, I would recommend converting to the new <BUTTON> tag whenever you can. It is easy to see the older variants of the <INPUT> being dropped from the HTML standard version. More importantly, the <BUTTON> tag creates HTML that's easy to understand, making your forms easier to modify and maintain.

The only cases that will require the older <INPUT> tag are graphical buttons that transmit the mouse position to the server. Here, you should stick with <INPUT TYPE="image"> to create your buttons, but don't be surprised if a future variant of the <BUTTON> tag provides this ability as well.

<< BACK