sound advice, your web design resource logo Home exchange links about us anti-spam pevention our web hosting company
search our websitesearch the internet

Tell a friend:

Index: Website Creation

Contains HTML tips, guides to forms, CSS, Java, forms, CGI, image tools, image galleries, website management tools and more!

Resource Guide To - Website Development & Design

Index 2:  Creating Forms - Everything About Forms


Creating Graphical Form Buttons

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

© Copyright -all rights reserved