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.
HTML
<!DOCTYPE html> < html > < head > < title > HTML DOM Input Image Object </ title > </ head > < body style="text-align:center;"> < h1 style="color:green;"> w3wiki </ h1 > < h2 >DOM Input Image Object</ h2 > < button onclick="my_geek()"> < input id="myImage" type="image" src="https://media.w3wiki.net/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;"> w3wiki </ h1 > < h2 >DOM Input Image Object</ h2 > < button onclick="my_geek()"> < input id="myImage" type="image" formtarget="#" src="https://media.w3wiki.net/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;"> w3wiki </ h1 > < h2 >DOM Input Image Object</ h2 > < button onclick="my_geek()"> < input id="myImage" type="image" src="https://media.w3wiki.net/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