HTML | DOM Input Image Object

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output

  • Before click on the button:
  • After click on the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output

  • Before click on the button:
  • After click on the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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


Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.