How to create an image acting as a submit button using HTML5 ? - GeeksforGeeks

09 Oct, 2021
In this article, we will learn how to create an image that acts as a submit button i.e. whenever we click on an image in the form, it will be automatically submitted to the server. The default type of <input> type attribute is text. Here, we use a simple approach to complete the task.
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.
Approach:
Firstly, create an HTML document that contains an <input> tag.
use the type attribute with the <input> tag.
set the type attribute to value “image“.
You can also use the src attribute which contains the URL of the image.
Example: This example illustrates the use of the image button in the input type to submit the login details in HTML Form.
HTML
<!DOCTYPE html><html>  <body style="text-align: center">    <h1 style="color: green">        GeeksForGeeks    </h1>          <h2>        How to create an image that act         as a submit Button using HTML5?    </h2>          <form>        Email Address:        <input type="email"             placeholder="Enter your email Address" />        <br><br>          Password No.:        <input type="password"             placeholder="Enter password " />        <br><br>          <input type="image" src="https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"            height="80px" width="110px"             alt="submit" />    </form></body>  </html>
Output:
Example: In this example, we have used the input type as an image for the newsletter subscription button in HTML.
HTML
<!DOCTYPE html><html>  <body style="text-align: center">    <h1 style="color: green">        GeeksforGeeks    </h1>          <h4>Subscribe to GeeksforGeeks Newsletter</h4>          <p>        The best of content served at the         convenience of your fingertips.    </p>      <form>        Name:        <input type="text" placeholder="Name"                name="name" required />        <br><br>          Email:        <input type="text" placeholder="Email address"                name="mail" required />        <br><br>          <input type="checkbox" checked="checked"                name="subscribe" />        Daily Newsletter          <br><br>        <input type="image" src="https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"            height="80px" width="90px"             value="Subscribe" />    </form></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-Questions
HTML-Tags
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript