HTML DOM Input Month name Property

HTMLWeb DevelopmentFront End Technology

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

Syntax

Following is the syntax −

1. Returning name

object.name

2. Modifying name

object.name = “text”

Example

Let us see an example of HTML DOM input month name 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.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 name property Example</h1>
<input type="month" class="monthInput" value="2019-02" name="I'm Month input
field!! ">
<p>Hi, Do you want to see my name?</p>
<p>Then click on the button</p>
<button onclick="showName()" class="btn">Show Name</button>
<div class="show"></div>
<script>
   function showName() {
      var monthInput = document.querySelector(".monthInput");
      var showMsg = document.querySelector(".show");
      showMsg.innerHTML=monthInput.name;
   }
</script>
</body>
</html>

Output

This will produce the following output −

Click on “Show Name” button to show the value of name attribute of month input field.

raja
Published on 17-Jul-2019 15:30:48
Advertisements