Forms : Image Button - HTML Tutorial

HTML Forms :

IMAGE BUTTON

Image buttons have the same effect as submit buttons. When a visitor clicks an image button the form is sent to the address specified in the action setting of the <form> tag.

Since visitors aren't always perfectionists you might consider adding a javascript validation of the content before it is actually sent.

SETTINGS:

Below is a listing of valid settings for image buttons:

HTML	EXPLANATION	EXAMPLE
image ��name= ��src= ��align= ��border= ��width= ��height= ��vspace= ��hspace= ��tabindex=	Submit button Name of the image. Url of the image. Alignment of the image. Border width around the image. Width of the image. Height of the image. Spacing over and under image. Spacing left and right of image. Tab order of the image.

The name setting adds an internal name to the image button so the program that handles the form doesn't confuse it with the other fields.

The src setting defines the URL of the image.

The align setting defines how the image is aligned.
Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM.
The alignments are explained in the image section.
You can learn about the different alignments here.

The border setting defines the width (in pixels) of the border around the image.

The width setting defines the width of the image.

The height setting defines the height of the image.

The vspace setting defines the spacing over and under the image (in pixels).

The hspace setting defines the spacing to the left and right of the image (in pixels).

The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.

AN EXAMPLE:

Look at this HTML example:

And the resulting output from it:

<< PREVIOUS