HTML | DOM Input Image Object

Last Updated : 26 Aug, 2022

The Input Image Object in HTML DOM is used to represent the HTML < input > element with type=”image”. This tag is used to access or create the element. This element can be accessed by using getElementById() method.

Syntax:

document.getElementById("MyImage");

Return Value: It return the properties of < input > tag with type="image". Property Values:

Value	Description
alt	Set/return the value of the alt attribute of the input image.
autofocus	Set/return if an input image automatically gets focus when the page loads.
defaultValue	Set/return the default value of an input image.
disabled	Set/return whether an input image is disabled, or not.
form	Returns a reference of the form that contains the input image.
formAction	Set/return the value of the formaction attribute of an input image.
formEnctype	Set/return the value of the formenctype attribute of an input image.
formMethod	Set/return the value of the formmethod attribute of an input image.
formNoValidate	Set/return if the form-data is validated or not when submitted.
formTarget	Set/return the value of formtarget attribute of an input image.
height	Set/return the value of height attribute of input image.
name	Set/return the value of name attribute of input image.
src	Set/return the value of src attribute of input image.
type	Return the type of form element of input element.
value	Set/return the value of value attribute of input image.
width	Set/return the value of width attribute of input image.

Example-1: Access Input element and return ID, type and width.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Input Image Object
    </title>
</head>
<body style="text-align:center;">
    <h1 style="color:green;">  
        GeeksForGeeks  
    </h1>
    <h2>DOM Input Image Object</h2>
    <button onclick="my_geek()">
        <input id="myImage" 
               type="image" 
src="https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png"
               alt="Submit" 
               width="48" 
               height="48">
    </button>
    <h2 id="Geek_h" style="color:green;"> 
    </h2>
    <script>
        function my_geek() {
          
            // Access myImage and return id 
            var txt = document.getElementById(
              "myImage").id;
          
            txt = "id = " + txt + ", ";
          
            // Return type
            txt += "type = " + document.getElementById(
              "myImage").type + ", ";
          
            // Return Width
            txt += "width = " + document.getElementById(
              "myImage").width;
            document.getElementById(
              "Geek_h").innerHTML = txt;
        }
    </script>
</body>
</html>

Output

Before click on the button:

After click on the button:

Example-2: Access Input element and return target, alt and height.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Input Image Object
    </title>
</head>
<body style="text-align:center;">
    <h1 style="color:green;"> 
        GeeksForGeeks 
    </h1>
    <h2>DOM Input Image Object</h2>
    <button onclick="my_geek()">
        <input id="myImage"
               type="image" 
               formtarget="#"
src="https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png" 
               alt="Submit" 
               width="48" 
               height="48">
    </button>
    <h2 id="Geek_h" style="color:green;"> 
    </h2>
    <script>
        function my_geek() {
          
            // Return target, alt and height.
            var txt = document.getElementById(
              "myImage").formTarget;
            txt = "formTarget = " + txt + ", ";
            txt += "alt = " + document.getElementById(
              "myImage").alt + ", ";
            txt += "height = " + document.getElementById(
              "myImage").height;
            document.getElementById(
              "Geek_h").innerHTML = txt;
        }
    </script>
</body>
</html>

Output

Before click on the button:

After click on the button:

Example-3: Access Input element and return formTarget, formEnctype and formAction.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Input Image Object
    </title>
</head>
<body style="text-align:center;">
    <h1 style="color:green;">  
        GeeksForGeeks  
    </h1>
    <h2>DOM Input Image Object</h2>
    <button onclick="my_geek()">
        <input id="myImage"
               type="image" 
src="https://media.geeksforgeeks.org/wp-content/uploads/gfg-40.png" 
               alt="Submit" 
               formaction="#" 
               formtarget="#" 
               formenctype="text/plain"
               width="48" 
               height="48">
    </button>
    <h2 id="Geek_h" style="color:green;"> 
    </h2>
    <script>
        function my_geek() {
          
            // Return formTarget, formEnctype and formAction.
            var txt = document.getElementById(
              "myImage").formTarget;
            txt = "formTarget = " + txt + ", ";
            txt += "formEnctype = " + document.getElementById(
              "myImage").formEnctype + ", ";
            txt += "formAction = " + document.getElementById(
              "myImage").formAction;
            document.getElementById(
              "Geek_h").innerHTML = txt;
        }
    </script>
</body>
</html>

Output

Before click on the button:

After click on the button:

Supported Browsers:

Google Chrome
Mozilla Firefox
Edge 12+
Safari
Opera

HTML | DOM Ol start Property

PranchalKatiyar

Improve

Article Tags :

HTML | DOM Input Image Object

Similar Reads

Thank You!

What kind of Experience do you want to share?