19.4 Push Buttons

19.4 Push Buttons

Push buttons are used for two main purposes in HTML forms: to submit forms and to reset the controls to the values specified in the original HTML. Browsers that use JavaScript can also use buttons for a third purpose: to trigger arbitrary JavaScript code.

Traditionally, buttons have been created by the INPUT element used with a TYPE attribute of SUBMIT , RESET , or BUTTON . In HTML 4.0, the BUTTON element was introduced and is supported by Internet Explorer 6.0 and Netscape 7.0. This new element lets you create buttons with multiline labels, images, font changes, and the like. However, earlier browsers may not support the BUTTON element.

Submit Buttons

HTML Element: <INPUT TYPE="SUBMIT" ...> (No End Tag)

Attributes: NAME , VALUE , ONCLICK , ONDBLCLICK , ONFOCUS , ONBLUR

When a submit button is clicked, the form is sent to the servlet or other server-side program designated by the ACTION parameter of the FORM . Although the action can be triggered in other ways, such as the user clicking on an image map, most forms have at least one submit button. Submit buttons, like other form controls, adopt the look and feel of the client operating system, so will look slightly different on different platforms. Figure 19-11 shows a submit button on Windows 2000 Professional, created by

 <INPUT TYPE="SUBMIT"> 

NAME and VALUE

Most input elements have a name and an associated value. When the form is submitted, the names and values of active elements are concatenated to form the data string. If a submit button is used simply to initiate the submission of the form, the button's name can be omitted and it does not contribute to the data string that is sent. If a name is supplied, then only the name and value of the button that was actually clicked are sent. This capability lets you use more than one button and detect which one is pressed. The label is used as the value that is transmitted. Supplying an explicit VALUE will change the default label.

For instance, Listing 19.5 creates a textfield and two submit buttons, shown in Figure 19-12. If, for example, the first button is selected, the data string sent to the server would be Item=256MB+SIMM& Add =Add+Item+to+Cart .

Listing 19.5 Example of SUBMIT input controls

 <CENTER> Item: <INPUT TYPE="TEXT" NAME="Item" VALUE="256MB SIMM"><BR>  <INPUT TYPE="SUBMIT" NAME="Add"   VALUE="Add Item to Cart">   <INPUT TYPE="SUBMIT" NAME="Delete"   VALUE="Delete Item from Cart">  </CENTER> 

Figure 19-12. Submit buttons with user-defined labels.

Note that when the form data is submitted to a servlet, request.getParameter returns null for buttons that were not pressed. So, you could use a simple check for null , as below, to determine which button was selected.

 if (request.getParameter("Add") != null) {   doCartAdditionOperation(...); } else if (request.getParameter("Delete") != null) {   doCartDeletionOperation(...); } 

ONCLICK, ONDBLCLICK, ONFOCUS, and ONBLUR

These nonstandard attributes are used by JavaScript-capable browsers to associate JavaScript code with the button. The ONCLICK and ONDBLCLICK code is executed when the button is pressed, the ONFOCUS code when the button gets the input focus, and the ONBLUR code when the button loses the focus. If the code attached to a button returns false , the submission of the form is suppressed. HTML attributes are not case sensitive, and these attributes are traditionally called onClick , onDblClick , onFocus , and onBlur by JavaScript programmers.

Figure 19-11. A submit button with the default label.

HTML Element: <BUTTON TYPE="SUBMIT" ...> HTML Markup </BUTTON>

Attributes: NAME , VALUE , ONCLICK , ONDBLCLICK , ONFOCUS , ONBLUR

This alternative way of creating submit buttons lets you use arbitrary HTML markup for the content of the button. This element lets you have multiline button labels, button labels with font changes, image buttons, and so forth. Listing 19.6 gives a few examples, with results shown in Figure 19-13.

NAME, VALUE, ONCLICK, ONDBLCLICK, ONFOCUS, and ONBLUR

These attributes are used in the same way as with <INPUT TYPE="SUBMIT" ...> .

Listing 19.6 ButtonElement.html

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD>   <TITLE>The BUTTON Element</TITLE> </HEAD> <BODY BGCOLOR="WHITE"> <CENTER> <H2>The BUTTON Element</H2> <FORM ACTION="http://localhost:8088/SomeProgram">  <BUTTON TYPE="SUBMIT">Single-line Label</BUTTON>  &nbsp;&nbsp;  <BUTTON TYPE="SUBMIT">Multi-line<BR>label</BUTTON>  <P>  <BUTTON TYPE="SUBMIT">   <B>Label</B> with <I>font</I> changes.   </BUTTON>  <P>  <BUTTON TYPE="SUBMIT">   <IMG SRC="images/Java-Logo.gif" WIDTH="110" HEIGHT="101"   ALIGN="LEFT" ALT="Java Cup Logo">   Label<BR>with image   </BUTTON>  </FORM> </CENTER> </BODY></HTML> 

Figure 19-13. Submit buttons created with the BUTTON element.

Reset Buttons

HTML Element: <INPUT TYPE="RESET" ...> (No End Tag)

Attributes: VALUE , NAME , ONCLICK , ONDBLCLICK , ONFOCUS , ONBLUR

Reset buttons serve to reset the values of all items in the form to those specified in the original VALUE parameters. Their value is never transmitted as part of the form's contents.

VALUE

The VALUE attribute specifies the button label; "Reset" is the default.

NAME

Because reset buttons do not contribute to the data string transmitted when the form is submitted, they are not named in standard HTML. However, JavaScript permits a NAME attribute to be used to simplify reference to the element.

ONCLICK, ONDBLCLICK, ONFOCUS, and ONBLUR

These nonstandard attributes are used by JavaScript-capable browsers to associate JavaScript code with the button. The ONCLICK and ONDBLCLICK code is executed when the button is pressed, the ONFOCUS code when the button gets the input focus, and the ONBLUR code when it loses the focus. HTML attributes are not case sensitive, and these attributes are traditionally called onClick , onDblClick , onFocus , and onBlur by JavaScript programmers.

HTML Element: <BUTTON TYPE="RESET" ...> HTML Markup </BUTTON>

Attributes: VALUE , NAME , ONCLICK , ONDBLCLICK , ONFOCUS , ONBLUR

This alternative way of creating reset buttons lets you use arbitrary HTML markup for the content of the button. All attributes are used identically to those in <INPUT TYPE="RESET" ...> .

JavaScript Buttons

HTML Element: <INPUT TYPE="BUTTON" ...> (No End Tag)

Attributes: NAME , VALUE , ONCLICK , ONDBLCLICK , ONFOCUS , ONBLUR

This element is recognized only by browsers that support JavaScript. It creates a button with the same visual appearance as a SUBMIT or RESET button and allows the author to attach JavaScript code to the ONCLICK , ONDBLCLICK , ONFOCUS , or ONBLUR attributes. The name/value pair associated with a JavaScript button is not transmitted as part of the data when the form is submitted. Arbitrary code can be associated with the button, but one of the most common uses is to verify that all input elements are in the proper format before the form is submitted to the server. For instance, the following creates a button that, when activated, calls the validateForm function.

 <INPUT TYPE="BUTTON" VALUE="Check Values"        onClick="validateForm()"> 

HTML Element: <BUTTON TYPE="BUTTON" ...> HTML Markup </BUTTON>

Attributes: NAME , VALUE , ONCLICK , ONDBLCLICK , ONFOCUS , ONBLUR

This alternative way of creating JavaScript buttons lets you use arbitrary HTML markup for the content of the button. All attributes are used identically to those in <INPUT TYPE="BUTTON" ...> .