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 form Property
The HTML DOM input number form property returns a reference to the form element that contains a specific number input field. This property is read-only and provides access to the parent form element, allowing you to manipulate form properties or access other form elements programmatically.
Syntax
Following is the syntax for the input number form property −
numberInputObject.form
Return Value
This property returns a reference to the <form> element that contains the number input field. If the number input is not inside a form, it returns null.
Example − Basic Form Reference
Following example demonstrates how to get the form reference of a number input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Number Form Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Form Property Demo</h2>
<form id="userForm" name="registrationForm">
<label for="age">Age:</label>
<input type="number" id="age" value="25" min="1" max="120">
<br><br>
<label for="score">Score:</label>
<input type="number" id="score" value="85">
</form>
<br>
<button onclick="getFormInfo()">Get Form Information</button>
<p id="result"></p>
<script>
function getFormInfo() {
var ageInput = document.getElementById("age");
var form = ageInput.form;
if (form) {
var info = "Form ID: " + form.id + "<br>";
info += "Form Name: " + form.name + "<br>";
info += "Form Elements Count: " + form.elements.length;
document.getElementById("result").innerHTML = info;
}
}
</script>
</body>
</html>
The output displays the form information when the button is clicked −
Age: [25] Score: [85] [Get Form Information] After clicking: Form ID: userForm Form Name: registrationForm Form Elements Count: 2
Example − Accessing Form Methods
Following example shows how to use the form reference to access form methods like reset and submit −
<!DOCTYPE html>
<html>
<head>
<title>Form Methods via Number Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Order Form</h2>
<form id="orderForm">
<label for="quantity">Quantity:</label>
<input type="number" id="quantity" value="1" min="1">
<br><br>
<label for="price">Price per item:</label>
<input type="number" id="price" value="10.99" step="0.01">
<br><br>
<label for="total">Total:</label>
<input type="number" id="total" readonly>
</form>
<br>
<button onclick="calculateTotal()">Calculate Total</button>
<button onclick="resetForm()">Reset Form</button>
<script>
function calculateTotal() {
var quantityInput = document.getElementById("quantity");
var priceInput = document.getElementById("price");
var totalInput = document.getElementById("total");
var total = quantityInput.value * priceInput.value;
totalInput.value = total.toFixed(2);
}
function resetForm() {
var quantityInput = document.getElementById("quantity");
// Using form property to reset the entire form
quantityInput.form.reset();
}
</script>
</body>
</html>
This example shows how the form property enables access to form methods like reset() through any of its input elements.
Example − Multiple Forms
Following example demonstrates working with multiple forms and identifying which form contains a specific number input −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Forms Example</title>
<style>
form {
border: 2px solid #ccc;
margin: 10px 0;
padding: 15px;
border-radius: 5px;
}
.highlight {
border-color: #007bff;
background-color: #f0f8ff;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Multiple Forms Demo</h2>
<form id="form1" name="personalInfo">
<h3>Personal Information</h3>
<label for="age1">Age:</label>
<input type="number" id="age1" class="numberField" value="30">
</form>
<form id="form2" name="academicInfo">
<h3>Academic Information</h3>
<label for="grade">Grade:</label>
<input type="number" id="grade" class="numberField" value="95">
</form>
<form id="form3" name="financialInfo">
<h3>Financial Information</h3>
<label for="salary">Annual Salary:</label>
<input type="number" id="salary" class="numberField" value="50000">
</form>
<br>
<button onclick="identifyForms()">Identify All Number Input Forms</button>
<p id="formInfo"></p>
<script>
function identifyForms() {
var numberInputs = document.querySelectorAll(".numberField");
var info = "";
// Reset all form styles
document.querySelectorAll("form").forEach(form => {
form.classList.remove("highlight");
});
numberInputs.forEach((input, index) => {
var form = input.form;
if (form) {
form.classList.add("highlight");
info += "Input " + (index + 1) + " belongs to form: " + form.id + " (" + form.name + ")<br>";
}
});
document.getElementById("formInfo").innerHTML = info;
}
</script>
</body>
</html>
When the button is clicked, all forms containing number inputs are highlighted and their information is displayed.
Key Points
-
The
formproperty is read-only and cannot be modified. -
Returns
nullif the input element is not contained within a form. -
Provides access to all form properties and methods through the number input element.
-
Useful for form validation, manipulation, and accessing other form elements.
-
Works with all types of number inputs regardless of their attributes like
min,max, orstep.
Browser Compatibility
The input number form property is supported in all modern browsers that support HTML5 input types. This includes Chrome, Firefox, Safari, Edge, and Internet Explorer 10+.
Conclusion
The HTML DOM input number form property provides a convenient way to access the parent form element from any number input field. This enables developers to manipulate form behavior, access other form elements, and implement dynamic form functionality efficiently.
161 Views
