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

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.

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

My Personal Notes

Related Articles

Table of Contents

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

HTML

HTML