Image button in HTML

Image button in HTML
 
Image button in HTML
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


Image button is similar in action to that of submit button, but it looks like an image. This expands designer's abilities to improve the form. When a user clicks on the image, the form data are sent to the server and are processed by the program specified by the parameter action of the tag form.

Image button in a form is created as follows.

<input type="image" parameters>

Field parameters are listed in the table.

Parameter

Description

name

Name of the field. Designed for the program that processes the form, that it would be able to identify this field.

src

URL of the image (path to the graphic file).

align

Field alignment. Possible values: top, middle, bottom, right, left, texttop, baseline, absmiddle, absbottom. When applied the result is the same as in images.

width

Image width.

height

Image height.

vspace

Vertical spacings around the image at the top and bottom, in pixels.

hspace

Horizontal spacings around the image to the left and right, in pixels.

border

Determines the width of the border around the image, in pixels.

 How to create an image button is shown in example 1. The table is used to align the elements.

 Example 1. Image button.

<form action="/cgi-bin/handler.cgi">
  <table align="center">
    <tr><td colspan="2">Enter your name:</td></tr>
    <tr>
      <td><input type="text" size="25"></td>
      <td><input type="image" src="/images/imgbutton.gif" width="91" height="25" border="0"></td>
    </tr>
  </table>
</form>

The result is shown below.

Enter your name:

 

Read also

Buttons in HTML

Buttons in HTML

Graphics formats in HTML

Graphics formats in HTML

Image size in HTML

Image size in HTML

Inserting images in HTML

Inserting images in HTML

Discussion (total 1 comments)

shriniwas
September 24, 2013 at 09:54 am
outstanding examples.....long time i am looking for such titorials..thanks a lot...

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation