HTML DOM Input Number Object

HTML Web Development Front End Technology

The HTML DOM input number Object represent the <input< element with type=”number”.

Let’s see how to create input number object

Syntax

Following is the syntax −

var numberInput = document.createElement(“INPUT”);
numberInput.setAttribute(“type”,”number”);

Properties

Following are the properties of input number Object −

Property	Explanation
autocomplete	It returns and alter the value of the autocomplete attribute of number input field.
autofocus	It returns and modify whether the input number field should get focused or not when page load.
disabled	It returns and modify whether the input number field is disabled or not.
defaultValue	It returns and alter the default value of the input number field.
form	It returns the reference of the form that contain the input number field in the HTML document.
list	It returns the reference of the datalist that contain the input number field.
max	It returns and modify the value of the max attribute of input number field.
min	It returns and modify the value of the min attribute of input number field.
name	It returns and alter the value of the name attribute of input number field.
readOnly	It returns and modify whether the input number field is read-only or not.
required	It returns and modify whether the number field must be filled out before submitting the form.
step	It returns and alter the value of the set attribute of input number field.
type	It returns the value of the type attribute of number input field.
value	It returns and modify the content of the value attribute of number input field.
placeholder	It returns and modify the value of the placeholder attribute of number input field.

Methods

Following are the methods of input number Object

Method	Explanation
stepUp()	It increments the value of input number field by the value specified in its parameter.
stepDown()	It decrements the value of input number field by the value specified in its parameter.

Example

Let us see an example of input number object −

<!DOCTYPE html>
<html>
<style>

   body{
      text-align:center;
      background-color:#363946;
      color:#fff;
   }
   form{
      margin:2.5rem auto;
   }
   button{
      background-color:#db133a;
      border:none;
      cursor:pointer;
      padding:8px 16px;
      color:#fff;
      border-radius:5px;
      font-size:1.05rem;
      outline:none;
   }
   .show{
      font-weight:bold;
      font-size:1.4rem;
   }
</style>
<body>
<h1>form Property Demo</h1>
<form id="Form 1">
<fieldset>
<legend>Form 1</legend>
<input type="month" class="monthInput">
</fieldset>
</form>
<button onclick="identify()">Identify Month Input Field</button>
<p class="show"></p>
<script>
   function identify() {
      var formId = document.querySelector(".monthInput").form.id;
      document.querySelector(".show").innerHTML = "Hi! I'm from " + formId;
   }
</script>
</body>
</html>