HTML DOM Input Button type Property


The HTML DOM input button type property returns the type of the input button i.e. whether it is of “button”, “submit” or “reset” type.

Syntax

Following is the syntax −

object.type

Example

Let us see an example of input button type property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM type Property</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:40%;
   }
   .show-type{
      font-weight:bold;
      font-size:1.4rem;
      color:#ffc107;
   }
</style>
</head>
<body>
<h1>type Property Example</h1>
<input type = "submit" onclick = "getType()" class = "btn" value = "Click me to know about my type">
<div class="show-type"></div>
<script>
   function getType() {
      var btnType = document.querySelector(".btn").type;
      document.querySelector(".show-type").innerHTML = btnType;
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Click me to know about my type” button to display the type of the input button.

raja
Published on 16-Jul-2019 15:56:41
Advertisements