How to Create a Form Dynamically with the JavaScript?
The task is to create an HTML form dynamically with the help of JavaScript. There are two approaches that are discussed below.
Approach 1: Use document.createElement() to create the new elements and use setAttribute() method to set the attributes of elements. Append these elements to the <form> element by appendChild() method. Finally append the <form> element to the <body> element of the document. This example creates a Registration form.
- Example:
<!DOCTYPE html><html><head><title>Create a Form Dynamically withthe JavaScript</title></head><bodystyle="text-align: center;"><h1style="color: green;">GeeksforGeeks</h1><p>Click on the button to createa form dynamically</p><buttononClick="GFG_Fun()">click here</button><pid="GFG_DOWN"></p><script>var down = document.getElementById("GFG_DOWN");// Create a break line elementvar br = document.createElement("br");function GFG_Fun() {// Create a form synamicallyvar form = document.createElement("form");form.setAttribute("method", "post");form.setAttribute("action", "submit.php");// Create an input element for Full Namevar FN = document.createElement("input");FN.setAttribute("type", "text");FN.setAttribute("name", "FullName");FN.setAttribute("placeholder", "Full Name");// Create an input element for date of birthvar DOB = document.createElement("input");DOB.setAttribute("type", "text");DOB.setAttribute("name", "dob");DOB.setAttribute("placeholder", "DOB");// Create an input element for emailIDvar EID = document.createElement("input");EID.setAttribute("type", "text");EID.setAttribute("name", "emailID");EID.setAttribute("placeholder", "E-Mail ID");// Create an input element for passwordvar PWD = document.createElement("input");PWD.setAttribute("type", "password");PWD.setAttribute("name", "password");PWD.setAttribute("placeholder", "Password");// Create an input element for retype-passwordvar RPWD = document.createElement("input");RPWD.setAttribute("type", "password");RPWD.setAttribute("name", "reTypePassword");RPWD.setAttribute("placeholder", "ReEnter Password");// create a submit buttonvar s = document.createElement("input");s.setAttribute("type", "submit");s.setAttribute("value", "Submit");// Append the full name input to the formform.appendChild(FN);// Inserting a line breakform.appendChild(br.cloneNode());// Append the DOB to the formform.appendChild(DOB);form.appendChild(br.cloneNode());// Append the emailID to the formform.appendChild(EID);form.appendChild(br.cloneNode());// Append the Password to the formform.appendChild(PWD);form.appendChild(br.cloneNode());// Append the ReEnterPassword to the formform.appendChild(RPWD);form.appendChild(br.cloneNode());// Append the submit button to the formform.appendChild(s);document.getElementsByTagName("body")[0].appendChild(form);}</script></body></html> - Output:
Approach 2: This approach is somewhat similar to the previous one but using the JQuery method to append the elements. Use document.createElement() to create the new elements and use setAttribute() method to set the attributes of elements. Append these elements to the < form > element by append() method of JQuery. Finally append the <form> element to the <body> element of the document. This example creates a LOGIN form.
- Example:
<!DOCTYPE html><html><head><title>Create a Form Dynamicallywith the JavaScript</title></head><bodystyle="text-align: center;"><h1style="color: green;">GeeksforGeeks</h1><p>Click on the button to createa form dynamically</p><buttononClick="GFG_Fun()">click here</button><pid="GFG_DOWN"></p><script>var down = document.getElementById("GFG_DOWN");function GFG_Fun() {// Create a form synamicallyvar form = document.createElement("form");form.setAttribute("method", "post");form.setAttribute("action", "submit.php");// Create an input element for emailIDvar ID = document.createElement("input");ID.setAttribute("type", "text");ID.setAttribute("name", "emailID");ID.setAttribute("placeholder", "E-Mail ID");// Create an input element for passwordvar PWD = document.createElement("input");PWD.setAttribute("type", "password");PWD.setAttribute("name", "password");PWD.setAttribute("placeholder", "Password");// Create a submit buttonvar s = document.createElement("input");s.setAttribute("type", "submit");s.setAttribute("value", "Submit");// Append the email_ID input to the formform.append(ID);// Append the password to the formform.append(PWD);// Append the button to the formform.append(s);document.getElementsByTagName("body")[0].appendChild(form);}</script></body></html> - Output:
