Skip to content
Related Articles

Related Articles

Improve Article
HTML | DOM Input Image Object
  • Last Updated : 14 Feb, 2019

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:

ValueDescription
altSet/return the value of the alt attribute of the input image.
autofocusSet/return if an input image automatically gets focus when the page loads.
defaultValueSet/return the default value of an input image.
disabledSet/return whether an input image is disabled, or not.
formReturns a reference of the form that contains the input image.
formActionSet/return the value of the formaction attribute of an input image.
formEnctypeSet/return the value of the formenctype attribute of an input image.
formMethodSet/return the value of the formmethod attribute of an input image.
formNoValidateSet/return if the form-data is validated or not when submitted.
formTargetSet/return the value of formtarget attribute of an input image.
heightSet/return the value of height attribute of input image.
nameSet/return the value of name attribute of input image.
srcSet/return the value of src attribute of input image.
typeReturn the type of form element of input element.
valueSet/return the value of value attribute of input image.
widthSet/return the value of width attribute of input image.

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






<!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" 
               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.




<!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="#"
               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.




<!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" 
               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
  • Safari
  • Opera



My Personal Notes arrow_drop_up
Recommended Articles
Page :