Computer >> Computer tutorials >  >> Programming >> HTML

HTML DOM Input Month defaultValue Property


The HTML DOM input month defaultValue property returns and modify the default value of input field of type=”month” in a HTML document.

Syntax

Following is the syntax −

1. Returning default value

object.defaultValue

2. Modifying default value

object.defaultValue=value

Here, value is any date in form of string for example “2019-03”

Example

Let us see an example of HTML DOM input month defaultValue property −

<!DOCTYPE html>
<html>
<head>
<style>
   html{
      height:100%;
   }
   body{
      text-align:center;
      color:#fff;
      background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%)
      center/cover no-repeat;
      height:100%;
   }
   p{
      font-weight:700;
      font-size:1.2rem;
   }
   input{
      width:35%;
      border:2px solid #fff;
      background-color:transparent;
      color:#fff;
      font-weight:bold;
      padding:8px;
   }
   .btn{
      background:#0197F6;
      border:none;
      height:2rem;
      border-radius:2px;
      width:35%;
      margin:2rem auto;
      display:block;
      color:#fff;
      outline:none;
      cursor:pointer;
   }
   .show{
      font-size:1.5rem;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM Input month defaultValue Example</h1>
<p>Hi, Enter your month of birth</p>
<input type="month" class="monthInput">
<button onclick="changeValue()" class="btn">Submit</button>
<div class="show"></div>
<script>
   function changeValue() {
      var monthInput = document.querySelector(".monthInput");
      var showMsg = document.querySelector(".show");
      monthInput.defaultValue = "1997-10";
      monthInput.value= monthInput.defaultValue;
      showMsg.innerHTML =":D hehe I changed your month of birth into mine!";
   }
</script>
</body>
</html>

Output

This will produce the following result −

HTML DOM Input Month defaultValue Property

Now enter your month of birth and then click on “Submit” button.

HTML DOM Input Month defaultValue Property


HTML DOM Input Month defaultValue Property

Here you can observe that your selected month gets replaced by my default month “October- 1997”.