HTML <input type=”image”>

Last Updated : 02 Jun, 2022

The HTML <input> type attribute is used to specify the type of <input> element to display. The default type of <input> type attribute is text. In this article, we set the image as an input type value. It creates the image as the submit button.

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.

Example 1: In this example, we will set the input type as an image to submit the form.

HTML

<!DOCTYPE html>
<html>
 
<body style="text-align: center">
    <h1 style="color: green">
        GeeksForGeeks
    </h1>
 
    <h2>HTML <input type="image"></h2>
 
    <form>
        Name:
        <input type="text" placeholder
            ="Enter your name here--" /><br />
 
        Address:
        <input type="text" placeholder
            ="Enter your  permanent Address" /><br />
 
        Phone No.:
        <input type="tel" placeholder
            ="Enter phone number" />
 
        <br /><br />
        <input type="image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png"
            height="80px"
            width="110px" alt="submit" />
    </form>
</body>
 
</html>

Output:

Example 2: In this example, we will make a login form & use the image as an input type to submit the form.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <style>
        h1,
        h2 {
            font-family: impact;
        }
    </style>
</head>
 
<body style="text-align: center">
    <h1 style="color: green">GeeksForGeeks</h1>
 
    <h2>HTML <input type="image"></h2>
 
    <form>
        User_id:
        <input type="email" placeholder=
            "Enter your Email Address h--" /><br />
 
        Password:
        <input type="password" placeholder=
            "Enter your  password" /><br />
        <br />
        <br />
 
        <b>
<p>
            click on the below image to 
            log in to Geeks Portal
        </p>
</b>
 
        <input type="image" src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
            height="40px" width="110px" alt="submit" />
    </form>
</body>
 
</html>