The HTML <input type="image"> element is used to create an image-based submit button in a form. Clicking the image submits the form data to the server.
- Used to submit form data using an image button.
- Created using <input type="image"> inside a form.
- Supports attributes like src, alt, width, and height.
Syntax:
<input type="image">- 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.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
HTML Input Type Image
</title>
</head>
<body>
<h2>HTML <input type="image"></h2>
<!--Driver Code Ends-->
<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.geeksforgeeks.org/wp-content/uploads/20240519103834/GFG-Logo.png"
height="40px" width="150px" alt="GFG" />
</form>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
Example 2: In this example, we will make a login form & use the image as an input type to submit the form.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>
HTML Input Type Image
</title>
</head>
<body>
<h2>HTML <input type="image"></h2>
<!--Driver Code Ends-->
<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.geeksforgeeks.org/wp-content/uploads/20240519103834/GFG-Logo.png"
height="40px" width="130px" alt="submit" />
</form>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->