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 form Property
The HTML DOM Input Password form property is used for returning the form reference that contains the input password field. If the input password field is outside the form then it will simply return null. This property is read-only.
Syntax
Following is the syntax for input password form property −
passwordObject.form
Return Value
The form property returns one of the following values −
-
Form object − A reference to the form element that contains the password input field.
-
null − If the password input field is not contained within any form element.
Example − Getting Form Reference
Let us look at an example for the Input Password form property −
<!DOCTYPE html>
<html>
<head>
<title>Input Password form Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Password form Property</h2>
<form id="NEW_FORM">
<label for="PASS">Password:</label>
<input type="password" id="PASS">
</form>
<p>Get the form id by clicking on the below button</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample"></p>
<script>
function formId() {
var P = document.getElementById("PASS").form.id;
document.getElementById("Sample").innerHTML = "The id of the form containing the password field is: " + P;
}
</script>
</body>
</html>
The output displays a form with a password field and a button. Clicking the button shows the form's id −
Input Password form Property Password: [????????] (password input field) Get the form id by clicking on the below button [GET FORM] (After clicking): The id of the form containing the password field is: NEW_FORM
Example − Password Field Outside Form
Following example demonstrates what happens when the password field is not contained within a form −
<!DOCTYPE html>
<html>
<head>
<title>Password Field Outside Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Password Field Outside Form</h2>
<label for="standalone">Standalone Password:</label>
<input type="password" id="standalone">
<br><br>
<button type="button" onclick="checkForm()">Check Form Reference</button>
<p id="result"></p>
<script>
function checkForm() {
var formRef = document.getElementById("standalone").form;
if (formRef === null) {
document.getElementById("result").innerHTML = "The password field is not contained within any form. Form reference is: null";
} else {
document.getElementById("result").innerHTML = "Form reference: " + formRef;
}
}
</script>
</body>
</html>
Since the password field is not inside any form element, the form property returns null −
Password Field Outside Form Standalone Password: [????????] [Check Form Reference] The password field is not contained within any form. Form reference is: null
Example − Multiple Forms
Following example shows how to identify which form contains a specific password field when multiple forms exist −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Forms Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Multiple Forms Example</h2>
<form id="loginForm">
<h3>Login Form</h3>
<label>Username: <input type="text"></label><br>
<label>Password: <input type="password" id="loginPass"></label>
</form>
<br>
<form id="registerForm">
<h3>Register Form</h3>
<label>Email: <input type="email"></label><br>
<label>Password: <input type="password" id="registerPass"></label>
</form>
<br>
<button onclick="checkBothForms()">Check Both Password Fields</button>
<p id="output"></p>
<script>
function checkBothForms() {
var login = document.getElementById("loginPass").form.id;
var register = document.getElementById("registerPass").form.id;
document.getElementById("output").innerHTML =
"Login password belongs to form: " + login + "<br>" +
"Register password belongs to form: " + register;
}
</script>
</body>
</html>
Each password field correctly identifies its parent form −
Multiple Forms Example Login Form Username: [text field] Password: [????????] Register Form Email: [email field] Password: [????????] [Check Both Password Fields] Login password belongs to form: loginForm Register password belongs to form: registerForm
How It Works
The form property works by traversing up the DOM tree from the input password element to find the nearest parent <form> element. Here's the process −
-
The browser checks if the password input is a direct or indirect child of a form element.
-
If a form is found, it returns a reference to that form object.
-
If no form is found in the ancestry, it returns
null. -
The returned form object provides access to all form properties and methods like
id,name,action,method, etc.
Common Use Cases
The form property is commonly used in the following scenarios −
-
Form validation − Accessing form properties like action URL or method before submitting.
-
Dynamic form handling − Identifying which form contains a specific password field in complex pages.
-
Event handling − Performing actions on the parent form when password field events occur.
-
Security checks − Ensuring password fields belong to the expected forms before processing.
Conclusion
The HTML DOM Input Password form property is a read-only property that returns a reference to the form containing the password input field, or null if the field is not within a form. This property is essential for form validation, dynamic form handling, and ensuring proper parent-child relationships in complex web applications.
226 Views
