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 form Property
The HTML DOM Input Text form property returns a reference to the form element that contains the input text field. If the input text field is not enclosed within a form element, this property returns null. This is a read-only property that provides access to the parent form for validation, submission, or other form-related operations.
Syntax
Following is the syntax for the input text form property −
textObject.form
Return Value
The form property returns −
A Form object reference if the input text field is contained within a form element
null if the input text field is not inside any form element
Example − Getting Form Reference
Following example demonstrates how to get the form reference using the form property −
<!DOCTYPE html>
<html>
<head>
<title>Input Text form Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form id="userForm" name="registrationForm">
<label for="username">Username:</label>
<input type="text" id="username" name="user" value="admin">
<br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="userEmail" value="admin@example.com">
</form>
<br>
<button type="button" onclick="getFormInfo()">Get Form Information</button>
<p id="result"></p>
<script>
function getFormInfo() {
var textInput = document.getElementById("username");
var formRef = textInput.form;
if (formRef) {
document.getElementById("result").innerHTML =
"Form ID: " + formRef.id + "<br>" +
"Form Name: " + formRef.name + "<br>" +
"Form Elements Count: " + formRef.elements.length;
} else {
document.getElementById("result").innerHTML = "No form found!";
}
}
</script>
</body>
</html>
The output shows the form reference information −
Form ID: userForm Form Name: registrationForm Form Elements Count: 2
Example − Input Outside Form
Following example shows what happens when the input text field is not inside a form −
<!DOCTYPE html>
<html>
<head>
<title>Input Text Outside Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<label for="standalone">Standalone Input:</label>
<input type="text" id="standalone" value="No form parent">
<br><br>
<button type="button" onclick="checkForm()">Check Form Property</button>
<p id="output"></p>
<script>
function checkForm() {
var textInput = document.getElementById("standalone");
var formRef = textInput.form;
if (formRef === null) {
document.getElementById("output").innerHTML =
"The input field is NOT inside a form. form property returns: null";
} else {
document.getElementById("output").innerHTML =
"Form found: " + formRef.id;
}
}
</script>
</body>
</html>
The output demonstrates that the form property returns null −
The input field is NOT inside a form. form property returns: null
Example − Form Validation Using form Property
Following example shows how to use the form property for validation purposes −
<!DOCTYPE html>
<html>
<head>
<title>Form Validation Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<form id="contactForm" onsubmit="return validateForm()">
<label for="name">Name:</label>
<input type="text" id="name" name="fullName" required>
<br><br>
<label for="phone">Phone:</label>
<input type="text" id="phone" name="phoneNumber">
<br><br>
<input type="submit" value="Submit Form">
</form>
<p id="message"></p>
<script>
function validateForm() {
var nameInput = document.getElementById("name");
var phoneInput = document.getElementById("phone");
var parentForm = nameInput.form;
// Access all form elements using the form property
var allElements = parentForm.elements;
var isValid = true;
for (var i = 0; i < allElements.length; i++) {
if (allElements[i].type === "text" && allElements[i].value.trim() === "") {
document.getElementById("message").innerHTML =
"Please fill in all required fields!";
isValid = false;
break;
}
}
if (isValid) {
document.getElementById("message").innerHTML =
"Form is valid! Data ready for submission.";
}
return false; // Prevent actual submission for demo
}
</script>
</body>
</html>
This example uses the form property to access all form elements for validation. When submitted with empty fields, it shows a validation message.
Key Points
The form property is read-only and cannot be modified
It returns a Form object reference, not just the form's ID or name
Useful for accessing form properties like
elements,action,method, etc.Always check for null before using the returned form reference
Works with all input types, not just text inputs
Browser Compatibility
The form property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It is part of the standard DOM Level 1 specification and has excellent cross-browser compatibility.
Conclusion
The HTML DOM Input Text form property provides a convenient way to access the parent form element from any input field. It returns a Form object reference if the input is inside a form, or null if the input stands alone. This property is essential for form validation, data manipulation, and accessing other form-related properties and methods.
195 Views
