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 Search form Property
The HTML DOM Input Search form property returns a reference to the form element that contains the input search field. If the search field is not inside any form, it returns null. This property is read-only and helps identify the parent form of a search input for validation or manipulation purposes.
Syntax
Following is the syntax for the input search form property −
searchObject.form
Return Value
The form property returns −
A form object reference if the input search field is inside a form element
null if the input search field is not contained within any form
Example − Getting Form Reference
Following example demonstrates how to get the form reference containing the search input −
<!DOCTYPE html>
<html>
<head>
<title>Input Search Form Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Search Form Property</h2>
<form id="FORM_1">
FRUITS: <input type="search" id="SEARCH1" name="fruits" placeholder="Search fruits...">
</form>
<p>Get the form id by clicking on the below button</p>
<button type="button" onclick="formId()">GET FORM</button>
<p id="Sample" style="color: blue; font-weight: bold;"></p>
<script>
function formId() {
var searchField = document.getElementById("SEARCH1");
var formReference = searchField.form;
if (formReference) {
document.getElementById("Sample").innerHTML = "The id of the form containing the search field is: " + formReference.id;
} else {
document.getElementById("Sample").innerHTML = "Search field is not inside any form.";
}
}
</script>
</body>
</html>
The output displays a search input field inside a form. When you click "GET FORM", it shows the form's ID −
Input Search Form Property FRUITS: [Search fruits... ] Get the form id by clicking on the below button [GET FORM] The id of the form containing the search field is: FORM_1
Example − Search Field Outside Form
Following example shows what happens when a search field is not inside any form −
<!DOCTYPE html>
<html>
<head>
<title>Search Field Outside Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Search Field Outside Form</h2>
<p>PRODUCTS: <input type="search" id="SEARCH2" name="products" placeholder="Search products..."></p>
<button type="button" onclick="checkForm()">CHECK FORM</button>
<p id="Result" style="color: red; font-weight: bold;"></p>
<script>
function checkForm() {
var searchField = document.getElementById("SEARCH2");
var formReference = searchField.form;
if (formReference) {
document.getElementById("Result").innerHTML = "Form ID: " + formReference.id;
} else {
document.getElementById("Result").innerHTML = "Search field is not inside any form (returns null).";
}
}
</script>
</body>
</html>
Since the search input is not inside a form, clicking "CHECK FORM" shows that the form property returns null −
Search Field Outside Form PRODUCTS: [Search products... ] [CHECK FORM] Search field is not inside any form (returns null).
Example − Accessing Form Properties
Once you have the form reference, you can access various form properties and methods −
<!DOCTYPE html>
<html>
<head>
<title>Accessing Form Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Accessing Form Properties</h2>
<form id="userForm" action="/search.php" method="get">
<label>Search: <input type="search" id="userSearch" name="query"></label><br><br>
<input type="submit" value="Search">
</form>
<button type="button" onclick="getFormInfo()">GET FORM INFO</button>
<div id="info" style="margin-top: 15px; padding: 10px; background: #f0f0f0;"></div>
<script>
function getFormInfo() {
var searchField = document.getElementById("userSearch");
var form = searchField.form;
if (form) {
var info = "<strong>Form Details:</strong><br>";
info += "ID: " + form.id + "<br>";
info += "Action: " + form.action + "<br>";
info += "Method: " + form.method + "<br>";
info += "Elements count: " + form.elements.length;
document.getElementById("info").innerHTML = info;
}
}
</script>
</body>
</html>
This example shows how to use the form reference to access multiple form properties −
Accessing Form Properties Search: [____________] [Search] [GET FORM INFO] Form Details: ID: userForm Action: /search.php Method: get Elements count: 2
How It Works
The form property works by traversing up the DOM tree from the input search element to find its containing form element. Here's the process −
DOM Traversal − The browser searches upward through parent elements to locate a
<form>tagForm Found − If a form element is found, it returns a reference to that form object
No Form − If no form element contains the search input, the property returns
nullRead-Only − The form property cannot be modified; it only retrieves the existing form reference
Common Use Cases
The form property is commonly used for −
Form Validation − Accessing the parent form to validate multiple fields before submission
Dynamic Form Handling − Manipulating form properties like action, method, or target
Event Handling − Adding event listeners to the entire form based on search field interactions
Form Serialization − Collecting all form data when the search field triggers an action
Conclusion
The HTML DOM Input Search form property provides a convenient way to access the parent form of a search input field. It returns a form object reference if the search field is contained within a form, or null if it's standalone. This read-only property is essential for form validation, dynamic form manipulation, and accessing other form-related properties and methods.
194 Views
