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.

Example-1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Before click on the button:

After click on the button:

Example-2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Before click on the button:

After click on the button:

Note: <input> elements with type=”number” are supported in Internet Explorer 9+ version.

Supported Browsers:

  • Google Chrome
  • Mozilla Firefox
  • Edge
  • Safari
  • Opera


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.