Tutorial 13: Giving Form to Forms - HTML with Style | 6

Tutorial 13: Giving Form to Forms

Graphical submit buttons

Graphical submit buttons are similar to normal submit buttons, but instead of using a button as the control, they use an image that the author can specify. To submit the form, the user clicks on the button. This works similarly to a server-side image map (which, as you can now see, is a primitive type of form), in that it creates two name-value pairs: One with the control name followed by .x and using the x-coordinate of the user's click as the value, and another with the control name followed by .y and the y-coordinate as the value.

For example, if a graphical submit button had a NAME of img, and the user clicks on it 10 pixels from the left and 17 pixels from the top, it will create the name/value pairs img.x=10 and img.y=17.

As you can see, this creates a few problems for users who can't view images on their screens. There are several ways around this: First, you must supply a text description via the ALT attribute, just like you do with IMG elements. Second, the form could have a default behaviour if no coordinates are given. You can associate a client-side image map with a graphical submit button via the USEMAP attribute, but this is currently unsupported by browsers, and the specification is not very clear on what the expected behavior is.

Graphical submit buttons have a type of image. Note that the VALUE attribute, if present, is not used. The only name/value pairs created by the control are those that contain the click coordinates.

<FORM ACTION="/cgi-bin/html/formdump.cgi" 
      METHOD="GET" ENCTYPE="application/x-www-form-urlencoded">
<P>First name:
<INPUT TYPE="text" NAME="firstname" SIZE="10">
Last name:
<INPUT TYPE="text" NAME="lastname" SIZE="10">
<P>Select a shape:<BR>
<INPUT TYPE="image" NAME="shapes" SRC="example1.gif" 
       ALT="Three shapes to choose from">
</FORM>

Simple buttons

HTML 4.0 added another type of control, the plain button, that does nothing by default. A simple button has a TYPE of button, and displays the contents of the VALUE attribute on the button face. Buttons have no default behaviour, but exist so that client-side scripts (such as those written in JavaScript or VBScript) can use them to implement a user interface. These controls are not part of the traditional use of forms, so unless you're going to be using client-side scripting, you don't need to know much about them. You can read up on client-side scripting techniques on Doc JavaScript and the DHTML Lab.

Both Navigator and Internet Explorer have supported button controls since version 4.0.

If your browser processes JavaScript, the following example buttons should pop up alert windows saying "Hello" and "Goodbye."

<FORM>
<INPUT TYPE="button" VALUE="Say Hello" ONCLICK="alert('Hello!')">
<INPUT TYPE="button" VALUE="Say Goodbye" ONCLICK="alert('Goodbye!')">
</FORM>

Produced by Stephanos Piperoglou

URL: https://www.webreference.com/html/tutorial13/13.html

Created: May 28, 1998
Revised: February 25, 1999