HTML The Definitive Guide (105 page)

Here are a couple of valid image buttons: The browser displays the designated image within the form's content flow. The second button's image will be aligned with the top of the adjacent text, as specified by the align attribute. Some browsers (Netscape, for instance) also add a border, as it does when an image is part of an anchor ( tag), to signal that the image is a form button.

When the user clicks the image, the browser sends the horizontal offset, in pixels, of the mouse from the left edge of the image and the vertical offset from the top edge of the image to the server. These values are assigned the name of the image as specified with the name attribute, followed by .x and .y, respectively. Thus, if someone clicked the image specified earlier in the example, the browser would send parameters named map.x and map.y to the server.

Image buttons behave much like mouse-sensitive image maps (usemaps), and, like the programs or client-side

Oddly, the HTML 4.0 standard allows the use of the usemap attribute with an image button, but does not explain how such a use might conflict with normal server processing of the x,y coordinates of the mouse position. We recommend not mixing the two, using mouse-sensitive images outside of forms and image buttons within forms.

10.5.4.4 Push buttons

Using the tag (or the tag, described in section
Section 10.5.6, "The Tag"
), you can create a button that can be clicked by the user but that does not submit or reset the form. The value attribute can be used to set the label on the button; the name attribute, if specified, will cause the supplied value to be passed to the form processing script.

You might wonder what value such buttons provide: little or none, unless you supply one or more of the event attributes along with a snippet of JavaScript to be executed when the user interacts with the button. Thus empowered, regular buttons can be used to validate form contents, update fields, manipulate the document, and initiate all sorts of client-side activity.
[JavaScript Event Handlers, 13.3.3]

10.5.4.5 Multiple buttons in a single form
You can have several buttons of the same or different types in a single form. Even simple forms have both reset and submit buttons, for example. To distinguish between them, make sure each has a different value attribute, which the browser uses for the button label. Depending on the way you program the form-processing application, you might also make the name of each button different, but it is usually easier to name all similarly acting buttons the same and let the button handling subroutine sort them out by value. For instance: When the user selects one of these example buttons, a form parameter named action will be sent to the server. The value of this parameter will be one of the button names. The server-side application gets the value and behaves accordingly.

Since an image button doesn't have a value attribute, the only way to distinguish between several image buttons on a single form is to ensure that they all have different names.

10.5.5 Hidden Fields

The last type of form input control we describe in this chapter is hidden from view. No, we're not trying to conceal anything. It's a way to embed information into your forms that cannot be ignored or altered by the browser or user. Rather, the tag's required name and value attributes automatically get included in the submitted form's parameter list. These serve to label the form and can be invaluable when sorting out different forms or form versions from a collection of submitted and saved forms.

Another use for hidden fields is to manage user/server interactions. For instance, it helps the server to know that the current form has come from a person who made a similar request a few moments ago. Normally, the server does not retain this information and each transaction between the server and client is completely independent from all other transactions.

For example, the first form submitted by the user might have asked for some basic information, such as the user's name and where they live. Based on that initial contact, the server might create a second form asking more specific questions of the user. Since it is tedious for users to re-enter the same basic information from the first form, the server can be programmed to put those values in the second form in hidden fields. When the second form comes back, all the important information from both forms is there, and the second form can be matched to the first one, if necessary.

Hidden fields may also direct the server towards some specific action. For example, you might embed the hidden field: Therefore, if you have one server-side application that handles the processing of several forms, each form might contain a different action code to help that server application sort things out.

10.5.6 The

Tag

As we described in detail earlier, you create an action button with traditional HTML by including its type value in the standard tag. For instance, the form control creates a button that, when selected by the user, tells the browser to send the form's contents to the processing server or to an email address (mailto option). Display-wise, you don't have any direct control over what that submit button looks like, beyond changing the default label "Submit" to some other word or short phrase like "Hit me" or "Outta here!"

The new HTML 4.0 standard introduces the

tag, which acts the same as to the button, but gives you more control over how the element gets displayed by the browser. In particular, all of the attributes you might use with the element are acceptable with the tag.

Function:

Create an button element within a form

Attributes:

ACCESSKEY ONKEYDOWN

CLASS ONKEYPRESS

DIR ONKEYUP

DISABLED ONMOUSEDOWN

ID ONMOUSEMOVE

LANG ONMOUSEOUT

NAME ONMOUSEUP

OMMOUSEOVER STYLE

ONBLUR TABINDEX

ONCLICK TITLE

ONDBLCLICK TYPE

ONFOCUS VALUE

End tag:

; never omitted

Contains:

button_content

Used in:

form_content

10.5.6.1 The button

The HTML 4.0 standard is not overly clear as to what display enhancements to a form button control the

element should provide, other than to suggest that the contents should be 3D and visually appear to react like a push button when selected by the user; that is, go in and back out when pressed. No browser yet supports ; hence we cannot show you any examples.

The

control does provide for a greater variety and richer contents over its analogues. Everything between the and tags becomes the content of the button, including any acceptable body content, such as text or multimedia. For instance, you could include an image and related text within a button, creating attractive labelled icons in your buttons. The only verboten element is an image map, since its mouse-and keyboard-sensitive actions interfere with the form button.

10.5.6.2 The type attribute

Use the type attribute for the tag to define the button's action. Its value should be set to submit, reset, or button. Like its analog, a , when selected by the user, tells the browser to package and send the contents of the form to the form-processing server or email it to the mailto recipient. Using type=reset creates a conventional reset button, and using type=button creates a conventional push button.

For example, an HTML 4.0-compliant browser might display the following
sendit.gif
icon inset on a 3D button that pushes in and pops back out when the user clicks it with the mouse. In doing so, the browser will then submit the form to the server:

Send it

Notice that you can exploit the rich set of tag attributes, including align and alt, for this style of form control.