How to create form dynamically with the JavaScript


Overview

To create a HTML form fully dynamic can be created using some of the Document Object Model (DOM) methods such as createElement(), setAttribute(), appendChild(). These DOM methods will help us to build a dynamic HTML form. Our approach to building this dynamic form will be by creating all the elements in the script tag , setting the attribute to add some functionality and at last when our element is ready to serve we will append it in the parent of the element. So all the elements appended inside the parent form tag are the children elements.

Syntax

The syntax used in this task −

  • The createElement() method is used to create any element of HTML. Example: div, button, p, label etc.

document.createElement(elements);
  • The setAttribute() method is used to insert the attribute in an element. The value inside the setAttribute() method is passed as a key value pair. Example: (“placeholder”,”Name”), (“type”,”submit”), (“value”,“submit”) etc.

element.setAttribute(“Key”,“Value”);
  • The appendChild() method inserts the element which we had created using the createElement() to any of the body tags. The element reference of the direct element is passed to the appendChild() as argument.

parentElement.appendChild(element);

Algorithm

Step 1  Create a simple HTML boilerplate code on your editor. Also create a button and a form tag inside which our dynamic form will be loaded.

Step 2  Create a javascript arrow function inside the script tag.

Step 3  Now get the form in a variable, using document.getElementById() as the form tag is defined by the id name.

Step 4  From here start building your dynamic form. Use a createElement() method of document to create a new element.

var userName = document.createElement("input");

Step 5  Now set the attribute in the above created element using setAttribute() method.

userName.setAttribute("placeholder", "Name");

Step 6  Use the appendChild() method to append the above created element in the parent element that is “form” as id name “dform” .

dform.appendChild(userName);

Step 7  Repeat the steps from Step 4 – Step 6 and create all the required fields of the form.

Step 8 − Create another element div using createElement(), also create two buttons submit and reset respectively and append these two buttons in it.

Step 9 Click on the “Generate Form” button which will trigger the “gForm()” function and will generate the form dynamically.

Example

In the given example, we had built a form using Javascript. So none of the elements inside the form tag is built as static as using the elements inside the body tag. The form contains certain fields for the registration of the students. These fields are name, email, address, dob, phone number so all these are rendered dynamically from script tag.

<html>
<head>
   <title>Create form dynamically with js</title>
</head>
   <body style="height: 90vh; width: 50%;display:flex;flex-direction: column;place-content: center; margin: auto;">
   <p style="margin: 0 auto;">*Student registration form</p>
   <button style="margin: 0.5rem auto;width: 10rem;" onclick="gForm()"> Generate Form </button>
   <form id="dynamicForm"> </form>
   <script>
      gForm = () => {
         var dform = document.getElementById("dynamicForm");
         dform.setAttribute("style", "display:flex;flex-direction:column")
         
         // dform.innerHTML=""
         var userName = document.createElement("input");
         userName.setAttribute("placeholder", "Name");
         dform.appendChild(userName);
         var userEmail = document.createElement("input");
         userEmail.setAttribute("placeholder", "Email");
         userEmail.setAttribute("type", "email");
         dform.appendChild(userEmail);
         var userAdd = document.createElement("input");
         userAdd.setAttribute("placeholder", "Address");
         dform.appendChild(userAdd);
         var userDob = document.createElement("input");
         userDob.setAttribute("placeholder", "D.O.B");
         userDob.setAttribute("type", "date");
         dform.appendChild(userDob);
         var userPhn = document.createElement("input");
         userPhn.setAttribute("placeholder", "Phone number");
         dform.appendChild(userPhn);
         var sBtn = document.createElement("input");
         sBtn.setAttribute("value", "submit");
         sBtn.setAttribute("type", "submit");
         var rBtn = document.createElement("input");
         rBtn.setAttribute("value", "reset");
         rBtn.setAttribute("type", "reset");
         var btns = document.createElement("div");
         btns.setAttribute("style","margin:0.4rem auto")
         dform.appendChild(btns);
         btns.appendChild(sBtn);
         btns.appendChild(rBtn);
      }
   </script>
</body>
</html>

In the below given image it shows the output of the following above example, which displays the student registration form generate button. When the generate form button is not clicked it displays a simple page as shown below.

When the above “Generate Form” button is clicked the arrow function created inside the script tag is triggered, which in the result displays a dynamically generated form with all the required fields for the student registration.

Conclusion

By achieving this task we can create any dynamic element in our web page. The dynamic content in the web page makes the page load fast as the server does not have to respond to a whole bulky code at the start when the page is loading. The dynamic form also makes the page more interactive.

Updated on: 11-Apr-2023

3K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements