The HTML <input> type attribute is used to specify the type of <input> element to display. The default type of <input> type attribute is text. In this article, we set the image as an input type value. It creates the image as the submit button.
Syntax:
<input type="image">
Attribute Value:
- image: It is used to define an image as the submit button.
Features:
- The input element does not accept a value attribute.
- The image path is defined in the src attribute.
- The input element is supported by various common attributes.
Example 1: In this example, we will set the input type as an image to submit the form.
HTML
<!DOCTYPE html><html>
<body style="text-align: center">
<h1 style="color: green">
GeeksForGeeks
</h1>
<h2>HTML <input type="image"></h2>
<form>
Name:
<input type="text" placeholder
="Enter your name here--" /><br />
Address:
<input type="text" placeholder
="Enter your permanent Address" /><br />
Phone No.:
<input type="tel" placeholder
="Enter phone number" />
<br /><br />
<input type="image" src=
height="80px"
width="110px" alt="submit" />
</form>
</body>
</html>
|
Output:
Example 2: In this example, we will make a login form & use the image as an input type to submit the form.
HTML
<!DOCTYPE html><html>
<head>
<style>
h1,
h2 {
font-family: impact;
}
</style>
</head>
<body style="text-align: center">
<h1 style="color: green">GeeksForGeeks</h1>
<h2>HTML <input type="image"></h2>
<form>
User_id:
<input type="email" placeholder=
"Enter your Email Address h--" /><br />
Password:
<input type="password" placeholder=
"Enter your password" /><br />
<br />
<br />
<b>
<p>
click on the below image to
log in to Geeks Portal
</p>
</b>
<input type="image" src=
height="40px" width="110px" alt="submit" />
</form>
</body>
</html>
|
Output:
Supported Browsers:
- Google Chrome
- Microsoft Edges 12.0 & above
- Internet Explorer
- Firefox
- Opera
- Safari