HTML DOM Input Image Object


The HTML DOM input image Object represent the <input> element with type=”image” of an HTML document.

Let’s see how to create input image object −

Syntax

Following is the syntax −

var imageInput = document.createElement(“INPUT”);
imageInput.setAttribute(“type”,”image”);

Properties

Following are the properties of HTML DOM input image Object −

PropertyExplanation
AltIt returns and modify the value of the alt attribute of an input image.
AutofocusIt returns whether the browser finished loading an image in HTML web page or not.
defaultValueIt returns and modify the default value of an input image.
DisabledIt returns and modify the value of the disabled attribute of an input image.
FormIt returns the reference of the form that contain the input image field in the HTML document.
formActionIt returns and modify the value of the formaction attribute of an input image.
formEnctypeIt returns and modify the value of the formenctype attribute of an input image.
formMethodIt returns and modify the value of the formmethod attribute of an input image.
formNoValidateIt returns and modify whether the data of the form should be validated or not on submission.
formTargetIt returns and alter the value of the formtarget attribute of an input image.
HeightIt returns and modify the value of the height attribute of an input image.
NameIt returns and alter the value of the name attribute of an input image.
SrcIt returns and modify the value of the src attribute of an input image.
TypeIt returns the value of the type attribute of an input image.
ValueIt returns and modify the content of the value attribute of an input image.
WidthIt returns and modify the value of the width attribute of an input image.

Example

Let us see an example of input image object −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   body{
      text-align:center;
      background-color:#363946;
      color:#fff;
   }
   .btn{
      background-color:#db133a;
      border:none;
      height:2rem;
      border-radius:50px;
      width:60%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
</style>
</head>
<body>
<h1>DOM Input Image Object Example</h1>
<button onclick="createIframe()" class="btn">Create an image submit button</button>
<script>
   function createIframe() {
      var imageInput = document.createElement("INPUT");
      imageInput.setAttribute("type", "image");
      imageInput.setAttribute("src", "https://www.tutorialspoint.com/jdbc/images/jdbc-mini-logo.jpg");
      document.body.appendChild(imageInput);
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Create an image submit button” button to create an input image object −

raja
Published on 17-Jul-2019 11:34:32
Advertisements