HTML DOM Input Button type Property

HTML Web Development Front End Technology

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>