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 Week form Property
The HTML DOM Input Week form property returns a reference to the form element that contains the week input field. This property is read-only and provides access to the parent form, allowing you to retrieve form properties like ID, action, or method.
Syntax
Following is the syntax for accessing the form property −
inputWeekObject.form
Return Value
The property returns a reference to the HTMLFormElement object that contains the input week element. If the input is not inside a form, it returns null.
Example
Following example demonstrates how to access the form reference using the form property of an input week element −
<!DOCTYPE html>
<html>
<head>
<title>Input Week form Property</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
}
fieldset {
margin: 10px 0;
padding: 15px;
}
input {
padding: 5px;
margin: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="button"] {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
cursor: pointer;
border-radius: 5px;
}
#divDisplay {
margin: 15px 0;
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 4px;
min-height: 20px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif;">
<form id="Mid-Term" action="/submit" method="post">
<fieldset>
<legend>Week Selection Form</legend>
<label for="WeekSelect">Examination Week:</label><br>
<input type="week" id="WeekSelect" value="2019-W36"><br>
<input type="button" onclick="showFormInfo()" value="Show Form Details">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputWeek = document.getElementById("WeekSelect");
function showFormInfo() {
var form = inputWeek.form;
var formInfo = "Form ID: " + form.id + "<br>" +
"Form Action: " + form.action + "<br>" +
"Form Method: " + form.method;
divDisplay.innerHTML = formInfo;
}
</script>
</body>
</html>
The output shows the form details when the button is clicked −
Before click: Week selection form with empty display area
After click: Form ID: Mid-Term
Form Action: /submit
Form Method: post
Practical Usage Example
Following example shows how to use the form property to validate or manipulate form data −
<!DOCTYPE html>
<html>
<head>
<title>Week Input Form Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="scheduleForm" onsubmit="return validateWeek(event)">
<h3>Schedule Form</h3>
<label for="weekInput">Select Week:</label>
<input type="week" id="weekInput" name="selectedWeek" required><br><br>
<label for="taskInput">Task Description:</label>
<input type="text" id="taskInput" name="task" required><br><br>
<button type="submit">Submit Schedule</button>
<button type="button" onclick="checkFormDetails()">Check Form Info</button>
<div id="result" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0;"></div>
</form>
<script>
function checkFormDetails() {
var weekInput = document.getElementById("weekInput");
var form = weekInput.form;
var result = document.getElementById("result");
result.innerHTML = "Parent Form ID: " + form.id + "<br>" +
"Form Elements Count: " + form.elements.length + "<br>" +
"Selected Week Value: " + weekInput.value;
}
function validateWeek(event) {
var weekInput = document.getElementById("weekInput");
var result = document.getElementById("result");
if (!weekInput.value) {
result.innerHTML = "<span style='color: red;'>Please select a week!</span>";
event.preventDefault();
return false;
}
result.innerHTML = "<span style='color: green;'>Form submitted successfully with week: " + weekInput.value + "</span>";
event.preventDefault(); // Prevent actual submission for demo
return false;
}
</script>
</body>
</html>
This example demonstrates using the form property to access the parent form and perform validation or retrieve form information.
Key Points
-
The
formproperty is read-only and returns a reference to the containing form element. -
If the input week element is not inside a form, the property returns
null. -
You can use this property to access other form properties like
id,action,method, andelements. -
The property is useful for form validation, data manipulation, and accessing related form elements.
Conclusion
The HTML DOM Input Week form property provides a convenient way to access the parent form element containing a week input field. This property is essential for form validation, data processing, and dynamic form manipulation in JavaScript applications.
165 Views
