Em Javascript, podemos trabalhar cada elemento de um formulário para, por exemplo, ler ou escrever um valor, uma escolha a qual poderá associar uma gestão de evento etre muitas outras coisas. Todos esses elementos irão reforçar as capacidades interativas da página.
Um formulário é um elemento Html declarado pela tags <FORM></FORM>. Um formulário contém um ou vários elementos que chamamos os controladores (widgets). Esses controladores são escrito por exemplo pela tags <INPUT TYPE= ...>.
Declaração de um formulário
Como disse anteriormente, a declaração de um formulário é feito pelas tags <FORM> e </FORM>. Pode-se notar que em Javascript, o atributo NAME="nome_do_formulário" tem toda a sua importância para designar o caminho completo dos elementos. Os atributos ACTION e METHOD são facultativos pelo menos até não fazer apelo ao servidor.
Um erro clássico e em Javascript é de esquecer de declarar o fim do formulário</FORM> depois de ter inserir um controlador.
Controlador de linha de texto
A área de texto é o elemento de entrada/saída do Javascript. A sintaxe Html é <INPUT TYPE="text" NAME="nome" SIZE=x MAXLENGTH=y> para uma área de texto de uma só linha, de comprimento x e de comprimento máximo y.
O objecto texto tem 3 propriedades:
name - indica o nome do controlador.
defaultvalue - indica o valor por defeito que será afixada na área de texto.
value - indica que o valor da área de texto. Seja ele escrito pelo usuario ou já ter um valor por padrão.
Ler um valor numa area de texto
Quando inserir um valor no formulario ele te retornará com uma mensagem.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function controle(form1) {
var test = document.form1.input.value;
alert("Escreveste: " + test);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form1">
<INPUT TYPE="text" NAME="input" VALUE=""><BR>
<INPUT TYPE="button" NAME="botao" VALUE="Controlar" onClick="controle(form1)">
</FORM>
</BODY>
</HTML>
Quando clicar no botão "controlar", o Javascript chama a função controle() no qual passamos o formulário em que o nome é form1 como argumento.
Esta função controle() definida nas tags <HEAD> Toma sob a variável test, o valor da área de texto. Para selecionar este valor, escreve-se o caminho completo deste. Neste exemplo, tem o objecto formulário chamado form1 que contém o controlador de texto nomeado input e que tem como propriedade o elemento de valor value. O que dá document.form1.input.value.
Escrever um valor na área de texto
Neste outro exemplo vamos criar um formulario de entrada e um de saida.
<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
function afixar(form2) {
var testin =document. form2.input.value;
document.form2.output.value=testin
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="form2">
<INPUT TYPE="text" NAME="input" VALUE=""> área de texto de entrada<BR>
<INPUT TYPE="button" NAME="botao" VALUE="Afixar" onClick="afixar(form2)"><BR>
<INPUT TYPE="text" NAME="output" VALUE=""> área de texto de saída
</FORM>
</BODY>
</HTML>
Ao clicar no botão "Afixar", o Javascript chama a função afixar() na qual passa o formulário em que o nome é form2 desta vez como argumento.
Esta função afixar() definida nas tags <HEAD> toma sob a variável testin, o valor da área de texto de entrada. À instrução seguinte, dizemos ao Javascript que o valor da área de texto output contida no formulário nomeado form2 é a da variável testin. Utiliza-se o caminho completo para chega a propriedade valor do objeto desejado, seja em Javascript document.form2.output.value.
Até a Pórxima!
08 novembro, 2009 | Comente
Criando Formulários em JavaScript
Quer receber todas nossas novidades? Então...
Assinar:
Postar comentários (Atom)
3 comentários:
legal vou tentar aplicar d alguma forma no meu blog
http://explicacaodanet.dihitt.com.br/
neste ultimo exemplo ai tem um exemplo de um campo e aparece em outro
como eu faço para colocar mais campos para digitar ?
obrigado
Muito Bom o tutorial!!!
O primeiro em que eu vi a explicação com detalhes, parabêns.
Postar um comentário