HTML | DOM Input Number Object
Last Updated :
25 Aug, 2022
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...