Most form elements are created using the <INPUT>
tag. Within this tag, the TYPE
attribute determines the kind of element you'll create.
To create a graphical button, set the TYPE
attribute to image,
and use the SRC
attribute to supply the URL location of where the button exists.
This URL should point to a GIF or
JPEG image, which the browser
will place in your document just like any other image.
As a simple
example, here is a button composed of a arrow image:
<INPUT TYPE="image" SRC="bullet.gif">
Within your
form, the button will look something like this:
In some browsers you should not only see the button,
but also a border around the button, which is not what we had in
mind. If you do not want this effect, use the BORDER
attribute to get rid of the border:
<INPUT TYPE="image" SRC="bullet.gif" BORDER="0">
This
creates a suitable button:
Unlike regular mouse-sensitive images created by
placing images within <A>
tags, the image buttons in your forms will not cause the mouse
pointer to change shape when it passes over. Without the telltale
border, users may not know that the image is actually a button to be
pressed. Make sure to design graphical buttons that look like
buttons, so your users will know to click on them.
You can also use the align
attribute with your graphical buttons to shift their position in the
document, just like you would use this attribute with a conventional
<IMG>
tag. Adding ALIGN="right"
to the <INPUT
TYPE="image"> tag shifts the image to
the right edge of the text, while ALIGN="left"
moves the image to the left.
Using
graphical buttons
When you click on a graphical button, the browser
transmits the form parameters to the server for processing. Unlike submit
and reset buttons, which send their name and value as parameters
to the server, graphical buttons send their name and the (x,y)
position of the mouse to the server.
To be more specific, graphical buttons send two
parameters to the server: One for the x
position of the mouse, and another for the
y position of the mouse. For this to work correctly,
you must name your button with the NAME
attribute, like this:
<INPUT TYPE="image" SRC="bullet.gif" NAME="bullet">
When you click on this button, the browser will send
parameters named bullet.x
and bullet.y
to the server. The position of the mouse is computed relative to the
button image, with the upper left corner being location (0,0).
The mouse position may or may not matter to the
server script. If not, the mere presence of these two parameters
will tell you that the button was pressed by the user. If so, you
can use these values to take action within your script. In these
cases, you can use the graphical button like a mouse-sensitive
image, with the mouse position causing different actions depending
on where the user clicked.
Graphical buttons are essential for creating
visually attractive forms, especially when you want to rely more on
imagery instead of text to get your message across.
<< BACK
Index: Website Creation
Resource Guide To - Website Development & Design
Index 2:
Creating Forms - Everything About Forms