HTML DOM Input Month value Property

HTML Web Development Front End Technology

The HTML DOM input month value property returns and modify the value of the value attribute of an input month field.

Syntax

Following is the syntax −

Returning value

object.value

2. Modifying value

object.value = true | false

Example

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

Live Demo

<!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.1rem;
   }

   input{
      display:block;
      width:35%;
      border:2px solid #fff;
      background-color:transparent;
      color:#fff;
      font-weight:bold;
      padding:8px;
      margin:1rem auto;
   }

   .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;
color:#db133a;
font-weight:bold;
}
</style>
</head>
<body>
<h1>DOM Input month value property Demo</h1>
<p>Hi, Select any month for your holiday</p>
<input type="month" class="monthInput">
<button type="button" onclick="getValue()" class="btn">Click me to show
value</button>
<div class="show"></div>
<script>
function getValue() {
var monthInput = document.querySelector(".monthInput");
      document.querySelector(".show").innerHTML = "         "+ "Value = " +
         monthInput.value + "";}
</script>
</body>
</html>

Output

This will produce the following output −

Select any month and then click on “Click me to show value” button to display selected value.

Karthikeya Boyini

Published on 18-Jul-2019 08:45:19

Previous Page Print Page