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"
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...