How to dynamically create a form using JavaScript

Overview

To create a fully dynamic HTML form, you can use some Document Object Model (DOM) methods to create it, such as createElement(), setAttribute(), appendChild( ). These DOM methods will help us build dynamic HTML forms. The way we build this dynamic form is by creating all the elements in script tags, setting properties to add some functionality, and finally when our element is ready to be served, we append it to the element's parent element. Therefore, all elements appended within the parent form tag are child elements.

grammar

Syntax used in this task -

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

document.createElement(elements);

• The setAttribute() method is used to insert attributes into elements. Values ​​within the setAttribute() method are passed as key-value pairs. For example: ("Placeholder", "Name"), ("Type", "Submit"), ("Value", "Submit"), etc.

element.setAttribute(“Key”,“Value”);

• appendChild() method inserts the element we created using createElement() into any body tag. The element reference of the direct element is passed as argument to appendChild().

parentElement.appendChild(element);

algorithm

Step 1 − Create simple HTML boilerplate code in the editor. Also create a button and a form label where our dynamic form will load.

Step 2 − Create a JavaScript arrow function inside the script tag.

Step 3 − Now use document.getElementById() to get the form in the variable since the form tag is defined by the ID name.

Step 4 − Start building your dynamic form from here. Create a new element using the document's createElement() method.

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

Step 5 − Now use the setAttribute() method to set attributes in the element created above.

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

Step 6 − Use the appendChild() method to append the element created above to the parent element "form" as the id name "dform".

dform.appendChild(userName);

Step 7 − Repeat steps 4 through 6 and create all required fields for the form.

Step 8 − Use createElement() to create another element div, and create two buttons for submit and reset respectively, and add these two buttons attached to it.

Step 9−Click the "Generate Form" button to trigger the "gForm()" function and dynamically generate the form.

Example

In the given example, we have built a form using Javascript. Therefore, all elements within the form tag are not constructed as static as they would be with elements within the body tag. This form contains certain fields for student registration. The fields are name, email, address, date of birth, phone number, so all of these are rendered dynamically from script tags.

   

   
   
*Student registration form
    Generate Form 
   
 
   <script>
      gForm = () => {
         var dform = document.getElementById("dynamicForm");
         dform.setAttribute("style", "display:flex;flex-direction:column")
         
         // dform.innerHTML=""
         var userName = document.createElement(&quot;input&quot;);
         userName.setAttribute(&quot;placeholder&quot;, &quot;Name&quot;);
         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>

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

When the "Generate Form" button above is clicked, the arrow function created within the script tag is triggered and the result is a dynamically generated form with all the required fields for student registration.

in conclusion

By completing this task, we can create any dynamic element in the web page. Dynamic content in a web page makes the page load faster because the server does not have to respond to the entire huge code at the beginning when the page loads. Dynamic forms also make pages more interactive.

The above is the detailed content of How to dynamically create a form using JavaScript. For more information, please follow other related articles on the PHP Chinese website!