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 Range form property
The HTML DOM Input Range form property returns a reference to the form element that contains the input range slider. If the range slider is not contained within a form, it returns null. This property is read-only and provides a way to access the parent form from a range input element.
Syntax
Following is the syntax for the input range form property −
rangeObject.form
Return Value
The form property returns −
A reference to the form element that contains the input range slider
nullif the range input is not inside a form
Example − Getting Form Reference
Following example demonstrates how to get the form reference from an input range slider −
<!DOCTYPE html>
<html>
<head>
<title>Input Range Form Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Range Form Property Example</h2>
<form id="FORM1" action="/submit" method="post">
<label for="RANGE1">Volume Control:</label>
<input type="range" id="RANGE1" name="VOL" min="0" max="100" value="50">
</form>
<p>Click the button below to get the form ID containing the range slider:</p>
<button type="button" onclick="getFormId()">GET FORM ID</button>
<p id="result"></p>
<script>
function getFormId() {
var rangeElement = document.getElementById("RANGE1");
var formReference = rangeElement.form;
if (formReference) {
document.getElementById("result").innerHTML =
"Form ID: " + formReference.id + "<br>" +
"Form Action: " + formReference.action + "<br>" +
"Form Method: " + formReference.method;
} else {
document.getElementById("result").innerHTML = "Range slider is not inside a form.";
}
}
</script>
</body>
</html>
The output displays the form details when the button is clicked −
Form ID: FORM1 Form Action: /submit Form Method: post
Example − Range Slider Outside Form
Following example shows what happens when the range slider is not contained within a form −
<!DOCTYPE html>
<html>
<head>
<title>Range Outside Form Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Range Slider Outside Form</h2>
<label for="standalone-range">Brightness Control:</label>
<input type="range" id="standalone-range" name="brightness" min="0" max="100" value="75">
<p>Click to check if the range slider has a parent form:</p>
<button type="button" onclick="checkForm()">CHECK FORM</button>
<p id="output"></p>
<script>
function checkForm() {
var rangeElement = document.getElementById("standalone-range");
var formReference = rangeElement.form;
if (formReference === null) {
document.getElementById("output").innerHTML =
"<span style='color: red;'>Result: null - Range slider is not inside a form</span>";
} else {
document.getElementById("output").innerHTML =
"<span style='color: green;'>Form found: " + formReference.id + "</span>";
}
}
</script>
</body>
</html>
Since the range slider is not within a form, the output shows −
Result: null - Range slider is not inside a form
Example − Multiple Range Sliders in Different Forms
Following example demonstrates multiple range sliders in different forms −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Forms Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Multiple Range Sliders in Different Forms</h2>
<form id="audioForm">
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" value="50">
</form>
<form id="videoForm">
<label for="brightness">Brightness:</label>
<input type="range" id="brightness" name="brightness" min="0" max="100" value="80">
</form>
<button type="button" onclick="checkAllForms()">CHECK ALL FORMS</button>
<div id="results"></div>
<script>
function checkAllForms() {
var volumeForm = document.getElementById("volume").form;
var brightnessForm = document.getElementById("brightness").form;
var resultsHTML = "<h3>Form References:</h3>";
resultsHTML += "<p>Volume slider form: " + (volumeForm ? volumeForm.id : "null") + "</p>";
resultsHTML += "<p>Brightness slider form: " + (brightnessForm ? brightnessForm.id : "null") + "</p>";
document.getElementById("results").innerHTML = resultsHTML;
}
</script>
</body>
</html>
The output shows each range slider's parent form −
Form References: Volume slider form: audioForm Brightness slider form: videoForm
Key Points
The form property is read-only and cannot be modified
It returns a form object reference, not just the form's ID
Returns
nullif the range input is not nested inside a form elementUseful for accessing form properties like action, method, and other form elements
Can be used to programmatically submit or reset the parent form
Common Use Cases
Form validation − Access the parent form to validate other form elements
Dynamic form submission − Submit the form when range value changes
Form state management − Check if the range input belongs to a specific form
Event handling − Attach form-level event listeners from range inputs
Conclusion
The HTML DOM Input Range form property provides a convenient way to access the parent form element from a range input. It returns the form reference if the range slider is contained within a form, or null if it's standalone. This property is essential for form manipulation and validation scenarios involving range inputs.
175 Views
