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 Email form Property
The HTML DOM Input Email form property is a read-only property that returns a reference to the form element that contains the input email field. This property provides access to the parent form element, allowing you to retrieve form attributes and manipulate form behavior through JavaScript.
Syntax
Following is the syntax for accessing the form property −
inputEmailObject.form
This property returns a reference to the HTMLFormElement object that contains the email input field. If the input field is not inside a form, it returns null.
Return Value
The form property returns −
HTMLFormElement − A reference to the form element containing the input email field.
null − If the input email field is not contained within a form element.
Example − Getting Form Reference
Following example demonstrates how to use the form property to access the parent form of an email input field −
<!DOCTYPE html>
<html>
<head>
<title>Input Email form Property</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
}
input {
padding: 8px;
margin: 5px;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="button"] {
background-color: #4CAF50;
color: white;
cursor: pointer;
}
#divDisplay {
margin-top: 15px;
padding: 10px;
color: #333;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form id="employee-form">
<fieldset>
<legend>Employee Information</legend>
<label for="EmailSelect">Employee Email:</label>
<input type="email" id="EmailSelect" value="john.doe@company.com">
<br>
<input type="button" onclick="getFormInfo()" value="Get Form Info">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
function getFormInfo() {
var inputEmail = document.getElementById("EmailSelect");
var divDisplay = document.getElementById("divDisplay");
if (inputEmail.form) {
divDisplay.innerHTML = "Form ID: " + inputEmail.form.id + "<br>" +
"Form Tag: " + inputEmail.form.tagName + "<br>" +
"Email Value: " + inputEmail.value;
} else {
divDisplay.textContent = "This input is not inside a form.";
}
}
</script>
</body>
</html>
The output shows the form information when the button is clicked −
Form ID: employee-form Form Tag: FORM Email Value: john.doe@company.com
Example − Accessing Form Methods
Following example shows how to use the form property to access form methods like submit and reset −
<!DOCTYPE html>
<html>
<head>
<title>Form Methods via Email Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="contact-form" action="#" method="post">
<h3>Contact Form</h3>
<label>Name: <input type="text" name="name" value="Jane Smith"></label><br><br>
<label>Email: <input type="email" id="userEmail" name="email" value="jane@example.com"></label><br><br>
<input type="button" onclick="submitForm()" value="Submit via Email Input">
<input type="button" onclick="resetForm()" value="Reset via Email Input">
<div id="status"></div>
</form>
<script>
function submitForm() {
var emailInput = document.getElementById("userEmail");
var status = document.getElementById("status");
// Access form through email input and submit
status.textContent = "Form submitted through email input's form property!";
// emailInput.form.submit(); // Uncomment to actually submit
}
function resetForm() {
var emailInput = document.getElementById("userEmail");
var status = document.getElementById("status");
// Access form through email input and reset
emailInput.form.reset();
status.textContent = "Form reset through email input's form property!";
}
</script>
</body>
</html>
This example demonstrates how the email input's form property provides access to form methods like submit() and reset().
Example − Email Input Outside Form
Following example shows what happens when an email input is not contained within a form element −
<!DOCTYPE html>
<html>
<head>
<title>Email Input Without Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Email Input Not Inside Form</h3>
<label>Email: <input type="email" id="standaloneEmail" value="test@example.com"></label>
<br><br>
<input type="button" onclick="checkForm()" value="Check Form Property">
<div id="result"></div>
<script>
function checkForm() {
var emailInput = document.getElementById("standaloneEmail");
var result = document.getElementById("result");
if (emailInput.form === null) {
result.textContent = "The email input is not inside a form element. Form property returns null.";
result.style.color = "red";
} else {
result.textContent = "Form found: " + emailInput.form.id;
result.style.color = "green";
}
}
</script>
</body>
</html>
The output shows that the form property returns null when the email input is not inside a form −
The email input is not inside a form element. Form property returns null.
Key Points
The form property is read-only and cannot be modified.
It returns
nullif the email input is not contained within a form element.You can access all form properties and methods through this reference, such as
form.id,form.action,form.method,form.submit(), andform.reset().This property is useful for form validation and manipulation without needing to directly select the form element.
Conclusion
The HTML DOM Input Email form property provides a convenient way to access the parent form element from an email input field. This property returns a reference to the containing form element or null if the input is not inside a form, enabling easy access to form methods and properties for validation and manipulation purposes.
144 Views
