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 Textarea form Property
The HTML DOM Textarea form property is a read-only property that returns a reference to the form element that contains the textarea. If the textarea is not enclosed within a form, this property returns null.
Syntax
Following is the syntax for the textarea form property −
textareaObject.form
Return Value
The property returns a reference to the form element that contains the textarea, or null if the textarea is not inside a form.
Example − Getting Form Reference
Following example demonstrates how to get the form reference of a textarea element −
<!DOCTYPE html>
<html>
<head>
<title>DOM Textarea form Property</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h1>DOM Textarea form Property Demo</h1>
<form id="myForm">
<fieldset style="margin: 20px auto; width: 300px;">
<legend>Contact Form</legend>
<textarea id="message" rows="5" cols="30" placeholder="Enter your message here..."></textarea>
</fieldset>
</form>
<button onclick="getFormInfo()" style="background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">Get Form Information</button>
<p id="result" style="font-weight: bold; color: #333; margin-top: 20px;"></p>
<script>
function getFormInfo() {
var textarea = document.getElementById("message");
var form = textarea.form;
if (form) {
document.getElementById("result").innerHTML =
"Form ID: " + form.id + "<br>Form Tag Name: " + form.tagName;
} else {
document.getElementById("result").innerHTML = "Textarea is not inside a form.";
}
}
</script>
</body>
</html>
The output shows the form information when the button is clicked −
Form ID: myForm Form Tag Name: FORM
Example − Textarea Outside Form
Following example shows what happens when a textarea is not inside a form −
<!DOCTYPE html>
<html>
<head>
<title>Textarea Outside Form</title>
</head>
<body style="font-family: Arial, sans-serif; text-align: center; padding: 20px;">
<h2>Textarea Without Form</h2>
<textarea id="standalone" rows="4" cols="40" placeholder="This textarea is not in a form"></textarea>
<br><br>
<button onclick="checkForm()" style="background-color: #dc3545; color: white; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">Check Form Property</button>
<p id="output" style="font-weight: bold; color: #666; margin-top: 15px;"></p>
<script>
function checkForm() {
var textarea = document.getElementById("standalone");
var form = textarea.form;
document.getElementById("output").innerHTML =
"Form property value: " + form;
}
</script>
</body>
</html>
The output shows that the form property returns null when textarea is not inside a form −
Form property value: null
Example − Multiple Textareas in Different Forms
Following example demonstrates textareas in multiple forms and how to identify which form each belongs to −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Forms Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Multiple Forms with Textareas</h2>
<form id="loginForm" style="border: 2px solid #007bff; padding: 15px; margin: 10px; border-radius: 5px;">
<h3>Login Form</h3>
<textarea id="loginMessage" rows="3" cols="30" placeholder="Login notes..."></textarea>
</form>
<form id="contactForm" style="border: 2px solid #28a745; padding: 15px; margin: 10px; border-radius: 5px;">
<h3>Contact Form</h3>
<textarea id="contactMessage" rows="3" cols="30" placeholder="Contact message..."></textarea>
</form>
<button onclick="identifyForms()" style="background-color: #6f42c1; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer;">Identify All Forms</button>
<div id="results" style="margin-top: 20px; padding: 10px; background-color: #f8f9fa; border-radius: 5px;"></div>
<script>
function identifyForms() {
var loginTextarea = document.getElementById("loginMessage");
var contactTextarea = document.getElementById("contactMessage");
var results = "<h4>Form Identification Results:</h4>";
results += "<p>Login textarea belongs to form: <strong>" + loginTextarea.form.id + "</strong></p>";
results += "<p>Contact textarea belongs to form: <strong>" + contactTextarea.form.id + "</strong></p>";
document.getElementById("results").innerHTML = results;
}
</script>
</body>
</html>
The output displays which form each textarea belongs to −
Form Identification Results: Login textarea belongs to form: loginForm Contact textarea belongs to form: contactForm
Key Points
-
The
formproperty is read-only and cannot be modified. -
It returns a reference to the HTMLFormElement that contains the textarea.
-
If the textarea is not inside a form element, the property returns
null. -
This property is useful for form validation and manipulation scripts.
-
You can access form properties and methods through this reference, such as
textarea.form.submit()ortextarea.form.reset().
Conclusion
The textarea form property provides a convenient way to access the parent form of a textarea element. This is particularly useful in JavaScript for form validation, submission handling, and accessing other form elements within the same form context.
253 Views
