Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Updated on: 2019-07-30T22:30:26+05:30
189 Views
Advertisements