Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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
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 TMLCollection in the same way as we did to access the elements of an array using square brackets in JavaScript. But according to the tutorial title, we will see the implementation of the forms property to find the name of the first form in the document.
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.
Steps
- Step 1 − In the first step, we need to define two or more form tags in the document and then access all of them using the forms property of JavaScript.
- Step 2 − In the next step, we will use the above syntax to get the name of the first form in the document.
- Step 3 − In the third step, we will display the number of forms as well as the name of the first form in the document on the user screen using JavaScript.
Let us understand it practically with the help of a code example −
Example 1
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>
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 form, 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.
Let us see what value the forms property will return if we have two nested forms in the document.
Approach
- Step 1 − In this step, we will define the two forms one inside another such that nested forms and give them particular names.
- Step 2 − In second step, we use the forms property to get the list of forms present in the document as we did in previous example.
- Step 3 − In third step, we will access the name of the first form using the name property and display it on the user screen using JavaScript.
Example 2
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>
In this example, we have seen that forms property consider the nested forms as single form and returns the name of the first form in the document whether it contain nested forms or not.
After reading this tutorial, one can able to find the name of the first form in the document using the forms property of JavaScript. We also learnt about a new data type HTMLCollection that is very much similar to the array data type in JavaScript and also about the reaction of the forms property in case we have nested forms in the document.
966 Views
