Você está aqui: JavaScript ::: W3C DOM - (Wide Web Consortium) Document Object Model ::: Criação, modificação e exclusão de elementos |
Criando controles de formulários HTML dinamicamente usando o método createElement()Quantidade de visualizações: 2470 vezes |
|
É comum usarmos o método document.createElement() para criar elementos HTML tais como div, button, span, etc. Mas você sabia que é possível usar este método para criar elementos de formulários também? Nessa dica eu mostro como isso pode ser feito. O primeiro passo é criar um elemento form que vai abrigar os controles. Veja: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- <form id="cadastro" name="cadastro" action="cadastrar.php" method="get"> </form> Note que o nome deste formulário é "cadastro", o método de envio é GET e os dados serão enviados para "cadastrar.php". O envio pode ser para qualquer endereço. A idéia é vermos os valores enviados na URL da página. Veja o código completo para o exemplo: ----------------------------------------------------------------------
Se precisar de ajuda com o código abaixo, pode me chamar
no WhatsApp +55 (62) 98553-6711 (Osmar)
----------------------------------------------------------------------
<!doctype html>
<html>
<head>
<title>DOM da W3C</title>
</head>
<body>
<form id="cadastro" name="cadastro" action="cadastrar.php" method="get">
</form>
<a href="javascript:criar_controles()">Criar controles</a><br><br>
<script type="text/javascript">
function criar_controles(){
// primeiro vamos criar uma caixa de texto do tipo text
var txt = document.createElement("input");
txt.setAttribute("type", "text"); // define o tipo to input
txt.setAttribute("name", "usuario"); // propriedade name
// a caixa de texto pertence ao form cadastro
txt.setAttribute("form", "cadastro");
// agora vamos criar o botão submit que envia o form
var btn = document.createElement("input");
btn.setAttribute("type", "submit"); // define o tipo to input
btn.setAttribute("name", "btn_enviar"); // propriedade name
btn.setAttribute("value", "Enviar");
// o botão pertence ao form cadastro
btn.setAttribute("form", "cadastro");
// vamos adicionar os controles no documento HTML
document.body.appendChild(txt);
document.body.appendChild(btn);
}
</script>
</body>
</html>
Coloque este código em um documento HTML e abra-o em seu navegador web. Clique no link e veja a caixa de texto e o botão submit serem criados. Digite alguma coisa na caixa de texto e clique Enviar. O formulário será enviado e você verá os valores na URL da página: ---------------------------------------------------------------------- Se precisar de ajuda com o código abaixo, pode me chamar no WhatsApp +55 (62) 98553-6711 (Osmar) ---------------------------------------------------------------------- http://localhost/cadastrar.php?usuario=Osmar&btn_enviar=Enviar Pronto! Agora é só deixar as suas idéias fluírem. |
 Link para compartilhar na Internet ou com seus amigos: |
Desafios, Exercícios e Algoritmos Resolvidos de JavaScript |
Veja mais Dicas e truques de JavaScript |
Dicas e truques de outras linguagens |
|
Java - Exercícios Resolvidos de Java - Contando de 1 até 20 e formatando a saída usando System.out.printf() |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
