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

Last Updated : 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>