magazine resources subscribe about advertising




 CD Home < Web Review < 1998 < Oct 30  

Tag of the Week

The Button Tag

By Chuck Musciano
Rank: 2

At a Glance

For the past two weeks, we've dealt with the primitive button capabilities built into HTML since version 2.0: submit, reset, and image buttons, created using the <input> tag. Now that we've mastered the hard way, let's examine how better things get in 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.

Before we go further, keep in mind that the <button> tag is part of HTML 4.0 and has not yet been implemented by any browser. I can't show you how examples will turn out in a given browser, but you should still pay attention, since these capabilities will soon be available in both Netscape and Internet Explorer.

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, you might say

<button type="submit">
  Buy Now!

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="Buy Now!">

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 nice 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 flow. You can put almost anything inside a <button> tag to create all sorts of buttons. Thus...

<button type="submit">

...would create a button with a centered text flow 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="stopsign.gif">

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">
  <img src="stopsign.gif">

This button would have the word "Stop" in bold, followed by the image of a stop sign.

The possibilities are almost endless with the <button> tag, much to the relief of the form designers and the chagrin of the browser developers.

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 in a future 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.

You can't practice any of this, so think about it instead. Next week, we'll resume with text entry fields in your forms.

Next: Simple Text Entry Fields
Prev: Creating Graphical Form Buttons

Copyright © 2003 CMP Media LLC