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 find the name of the first form in a document with JavaScript?
In this tutorial, we will learn how to find the name of the first form in an HTML document. Sometimes, we use more than one form tags in the HTML document for different purposes. At that time, we can face difficulties in finding the specific <form> element to add some more properties to it. In such conditions, we can use the forms property of the "document" interface to access all the <form> elements present in the document individually as well as collectively.
Document.forms Property
As we discussed above, the forms property is used to access all the forms present in the document. The forms property returns the HTMLCollection, a datatype similar to arrays in JavaScript, that contains the collection of all the <form> elements present in the HTML document, and allow us to collectively access all the forms. We can access the forms present inside this HTMLCollection in the same way as we did to access the elements of an array using square brackets in JavaScript.
Syntax
The following syntax will show how we can use the forms property to access the name of the first form of the document using JavaScript.
let formName = document.forms[0].name;
In the above syntax, we used square brackets syntax to access the first element of the collection and then used the name property to get its name.
Example 1: Finding First Form Name
The example below will illustrate the practical implementation of the forms property to find the name of the first form in the document using JavaScript:
<!DOCTYPE html>
<html>
<body>
<h3>Find the name of the first form in a document</h3>
<form name="formOne">
<label>Input from the first form named formOne:</label><br>
<input type="text" placeholder="formOne"><br>
</form>
<form name="formTwo">
<label>Input from the second form named formTwo:</label><br>
<input type="text" placeholder="formTwo">
</form>
<p id="result"></p>
<script>
let formElem = document.forms;
let firstForm = formElem[0].name;
document.getElementById("result").innerHTML = "The number of forms in the document: " + formElem.length + "<br>" +
"The name of first form in the document: " + firstForm;
</script>
</body>
</html>
The number of forms in the document: 2 The name of first form in the document: formOne
In the example above, we have used two forms named as formOne and formTwo in the document. We access a list of all forms present in the document inside formElem, that will be of type HTMLCollection. After that, we access the first element of the list using square brackets syntax to get the first form in the document and use the name property to get the name of the form inside firstForm.
Example 2: Handling Nested Forms
Let us see what value the forms property will return if we have two nested forms in the document. Below example will show how the forms property will react in case of nested forms:
<html>
<body>
<h3>Find the name of the first form in a document</h3>
<form name="parent">
<form name="child">
<label>Input from the form nested inside another form named
parent:</label><br>
<input type="text" placeholder="Child Form">
</form>
</form>
<p id="result"></p>
<script>
let form = document.forms;
let firstForm = form[0].name;
document.getElementById("result").innerHTML = "The number of forms in the document: " + form.length + "<br>" +
"The name of first form in the document: " + firstForm;
</script>
</body>
</html>
The number of forms in the document: 2 The name of first form in the document: parent
In this example, we have seen that forms property considers nested forms as separate forms and returns the name of the first form in the document. Both the parent and child forms are counted individually in the HTMLCollection.
Key Points
- document.forms returns an HTMLCollection of all forms in the document
- Use document.forms[0].name to get the name of the first form
- HTMLCollection is similar to arrays and supports index-based access
- Nested forms are treated as separate elements in the collection
Conclusion
The document.forms property provides an easy way to access form elements in a document. Use document.forms[0].name to reliably get the name of the first form, whether dealing with simple or nested form structures.
1K+ Views
