EchoEcho.Com Homepage
Web Hosting - As Reliable As It Gets!
   Home > Tutorials > HTML > Forms


 Tutorials 
 D-Zine Articles 
 Online Tools 
 Free Resources 
 References 
 Quiz 
 Hosting 

















  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:


HTMLEXPLANATIONEXAMPLE
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:
<html>
<head>
<title>My Page</title>
</head>
<body>
<form name="myform" action="http://www.mydomain.com/myformhandler.cgi" method="POST">
<div align="center">
<br><br>
<input type="text" size="25" value="Enter your name here!">
<br><input type="image" src="rainbow.gif" name="image" width="60" height="60"><br>
</div>
</form>
</body>
</html>


And the resulting output from it:






 << PREVIOUS
READ MORE >>  
















DEVELOPER TIP!
FACT:
Internet Explorer lets you customize the look of cursors on your pages.
TIP:
Our CSS Cursor Tutorial will teach you how extremely easy it is!





     "Better Than Books - As Easy As It Gets!"


On EchoEcho: D-Zine Articles | Tutorials | Online Tools | Free Resources | References | Quiz | HostingAbout EchoEcho