# Create a form with dom with nested tags, Wrapping a set of DOM elements using JavaScript (ok)

C:\xampp\htdocs\code\test.html

```
<!DOCTYPE html>
<html>
  <head>
    <title> Create a Form Dynamically with the JavaScript </title>
  </head>
  <body style="text-align: center;">
    <h1 style="color: green;"> GeeksforGeeks </h1>
    <p> Click on the button to create a form dynamically </p>
    <button onClick="GFG_Fun()"> click here </button>
    <p id="GFG_DOWN"></p>
    <script type="text/javascript">
      // Create a form dynamically
      var form = document.createElement("form");
      form.setAttribute("method", "POST");
      form.setAttribute("action", "/webhook/");
      // Create an input element for form-group
      var FG = document.createElement("div");
      FG.setAttribute("class", "form-group");
      // Create an input element for Label
      var LB = document.createElement("label");
      LB.append("顧客番号");
      // Create an input element for Full Name
      var FN = document.createElement("input");
      FN.setAttribute("type", "text");
      FN.setAttribute("class", "form-control");
      FN.setAttribute("id", "UserID");
      FN.setAttribute("placeholder", "顧客番号入力");
      FN.setAttribute("name", "UserID");
      FG.appendChild(LB);
      FG.appendChild(FN);
      // create a submit button
      var form = document.createElement("form");
      form.setAttribute("method", "post");
      form.setAttribute("action", "submit.php");
      var s = document.createElement("input");
      s.setAttribute("type", "submit");
      s.setAttribute("value", "Submit");
      // Append the full name input to the form
      form.appendChild(FG);
      document.getElementsByTagName("body")[0].appendChild(form);
    </script>
  </body>
</html>
```

![](/files/tGdS9X6GVZOIadNlXJJN)

{% embed url="<https://www.geeksforgeeks.org/how-to-create-a-form-dynamically-with-the-javascript/>" %}

```
<!DOCTYPE html>
<html>
	<head>
		<title>
			Create a Form Dynamically with
			the JavaScript
		</title>
	</head>
	<body style="text-align: center;">
		<h1 style="color: green;">
			GeeksforGeeks
		</h1>
		<p>
		Click on the button to create
		a form dynamically
		</p>
		<button onClick="GFG_Fun()">
			click here
		</button>
		<p id="GFG_DOWN"></p>
<script>
	var down = document.getElementById("GFG_DOWN");
		
	// Create a break line element
	var br = document.createElement("br");
	function GFG_Fun() {
			
	// Create a form dynamically
	var form = document.createElement("form");
	form.setAttribute("method", "post");
	form.setAttribute("action", "submit.php");

	// Create an input element for Full Name
	var FN = document.createElement("input");
	FN.setAttribute("type", "text");
	FN.setAttribute("name", "FullName");
	FN.setAttribute("placeholder", "Full Name");

	// Create an input element for date of birth
	var DOB = document.createElement("input");
	DOB.setAttribute("type", "text");
	DOB.setAttribute("name", "dob");
	DOB.setAttribute("placeholder", "DOB");

	// Create an input element for emailID
	var EID = document.createElement("input");
	EID.setAttribute("type", "text");
	EID.setAttribute("name", "emailID");
	EID.setAttribute("placeholder", "E-Mail ID");

	// Create an input element for password
	var PWD = document.createElement("input");
	PWD.setAttribute("type", "password");
	PWD.setAttribute("name", "password");
	PWD.setAttribute("placeholder", "Password");

	// Create an input element for retype-password
	var RPWD = document.createElement("input");
	RPWD.setAttribute("type", "password");
	RPWD.setAttribute("name", "reTypePassword");
	RPWD.setAttribute("placeholder", "ReEnter Password");

				// create a submit button
				var s = document.createElement("input");
				s.setAttribute("type", "submit");
				s.setAttribute("value", "Submit");
				
				// Append the full name input to the form
				form.appendChild(FN);
				
				// Inserting a line break
				form.appendChild(br.cloneNode());
				
				// Append the DOB to the form
				form.appendChild(DOB);
				form.appendChild(br.cloneNode());
				
				// Append the emailID to the form
				form.appendChild(EID);
				form.appendChild(br.cloneNode());
				
				// Append the Password to the form
				form.appendChild(PWD);
				form.appendChild(br.cloneNode());
				
				// Append the ReEnterPassword to the form
				form.appendChild(RPWD);
				form.appendChild(br.cloneNode());
				
				// Append the submit button to the form
				form.appendChild(s);

				document.getElementsByTagName("body")[0]
			.appendChild(form);
			}
		</script>
	</body>
</html>

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/advanced/create-a-form-with-dom-with-nested-tags-wrapping-a-set-of-dom-elements-using-javascript-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
