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" border="border of the image" alt="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
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.
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.