HTML DOM Input Button Object

HTML Web Development Front End Technology

The HTML DOM Input Button Object serves as an input HTML element with type attribute as “button”.

Let us see how to create an Input Button Object −

syntax

Following is the syntax −

var newButton = document.createElement(“INPUT”);
newButton.setAttribute(“type”,”value”);

Here, value can be “button”, “submit” & “reset”.

properties

Following are the properties of Input Button Object −

Property	Explanation
autofocus	This property returns and alter the value of autofocus attribute of an input button in HTML.
defaultValue	It returns and modify the default value of an input button in HTML.
disabled	It returns and alter the value of disabled attribute of an input button in HTML.
form	It returns the reference of the form which enclose the input button.
name	It returns and alter the value of the name attribute of an input button in HTML.
type	This property returns the type of the input button i.e. whether it is of “button” type, “submit” type or “reset” type.
value	It returns and modify the content of the value attribute of input button.

Example

Let us see an example of DOM Input Button Object −

Live Demo

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Input Button Object</title>
<style>
   body{
      text-align:center;
   }
   .btn{
      display:block;
      margin:1rem auto;
      background-color:#db133a;
      color:#fff;
      border:1px solid #db133a;
      padding:0.5rem;
      border-radius:50px;
      width:60%;
      font-weight:bold;
   }
   .show-msg{
      font-weight:bold;
      font-size:1.4rem;
      color:#ffc107;
   }
</style>
</head>
<body>
<h1>Input Button Object Example</h1>
<input type="button" onclick="createReplica()" class="btn" value="Click to replicate
me">
<div class="show-msg"></div>
<script>
   function createReplica() {
      var newButton = document.createElement("INPUT");
      newButton.setAttribute("type","button");
      newButton.setAttribute("class","btn");
      newButton.setAttribute("value","Click to replicate me");
      newButton.setAttribute("onclick","createReplica()");
      document.body.appendChild(newButton);
   }
</script>
</body>
</html>