HTML <input type=”image”>
The HTML <input type=”image”> element defines an image as a submit button within a form. When the image is clicked, the form is submitted, similar to a regular submit button. It allows for more visually appealing form submissions, as the image can serve as the button instead of a plain text or styled button element.
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: In this example, we will use the HTML <input type=”image”> element to create an image-based submit button for a form.
<!DOCTYPE html>
<html>
<head>
<title>
HTML Input Type Image
</title>
</head>
<body>
<h2>HTML <input type="image"></h2>
<form id="#">
<label for="name">Enter Name:</label>
<input type="text" id="name"
placeholder="Enter Name..." />
<br><br>
<label for="email">Enter Email:</label>
<input type="email" id="email"
placeholder="Enter Email..." />
<br><br>
<label for="mobile">Enter Contact:</label>
<input type="tel" id="mobile"
placeholder="Enter Phone Number..." />
<br><br>
<input type="image" src=
"https://media.w3wiki.net/wp-content/uploads/20240519103834/GFG-Logo.png"
height="40px" width="150px" alt="GFG" />
</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.
<!DOCTYPE html>
<html>
<head>
<title>
HTML Input Type Image
</title>
</head>
<body>
<h2>HTML <input type="image"></h2>
<form action="#">
<label for="email">User Id:</label>
<input type="email"
placeholder="Enter Email..." />
<br><br>
<label for="password">Password:</label>
<input type="password"
placeholder="Enter Password..." />
<br><br>
<input type="image" src=
"https://media.w3wiki.net/wp-content/uploads/20240519103834/GFG-Logo.png"
height="40px" width="130px" alt="submit" />
</form>
</body>
</html>
Output
Supported Browsers
- Chrome 1
- Edges 12
- Firefox 1
- Opera 15
- Safari 1
Contact Us