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 name property
The HTML DOM Input Range name property is used for setting or returning the name attribute of an input range field. The name attribute helps in identifying the form data after it has been submitted to the server. JavaScript can also use the name attribute to refer to form elements for manipulation later on.
Syntax
Following is the syntax for setting the name property −
rangeObject.name = name
Following is the syntax for getting the name property −
rangeObject.name
Parameters
name − A string specifying the name attribute value for the range slider control.
Return Value
Returns a string representing the current value of the name attribute of the range input field.
Example − Setting Range Name Property
Following example demonstrates how to change the name property of a range input using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Input Range Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Range Name Property</h2>
<form>
<label for="RANGE1">VOLUME:</label>
<input type="range" id="RANGE1" name="VOL" min="0" max="100" value="50">
</form>
<p>Change the name of the above range control by clicking the below button</p>
<button type="button" onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
function changeName() {
document.getElementById("RANGE1").name = "VOLUME";
document.getElementById("Sample").innerHTML = "Range control name is now VOLUME";
}
</script>
</body>
</html>
The output displays a volume slider that changes its name attribute when the button is clicked −
VOLUME: [Range Slider] Change the name of the above range control by clicking the below button [CHANGE NAME] After clicking: Range control name is now VOLUME
Example − Getting Range Name Property
Following example shows how to retrieve the current name property of a range input −
<!DOCTYPE html>
<html>
<head>
<title>Get Range Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Range Name Property</h2>
<form>
<label for="brightnessRange">Brightness:</label>
<input type="range" id="brightnessRange" name="brightness_level" min="0" max="100" value="75">
</form>
<button type="button" onclick="showName()">Show Current Name</button>
<p id="output"></p>
<script>
function showName() {
var rangeName = document.getElementById("brightnessRange").name;
document.getElementById("output").innerHTML = "Current name attribute: " + rangeName;
}
</script>
</body>
</html>
The output shows the current name attribute value when the button is clicked −
Brightness: [Range Slider] [Show Current Name] After clicking: Current name attribute: brightness_level
Example − Dynamic Name Assignment
Following example demonstrates dynamically assigning different names based on user selection −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Range Name Assignment</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Range Name Assignment</h2>
<form>
<label for="controlRange">Control:</label>
<input type="range" id="controlRange" name="default_control" min="0" max="100" value="50">
</form>
<p>Choose control type:</p>
<button onclick="setName('volume_control')">Volume</button>
<button onclick="setName('temperature_control')">Temperature</button>
<button onclick="setName('speed_control')">Speed</button>
<p id="status"></p>
<script>
function setName(newName) {
var range = document.getElementById("controlRange");
range.name = newName;
document.getElementById("status").innerHTML = "Range name set to: " + newName;
}
</script>
</body>
</html>
Users can dynamically change the range control's name based on its intended purpose −
Control: [Range Slider] Choose control type: [Volume] [Temperature] [Speed] After clicking Volume: Range name set to: volume_control
How It Works
The name property provides access to the name attribute of an HTML input range element. When you set rangeObject.name = "newName", it updates the name attribute in the DOM. This is particularly useful for:
- Form submission − The name becomes the key in form data sent to the server
- Dynamic forms − Changing field purposes without recreating elements
- Form validation − Identifying specific fields programmatically
- Data processing − Organizing form data by meaningful names
Key Points
- The name property can be both read and written using JavaScript
- Changing the name property updates the actual HTML name attribute
- The name attribute is essential for form data submission to servers
- Multiple range inputs can share the same name if they represent array data
- The name property returns an empty string if no name attribute is set
Conclusion
The HTML DOM Input Range name property provides dynamic control over the name attribute of range elements. This property is essential for form data management, allowing developers to programmatically set meaningful names for server-side processing and organize form controls effectively.
179 Views
