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.