Tag of the Week
The Button Tag
By Chuck Musciano
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.
<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
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
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
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...
...would create a button with a centered text flow and some italic text.
<button> tag, "anything" means anything, including images. To create a graphical button, put an
<img> tag within the
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:
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