Thanks to visit codestin.com
Credit goes to www.tutorialspoint.com

HTML DOM Input Month Name Property



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.

Updated on: 2019-07-30T22:30:26+05:30

112 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements