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
How to work with document.forms in JavaScript?
In this tutorial, let us discuss how to work with document.forms in JavaScript.
The document.forms property returns a collection of all form elements in the document. This property is read-only and provides access to form elements, their properties, and methods. It's part of the DOM Level 1 specification.
Syntax
var forms = document.forms;
let formLen = forms.length;
let formId = forms[0].id || forms.item(0).id;
let formItemId = forms[0].elements[0].id;
let formItemVal = forms[0].elements[0].value;
let formData = forms.namedItem("testForm").innerHTML;
The above syntax returns the collection of forms, total number of forms, form ID, form element ID, form element value, and form content respectively.
Properties
length ? Returns the number of form elements in the collection.
Methods
[index] ? Returns the element at the specified position. Index starts from zero. Returns null if index is out of range.
item(index) ? Returns the element at the specified position. Index starts from zero. Returns null if index is out of range.
namedItem(id) ? Returns the element with the specified id or name. Returns null if not found.
Return Value
The forms property returns an HTMLCollection of form objects in source code order.
Example: Accessing Form Properties
In this example, we display the total number of forms, form ID, form element ID, form element value, and form content.
<html>
<body>
<h2>Working with document.forms properties and elements</h2>
<div id="formPropBtnWrap">
<form name="testForm" id="testFormId">
<p>Name: <input type="text" name="name" value="Egan" id="testFormItemId"></p>
<p>Job: <input type="text" name="job" value="Handicapper"></p>
</form>
<p>Click the button to see the properties</p>
<button onclick="getFormProp()">Click Me</button>
</div>
<p id="formPropOut"></p>
<script>
function getFormProp() {
var forms = document.forms;
let formLen = forms.length;
let formId = forms[0].id || forms.item(0).id;
let formItemId = forms[0].elements[0].id;
let formItemVal = forms[0].elements[0].value;
let formData = forms.namedItem("testForm").innerHTML;
var formPropOut = document.getElementById("formPropOut");
var formPropStr = "";
formPropStr += "Total forms = " + formLen + "<br><br>";
formPropStr += "First form id = " + formId + "<br><br>";
formPropStr += "First form first item id = " + formItemId + "<br><br>";
formPropStr += "First form first item value = " + formItemVal + "<br><br>";
formPropStr += "<b>First form data = </b>" + formData + "<br><br>";
formPropOut.innerHTML = formPropStr;
}
</script>
</body>
</html>
Working with Form Methods
Forms provide built-in methods like submit() and reset() to control form behavior programmatically.
Syntax
var forms = document.forms; let formObj = forms.colors; formObj.submit(); formObj.reset();
The above syntax accesses a form by name and demonstrates form submission and reset operations.
Example: Form Submit and Reset
This example shows how to access a form by name and perform submit/reset operations.
<html>
<body>
<h2>Form Methods Demo</h2>
<form name="colors" id="colorForm">
<p>Favorite Color: <input type="text" name="color" value="Blue"></p>
<p>Age: <input type="number" name="age" value="25"></p>
</form>
<button onclick="resetForm()">Reset Form</button>
<button onclick="showFormInfo()">Show Form Info</button>
<p id="output"></p>
<script>
function resetForm() {
var forms = document.forms;
let formObj = forms.colors;
formObj.reset();
document.getElementById("output").innerHTML = "Form has been reset!";
}
function showFormInfo() {
var forms = document.forms;
let formObj = forms.namedItem("colors");
let colorValue = formObj.elements["color"].value;
let ageValue = formObj.elements["age"].value;
document.getElementById("output").innerHTML =
"Color: " + colorValue + ", Age: " + ageValue;
}
</script>
</body>
</html>
Common Use Cases
Accessing multiple forms on a page by index or name
Validating form data before submission
Dynamically manipulating form elements
Implementing custom form submission logic
Key Points
document.formsreturns an HTMLCollection, not an arrayForms can be accessed by index, name, or ID
The collection automatically updates when forms are added/removed
Use
elementsproperty to access form controls
Conclusion
The document.forms property provides a powerful way to access and manipulate forms in JavaScript. Use it to iterate through forms, access form elements, and control form behavior programmatically.
4K+ Views
