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>

Output:

How to create an area inside an image-map using HTML?

manaschhabra2

Improve

Article Tags :

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

Similar Reads

Thank You!

What kind of Experience do you want to share?