Javascript Criar um formulário com elementos inputs só com Javascript

Luiz_Augusto_Silveira · 20 de dezembro de 2017

function criarformulario(){
	
	var formulario = document.createElement("FORM");
	var input01 = document.createElement("INPUT");
	formulario.appendChild(input01);
	var attinput01 = document.createAttribute("type");
	attinput01.value = "text";
	input01.setAttributeNode(attinput01);
	document.body.appendChild(formulario);
	
	
	
}

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<title> Criar um atributo em JavaScript</title>
	<meta charset="utf-8"/>
	
	<style>
		form{
			width: 100px;
			height: 100px;
			background-color: tomato;
		}
	</style>
</head>
<body onload="criarelementootimzado()">
	
	<div id="formulario">
	
		<a href="" onclick="criarformulario()">Criar Formulário</a>
	
	</div>
	<script src="C:\Users\usuário\libreoffice\Referências JavaScript\criarelemento\_js\criarelemento02.js"></script>
</body>
</html>

Estou tentando fazer com que quando eu clicar sobre o link Criar Formulário, ele crie um formulario com inputs, mas não sei se estou fazendo certo.

Alguém pode me ajudar?

Adriano_web · 21 de dezembro de 2017

Olá Luiz_Augusto_Silveira, o ideal seria você criar um formulário já em seu documento HTML, e depois utilizar a declaração display:none; para que ele desapareça da página. E em seguida utilizar o JavaScript para faze-lo reaparecer na página. Exemplo.

HTML:

<!DOCTYPE html>
<html lang="pt-BR">
	<head>
		<title> Criar um atributo em JavaScript</title>
		<meta charset="UTF-8">
		<style>
			.formulario-validacao {
				background-color: tomato;
				display: none;
				height: 100px;
				width: 100px;
			}
		</style>	
	</head>
	<body>
		<div id="formulario">
			<a href="#" id="onForm">Aparecer formulário</a>
		</div>
        		<form class="formulario-validacao" id="formContentOn">
           			 <input type="text" />
        		</form>
		<script src="C:\Users\usuário\libreoffice\Referências JavaScript\criarelemento\_js\criarelemento02.js"></script>
	</body>
</html>

JavaScript:

window.onload = function() {
	var btnExibirFormulario = document.getElementById("onForm");
	var formularioExibido = document.getElementById("formContentOn");
	function abrirForm() {
		formularioExibido.style.display = "block";
	}
	
	btnExibirFormulario.addEventListener("click" abrirForm, false);
}