Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

---

Imagemapped Submit Buttons

A future possibility for image-based Submit buttons is to include the USEMAP attribute so that clicking different parts of the image would cause different instructions to be sent to the server. The various instructions would be set up using the <AREA> tag, the same as you set up different URLs in a client-side imagemap. Some details about how the browser would gather and pass the coordinates of the click still need to be ironed out, however, before this becomes standard. Until then, the USEMAP attribute has been reserved for use with the <INPUT TYPE=”IMAGE”> tag just for this purpose.

---

FIGURE 8.7  Images make a refreshing change from the standard “gray box” Submit and Reset buttons.

Listing 8.6 HTML Code to Produce an Image-Based Submit Button

<TABLE>
<TR>
  <TD>
    <FORM ACTION=”accountreg2.html” METHOD=”POST”>
    <INPUT TYPE=”IMAGE” SRC=”accept.gif” ALT=”I Accept” BORDER=0>
    </FORM>
</TD>
  <TD>
    <FORM ACTION=”index.html” METHOD=”POST”>
    <INPUT TYPE=”IMAGE” SRC=”decline.gif” ALT=”I Decline” BORDER=0>
    </FORM>
  </TD>
</TR>
</TABLE>

Scripted Buttons A new variant on action buttons in HTML 4.0 is the scripted button—one that executes a client-side script when clicked. To create a scripted button, you still use the <INPUT> tag, but with TYPE set equal to BUTTON. The VALUE attribute still specifies what text should appear on the face of the button.

By default, a button created in this way has no behavior associated with it. To make the button do something when clicked, you need to include the onclick event handler. You set onclick equal to a name of a script that has presumably been set up using the <SCRIPT> tag earlier in the document. Thus, the code to produce a fully defined scripted button might look like this:

<INPUT TYPE=”BUTTON” VALUE=”Check data” onclick=”check_data()”>

Set up in this way, the button sends an instruction to the browser to execute the script check_data whenever it is clicked.

• To learn more about JavaScript-enabled forms, see “Using JavaScript to Create Smart Forms,” p. 513.

The <BUTTON> Tag The <BUTTON> tag was introduced with HTML 4.0 to allow for action buttons with better presentation features. The first thing to note about the <BUTTON> tag is that it is a container tag, which means a companion </BUTTON> tag must also be used. What goes between the <BUTTON> and </BUTTON> tags has everything to do with how the button looks onscreen. If only text is between the tags, that text appears on the face of the button. If an <IMG> tag is between them, the image is used as the button.

<BUTTON> takes the TYPE attribute, which can be set to SUBMIT, RESET, or BUTTON. Each of these options produces a button very similar to the ones you get by using the <INPUT> tag with the same TYPE values, but subtle differences exist in how the buttons appear onscreen. This is particularly so in the case of image-based buttons, which are rendered three-dimensionally (with a drop shadow) and which move down when clicked and then up when released.

<BUTTON> can take the NAME and VALUE attributes as well. You need to assign a name to a button when it is a Submit button in a set of more than one. The VALUE attribute is what gets passed to the server when the button is clicked.

Labeling Input Fields

It was noted earlier in the chapter that it is up to you as a form author to include prompting text in front of your form fields to suggest to a user how he or she should fill in the field. The HTML 4.0 <LABEL> tag formalizes the relationship between the prompting text (the label) and the form field it is paired with. <LABEL> takes the FOR attribute, where FOR is set equal to the ID attribute value of the associated form field. In the example

<LABEL FOR=”Zip”>Enter your 9-digit ZIP code: </LABEL>
<INPUT TYPE=”TEXT” NAME=”ZIP” ID=”Zip”>

the prompting text “Enter your 9-digit ZIP code:” composes the label. Note how the label is associated with the subsequent field with the matching FOR and ID attributes.

How a label is rendered varies from browser to browser, so you should continue to place labels and their associated form fields in tables for proper alignment. Thus, the preceding example is better done as

<FORM ...>
<TABLE>
<TR>
<TD><LABEL FOR=”Zip”>Enter your 9-digit ZIP code: </LABEL></TD>
<TD><INPUT TYPE=”TEXT” NAME=”ZIP” ID=”Zip”></TD>
</TR>
</TABLE>
...
</FORM>

---

NOTE:  You can also implicitly associate a label with a form field by placing the tag that created the field between the <LABEL> and </LABEL> tags. Done this way, the form field in the previous example looks like this:

<LABEL>Enter your 9-digit ZIP code: <INPUT TYPE=”TEXT” NAME=”ZIP”></LABEL>

Although this might reduce how much you have to type, it’s worth noting that this approach precludes you from putting your labels and form fields in their own table cells.

---

Although labels might not seem to do much for you, they’re important to include for visually impaired users who use a speech-based browser. In this case, the browser knows to treat the label as prompting text for a form field, and it instructs the user accordingly.

Additionally, you can associate an access key with your form field label by using the ACCESSKEY attribute. ACCESSKEY is set equal to a single letter from the user’s keyboard. After it is set up, users can use the ACCESSKEY keystroke to go directly to the associated form field (an action called giving focus to the field) and fill it in. Expanding the previous password example to include an access key yields the following:

<FORM ...>
<TABLE>
<TR>
<TD><LABEL FOR=”Zip” ACCESSKEY=”Z”>Enter your 9-digit <U>Z</U>IP code: </LABEL>
</TD>
<TD><INPUT TYPE=”TEXT” NAME=”ZIP” ID=”Zip”></TD>
</TR>
</TABLE>
...
</FORM>