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 Password name Property
The HTML DOM Input Password name property is used for setting or returning the name attribute of an input password 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 reference form elements for manipulation.
Syntax
Following is the syntax for setting the name property −
passwordObject.name = name
Following is the syntax for getting the name property −
var name = passwordObject.name
Parameters
The name parameter is a string that specifies the name of the password field. This name is used when the form is submitted to identify the field's value on the server side.
Return Value
When retrieving the name property, it returns a string representing the current value of the name attribute of the password input field.
Example − Changing Password Field Name
Following example demonstrates how to change the name attribute of a password field dynamically using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Input Password name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Password name Property</h2>
<form>
<label for="PASS">Password: </label>
<input type="password" id="PASS" name="passW">
</form>
<p>Change the name of the password field by clicking the button below:</p>
<button onclick="changeName()">CHANGE NAME</button>
<p id="Sample"></p>
<script>
function changeName() {
var passwordField = document.getElementById("PASS");
passwordField.name = "NEW_PASS";
document.getElementById("Sample").innerHTML = "Password field name changed from 'passW' to '" + passwordField.name + "'";
}
</script>
</body>
</html>
The output shows the password field with its name attribute changed dynamically −
Input Password name Property Password: [password field] Change the name of the password field by clicking the button below: [CHANGE NAME] (After clicking: Password field name changed from 'passW' to 'NEW_PASS')
Example − Getting Password Field Name
Following example shows how to retrieve the current name attribute value of a password field −
<!DOCTYPE html>
<html>
<head>
<title>Get Password Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Password Field Name</h2>
<form>
<label for="userPass">Enter Password: </label>
<input type="password" id="userPass" name="user_password">
</form>
<button onclick="getName()">GET NAME</button>
<button onclick="setNewName()">SET NEW NAME</button>
<p id="display"></p>
<script>
function getName() {
var passwordField = document.getElementById("userPass");
var currentName = passwordField.name;
document.getElementById("display").innerHTML = "Current name attribute: " + currentName;
}
function setNewName() {
var passwordField = document.getElementById("userPass");
passwordField.name = "modified_password";
document.getElementById("display").innerHTML = "Name changed to: " + passwordField.name;
}
</script>
</body>
</html>
The output demonstrates both getting and setting the name property −
Get Password Field Name Enter Password: [password field] [GET NAME] [SET NEW NAME] (GET NAME shows: Current name attribute: user_password) (SET NEW NAME shows: Name changed to: modified_password)
Example − Form Submission with Name Attribute
Following example shows how the name attribute is used during form submission −
<!DOCTYPE html>
<html>
<head>
<title>Password Name in Form Submission</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Password Name in Form Data</h2>
<form onsubmit="return showFormData(event)">
<label for="username">Username: </label>
<input type="text" id="username" name="user_name" value="john_doe"><br><br>
<label for="password">Password: </label>
<input type="password" id="password" name="user_password" value="secret123"><br><br>
<button type="submit">SUBMIT</button>
</form>
<p id="formData"></p>
<script>
function showFormData(event) {
event.preventDefault(); // Prevent actual form submission
var passwordField = document.getElementById("password");
var usernameField = document.getElementById("username");
var formDataText = "Form data would be sent as:
";
formDataText += usernameField.name + "=" + usernameField.value + "
";
formDataText += passwordField.name + "=" + "*".repeat(passwordField.value.length);
document.getElementById("formData").innerHTML = "<pre>" + formDataText + "</pre>";
return false;
}
</script>
</body>
</html>
This example shows how the name attribute identifies form fields during submission −
Password Name in Form Data Username: john_doe Password: [hidden password field] [SUBMIT] (After submit: Form data would be sent as: user_name=john_doe user_password=*********)
Key Points
The name property of password input fields has several important characteristics −
The
nameattribute is essential for form submission and server-side processingMultiple password fields can have the same name, but it's generally not recommended
The name property can be changed dynamically using JavaScript
Unlike the
idattribute, the name attribute is specifically used for form data identificationThe name property returns a string value representing the current name attribute
Conclusion
The HTML DOM Input Password name property provides a way to set or retrieve the name attribute of password fields dynamically. This property is crucial for form processing and allows JavaScript to modify field names programmatically for enhanced form functionality and server-side data handling.
182 Views
