HTML DOM Input Button Object

HTMLWeb DevelopmentFront 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>

Output

This will produce the following output −

Click on “Click to replicate me” button to create a new replica of the same button.

raja
Published on 16-Jul-2019 16:21:29
Advertisements