HTML DOM Input Number min Property

HTML Web Development Front End Technology

The DOM input number min property returns and modify the value of the min attribute of the input field of type=”number” in an HTML document.

Syntax

Following is the syntax −

Returning min

object.min

2. Modifying min

object.min = “number”

Example

Let us see an example of HTML DOM input number min 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;
      font-weight:bold;
   }
</style>
</head>
<body>
<h1>DOM Input number max/min property Demo</h1>
<p>Enter your roll number (between 1 and 60)</p>
<input type="number" class="numberInput" min="1" max="60">
<button type="button" onclick="showMySelection()" class="btn">Show Roll Number</button>
<div class="show"></div>
<script>
   function showMySelection() {
      var numberInput = document.querySelector(".numberInput");
      var showMsg = document.querySelector(".show");
      console.log(numberInput.min,numberInput.max);
      if(numberInput.value === ''){
         showMsg.innerHTML="Please enter value!!";
      }else{
         if((numberInput.value <= 1) && (numberInput.value <= 60)){
            showMsg.innerHTML = numberInput.value;
         }else{
            showMsg.innerHTML = "Please enter correct roll number!!";
         }
      }
   }
</script>
</body>
</html>