Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Number type Property
The HTML DOM Input Number type property is used to retrieve the type attribute value of an input element with type="number". This property is read-only and always returns the string "number" for number input elements.
Syntax
Following is the syntax to get the type property of a number input element −
numberObject.type
Return Value
The type property returns a string representing the type attribute value. For input elements with type="number", it always returns "number".
Example − Getting Input Number Type
Following example demonstrates how to retrieve the type property of an input number element −
<!DOCTYPE html>
<html>
<head>
<title>Input Number Type Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Number Type Property</h2>
<label for="phoneNumber">Phone Number:</label>
<input type="number" id="phoneNumber" placeholder="Enter phone number">
<br><br>
<button onclick="getType()">Get Input Type</button>
<p id="result"></p>
<script>
function getType() {
var inputElement = document.getElementById("phoneNumber");
var inputType = inputElement.type;
document.getElementById("result").innerHTML = "The type for the input field is: " + inputType;
}
</script>
</body>
</html>
The output displays the input field and button. Clicking the button shows the type property value −
Phone Number: [Number input field] [Get Input Type] After clicking: The type for the input field is: number
Example − Comparing Different Input Types
Following example compares the type property of different input elements −
<!DOCTYPE html>
<html>
<head>
<title>Compare Input Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Compare Input Types</h2>
<label for="textInput">Text Input:</label>
<input type="text" id="textInput" placeholder="Text input">
<button onclick="showType('textInput', 'textResult')">Get Type</button>
<span id="textResult"></span>
<br><br>
<label for="numberInput">Number Input:</label>
<input type="number" id="numberInput" placeholder="Number input">
<button onclick="showType('numberInput', 'numberResult')">Get Type</button>
<span id="numberResult"></span>
<br><br>
<label for="emailInput">Email Input:</label>
<input type="email" id="emailInput" placeholder="Email input">
<button onclick="showType('emailInput', 'emailResult')">Get Type</button>
<span id="emailResult"></span>
<script>
function showType(inputId, resultId) {
var element = document.getElementById(inputId);
var type = element.type;
document.getElementById(resultId).innerHTML = " ? Type: " + type;
}
</script>
</body>
</html>
Each input element returns its respective type when the button is clicked −
Text Input: [text field] [Get Type] ? Type: text Number Input: [number field] [Get Type] ? Type: number Email Input: [email field] [Get Type] ? Type: email
Example − Validating Input Type
Following example shows how to use the type property for validation purposes −
<!DOCTYPE html>
<html>
<head>
<title>Input Type Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Type Validation</h2>
<label for="ageInput">Age:</label>
<input type="number" id="ageInput" min="1" max="120">
<br><br>
<button onclick="validateInput()">Validate Input</button>
<p id="validation"></p>
<script>
function validateInput() {
var ageInput = document.getElementById("ageInput");
var message = "";
if (ageInput.type === "number") {
message = "? Input type is correct: " + ageInput.type;
if (ageInput.value) {
message += "<br>Value entered: " + ageInput.value;
}
} else {
message = "? Expected number input, but got: " + ageInput.type;
}
document.getElementById("validation").innerHTML = message;
}
</script>
</body>
</html>
The validation function checks if the input type is "number" and displays the result −
Age: [25] [Validate Input] ? Input type is correct: number Value entered: 25
Key Points
Here are important points about the Input Number type property −
-
The type property is read-only − you cannot change the input type using this property.
-
For input elements with
type="number", the type property always returns the string"number". -
This property is useful for dynamic validation and form processing where you need to confirm input types.
-
The type property reflects the HTML type attribute, not the actual data type of the value.
Browser Compatibility
The type property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been part of the DOM specification since HTML5 introduced input type="number".
Conclusion
The HTML DOM Input Number type property provides a simple way to retrieve the type attribute value of number input elements. It always returns "number" for input elements with type="number" and is particularly useful for form validation and dynamic input handling in JavaScript applications.
300 Views
