HTML | DOM Input Number Object
The Input Number Object in HTML DOM is used to represent an HTML input element with type= “number”. The input element with type= “number” can be accessed by using getElementById() method.
Syntax:
- It is used to access input number object.
document.getElementById("id");
- It is used to create input element
document.createElement("input");
Input Number Object Properties:
| Property | Description |
|---|---|
| type | This property is used to return which type of form element the number field is. |
| value | This property is used to set or return the value of the value attribute of a number field. |
| autocomplete | This property is used to set or return the value of the autocomplete attribute of a number field. |
| autofocus | This property is used to set or return whether a number field should automatically get focus when the page loads. |
| defaultValue | This property is used to set or return the default value of a number field. |
| disabled | This property is used to set or return whether a number field is disabled or not. |
| form | This property is used to return reference to the form that contains the number field. |
| list | This property is used to return a reference to the datalist that contains the number field. |
| max | This property is used to set or return the value of the max attribute of a number field. |
| min | This property is used to set or return the value of the min attribute of a number field. |
| name | This property is used to set or return the value of the name attribute of a number field. |
| placeholder | This property is used to set or return the value of the placeholder attribute of a number field. |
| readOnly | This property is used to set or return whether the number field is read-only or not. |
| required | This property is used to set or return whether the number field must be filled out before submitting a form. |
| step | This property is used to set or return the value of the step attribute of a number field. |
Input Number Object Methods:
| Method | Description |
|---|---|
| stepDown() | This method is used to decrement the value of the input number by a specified number. |
| stepUp() | This method is used to increment the value of the input number by a specified number. |
| select() | This method is used to select the content of a Input Number field. |
Example-1:
HTML
<!DOCTYPE html><html><body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOM Input Number Object</h2> <input type="number" id="myNumber" value="10"> <p>Click the button to get the number of the number field.</p> <button onclick="myFunction()"> Click Here! </button> <p id="demo"></p> <script> function myFunction() { // Accessining input value var x = document.getElementById("myNumber").value; document.getElementById( "demo").innerHTML = x; } </script></body></html> |
Output:
Before click on the button:
After click on the button:
Example-2:
HTML
<!DOCTYPE html><html><body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>DOM Input Number Object</h2> <p>Click the button to create a Number field.</p> <button onclick="myFunction()">Click Here!</button> <script> function myFunction() { // Creating input element. var x = document.createElement("INPUT"); x.setAttribute("type", "number"); x.setAttribute("value", "5678"); document.body.appendChild(x); } </script></body></html> |
Output:
Before click on the button:
After click on the button:
Supported Browsers:
- Google Chrome
- Mozilla Firefox
- Edge 12 and above
- Safari
- Opera
Please Login to comment...