Image Button
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
Example:
<input type="image" name="imgbtn"
src="images/savechanges.jpg" alt="Tool Tip">The image button will be displayed as below:
Example with a Web Form
Enter your name and click the buttonCode 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.htmJust 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><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
This article is written by plus2net.com team.
- Text Field to enter any (short ) text usually upto 100 chars length
- Hidden Field to pass data not visible to user
- Password Field Similar to text field but date entered is not masked or shown as **
- TextArea Entering large amount of text
- RadioButton Selecting one option out of many
- Checkbox Selecting one or more option out of many
- ButtonTo trigger user generated events or action
- Image Button Used to click actions for some script of event to happen
- Submit Button A button to all user entered data of a form
- Two Submit ButtonsSubmitting same form data to two different forms
- Submit new window Submitting form data to a new window
- Reset Button A button to reset the form data
- Drop-Down Menu Selecting one option from a list of option available in a list box or drop down menu
- Datalist Options to Select with Auto Complete facility
- Back Button Returning to previous page by clicking
- File UploadUploading files to the server by using html form
- Set focus Keeping cursor on input box at the time of page loading
| Sriram Narasimhan | 30-05-2014 |
| Nice tutorials | |