HTML DOM Input Image Object

HTML Web Development Front End Technology

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 −

Property	Explanation
Alt	It returns and modify the value of the alt attribute of an input image.
Autofocus	It returns whether the browser finished loading an image in HTML web page or not.
defaultValue	It returns and modify the default value of an input image.
Disabled	It returns and modify the value of the disabled attribute of an input image.
Form	It returns the reference of the form that contain the input image field in the HTML document.
formAction	It returns and modify the value of the formaction attribute of an input image.
formEnctype	It returns and modify the value of the formenctype attribute of an input image.
formMethod	It returns and modify the value of the formmethod attribute of an input image.
formNoValidate	It returns and modify whether the data of the form should be validated or not on submission.
formTarget	It returns and alter the value of the formtarget attribute of an input image.
Height	It returns and modify the value of the height attribute of an input image.
Name	It returns and alter the value of the name attribute of an input image.
Src	It returns and modify the value of the src attribute of an input image.
Type	It returns the value of the type attribute of an input image.
Value	It returns and modify the content of the value attribute of an input image.
Width	It 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>