HTML DOM Input Number Object


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.

raja
Published on 18-Jul-2019 09:17:32
Advertisements