Image button in HTML Form Field

Image buttons have the same effect as a submit button, only difference is instead of a normal submit button we can place an image of our choice. An Image button can be created as :

<input type="image" name="<Name of the image button >" 
src="image source/path" border="border width" alt="Alternate text">

Using Image as submit button in HTML form with attributes

Attributes of Image Button:

Name: Specifies the name of the object through which it can be referenced.
Src: Specifies the image source. i.e, the path of the image that has to be displayed.
Border: Specifies the border of the image source. If 0 is given, then no border will be displayed.
Alt: Specifies the alternate text that will appear if the image fails to load on a user's screen.
height, width We can specify the dimensions of the image to display
formaction: URL ( address ) to which the form will be submitted, this takes precedence over the action attribute of the form.
formtarget: Where to display the target page ( response ), fromtarget=_blank will open a new window.
formenctype: The encoding methods , the are application/x-www-form-urlencoded , multipart/form-data, text/plain

Example:

<input type="image" name="imgbtn" 
	src="images/savechanges.jpg"  alt="Tool Tip">

This places an image button within the HTML form, which can be referenced by using its name "imgbtn" with a Alt text "Tool Tip". Tooltip refers to the text that has to be displayed when we place mouse over the image.

The image button will be displayed as below:

Example with a Web Form

Enter your name and click the button

Code is here

<form method=post action='html_frmimgbtn.php'>
<input type=text name=t1>
<input type="image" name="imgbtn" src="images/savechanges.jpg"  alt="Tool Tip"> 
</form>

Using Images as Hyperlinks

Images can also act as hyperlinks just as normal text. Just as text is made as a hotspot so as an image. i.e, by enclosing the <img> tag wtihin the <a> ... </a> tags.

Example:

<a href="target_page.htm"><img src="target.gif"></a>

Note:

Here the image acts as a hotspot and navigates to the file target_page.htm
Just as an underline appears on the text if we enclose text within <a> ... </a> tags, a border will appear for the image that has been placed with in <a> ... </a> tags. You can remove the border by setting the border attribute of <img> tag to 0.

<a href="target_page.htm"><img src="target.gif" border="0"></a>

You can click the image below to visit HTML tutorial home page.

<a href=site_map.php><img src=images/html.jpg alt='HTML Home'></a>

HTML Form Buttons in form Drop down Listbox Checkbox in a form

Sriram Narasimhan	30-05-2014
Nice tutorials

Image Button

Attributes of Image Button:

Example:

Example with a Web Form

Using Images as Hyperlinks

Example:

Note:

Subscribe