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 Text name Property
The HTML DOM Input Text name property is used for setting or returning the name attribute of an input text field. The name attribute helps in identifying form data after it has been submitted to the server and is essential for form processing.
Syntax
Following is the syntax for setting the name property −
textObject.name = "name"
Following is the syntax for getting the name property −
var name = textObject.name
Here, textObject is a reference to the input text element, and name is a string specifying the name attribute value.
Setting the Name Property
The name property can be dynamically changed using JavaScript. This is useful when you need to modify form field names based on user interactions or application logic.
Example
Following example demonstrates setting the name property of a text input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Text name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Text name Property</h2>
<label for="USR">USERNAME:</label>
<input type="text" id="USR" name="user_name" style="margin: 10px; padding: 5px;">
<br><br>
<p>Change the name of the text field by clicking the below button</p>
<button onclick="changeName()" style="padding: 10px; margin: 5px;">CHANGE NAME</button>
<button onclick="showName()" style="padding: 10px; margin: 5px;">SHOW CURRENT NAME</button>
<p id="Sample" style="color: blue; font-weight: bold;"></p>
<script>
function changeName() {
document.getElementById("USR").name = "NEW_USER";
document.getElementById("Sample").innerHTML = "Text field name is now changed to: NEW_USER";
}
function showName() {
var currentName = document.getElementById("USR").name;
document.getElementById("Sample").innerHTML = "Current name attribute: " + currentName;
}
</script>
</body>
</html>
The output shows the text input field with buttons to change and display its name property −
Input Text name Property USERNAME: [text input field] Change the name of the text field by clicking the below button [CHANGE NAME] [SHOW CURRENT NAME] (Initially shows "Current name attribute: user_name") (After clicking CHANGE NAME: "Text field name is now changed to: NEW_USER")
Getting the Name Property
You can retrieve the current name attribute value using the name property. This is helpful for form validation and dynamic form processing.
Example
Following example demonstrates getting the name property and using it in form submission −
<!DOCTYPE html>
<html>
<head>
<title>Getting Input Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Form Field Name Properties</h2>
<form id="myForm">
<label>First Name: <input type="text" id="fname" name="firstName" value="John"></label><br><br>
<label>Last Name: <input type="text" id="lname" name="lastName" value="Doe"></label><br><br>
<label>Email: <input type="email" id="email" name="userEmail" value="john@example.com"></label><br><br>
</form>
<button onclick="displayNames()" style="padding: 10px; margin: 5px;">Show All Names</button>
<div id="result" style="margin-top: 20px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
function displayNames() {
var fname = document.getElementById("fname").name;
var lname = document.getElementById("lname").name;
var email = document.getElementById("email").name;
var result = "<h3>Form Field Names:</h3>";
result += "<p>First Name field: " + fname + "</p>";
result += "<p>Last Name field: " + lname + "</p>";
result += "<p>Email field: " + email + "</p>";
document.getElementById("result").innerHTML = result;
}
</script>
</body>
</html>
The output displays a form with multiple input fields and shows their name properties −
Form Field Name Properties First Name: John Last Name: Doe Email: john@example.com [Show All Names] Form Field Names: First Name field: firstName Last Name field: lastName Email field: userEmail
Practical Use Cases
The name property is commonly used in the following scenarios −
Dynamic Forms − Changing field names based on user selections or form states.
Form Validation − Checking field names before processing form data.
Server Communication − Ensuring correct field names are sent to the server.
Form Cloning − Creating duplicate form sections with unique field names.
Example − Dynamic Form Field Names
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Field Names</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Dynamic Field Name Assignment</h2>
<p>Select field type to change the name dynamically:</p>
<select id="fieldType" onchange="updateFieldName()" style="padding: 5px; margin: 10px;">
<option value="personal">Personal Info</option>
<option value="business">Business Info</option>
<option value="contact">Contact Info</option>
</select>
<br><br>
<input type="text" id="dynamicField" name="personal_data" placeholder="Enter information" style="padding: 8px; margin: 5px;">
<br><br>
<button onclick="showCurrentName()" style="padding: 8px;">Show Current Name</button>
<p id="nameDisplay" style="color: green; font-weight: bold;"></p>
<script>
function updateFieldName() {
var fieldType = document.getElementById("fieldType").value;
var field = document.getElementById("dynamicField");
switch(fieldType) {
case "personal":
field.name = "personal_data";
field.placeholder = "Enter personal information";
break;
case "business":
field.name = "business_data";
field.placeholder = "Enter business information";
break;
case "contact":
field.name = "contact_data";
field.placeholder = "Enter contact information";
break;
}
showCurrentName();
}
function showCurrentName() {
var currentName = document.getElementById("dynamicField").name;
document.getElementById("nameDisplay").innerHTML = "Current field name: " + currentName;
}
</script>
</body>
</html>
This example shows how the name property changes dynamically based on the selected option, making the form adaptable to different data types.
Conclusion
The HTML DOM Input Text name property provides essential functionality for managing form field identification. It allows both setting and getting the name attribute dynamically, making it valuable for creating interactive and flexible web forms that can adapt to user needs and application requirements.
214 Views
