Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML <input type=”image”>

  • Last Updated : 27 Aug, 2021

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=
            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=
            height="40px" width="110px" alt="submit" />
    </form>
</body>
  
</html>

Output:

Supported Browsers: 

  • Google Chrome 4.0 & above
  • Microsoft Edges 12.0 & above
  • Internet Explorer 6.0 & above
  • Firefox 2.0 & above
  • Opera 10.0 & above
  • Safari 3.1 & above




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!