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árioComo 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 textoQuando 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 textoNeste 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!
