😆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>
<!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>
PreviousHow to recursively fetch data from paginated API then combine into one array (ok)NextArray find, Tìm phần tử đầu tiên thỏa mãn điều kiện (ok)

Last updated