Skip to content
Related Articles

Related Articles

HTML | DOM Input Image Object

Improve Article
Save Article
  • Last Updated : 26 Aug, 2022
Improve Article
Save Article

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. 

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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!