RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-input-typeimage/ below:

HTML <input type="image"> - GeeksforGeeks

HTML <input type="image">

Last Updated : 20 May, 2024

The HTML <input type="image"> element defines an image as a submit button within a form. When the image is clicked, the form is submitted, similar to a regular submit button. It allows for more visually appealing form submissions, as the image can serve as the button instead of a plain text or styled button element.

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: In this example, we will use the HTML <input type="image"> element to create an image-based submit button for a form.

HTML


 <!DOCTYPE html>
<html>

<head>
    <title>
        HTML Input Type Image
    </title>
</head>

<body>
    <h2>HTML &lt;input type="image"&gt;</h2>

    <form id="#">
        <label for="name">Enter Name:</label>
        <input type="text" id="name" 
            placeholder="Enter Name..." />
        <br><br>

        <label for="email">Enter Email:</label>
        <input type="email" id="email" 
            placeholder="Enter Email..." />
        <br><br>

        <label for="mobile">Enter Contact:</label>
        <input type="tel" id="mobile" 
            placeholder="Enter Phone Number..." />
        <br><br>

        <input type="image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240519103834/GFG-Logo.png" 
            height="40px" width="150px" alt="GFG" />
    </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>
    <title>
        HTML Input Type Image
    </title>
</head>

<body>
    <h2>HTML &lt;input type="image"&gt;</h2>

    <form action="#">
        <label for="email">User Id:</label>
        <input type="email" 
            placeholder="Enter Email..." />
        <br><br>

        <label for="password">Password:</label>
        <input type="password" 
            placeholder="Enter Password..." />
        <br><br>

        <input type="image" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20240519103834/GFG-Logo.png"
            height="40px" width="130px" alt="submit" />
    </form>
</body>

</html>

Output

Supported Browsers

Chrome 1
Edges 12
Firefox 1
Opera 15
Safari 1

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4