 |
|
||||
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: 2181 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: <form id="cadastro" name="cadastro" action="cadastrar.php" method="get"> 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:
<!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
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: 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 |
E-Books em PDF |
||||
|
||||
|
||||
Linguagens Mais Populares |
||||
|
1º lugar: Java |
