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>
Output
This will produce the following output −
Click on “Create an input number field” button to create a number input field.