T r u q u e s e D i c a s - Tutoriais de Javascript

Com o Javascript, os formulários Html tomem outra dimensão. Não esquecer que em Javascript, podemos aceder a 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... Todos esses elementos irão reforçar as capacidades interactivas da página.

Um formulário é um elemento Html declarado pelo 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 pelo tags <INPUT TYPE= ...>.

Declaração de um formulário

A declaração de um formulário faz-se pelos 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. Em suma, 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 zona de texto é o elemento de entrada/saída por excelência 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:

PROPRIEDADES DESCRIÇÃO

name indica o nome do controlador pelo que podemos aceder.

defaultvalue indica o valor por defeito que será afixada na zona de texto.

value indica que o valor da zona de texto. Seja ele escrito pelo utilizador ou já ter um valor por defeito.

Ler um valor numa zona de texto

Um exemplo que iremos pormenorizar:

Insira um valor e carregue no botão para controla-lo.

O script completo é assim:

<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 clica-se 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çãocontrole() definida nos tags <HEAD> Toma sob a variável test, o valor da zona de texto. Para aceder a este valor, escreve-se o caminho completo deste (ver o capítulo"Um pouco de teoria objecto"). No documento presente, 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 zona de texto

Inserir um valor qualquer na zona do texto de entrada. Carregar sobre o botão para inserir este valor na zona de texto saída.

Zona de texto de entrada

Zona de texto de saída

Código:

<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=""> Zona de texto de entrada<BR>
<INPUT TYPE="button" NAME="botao" VALUE="Afixar" onClick="afixar(form2)"><BR>
<INPUT TYPE="text" NAME="output" VALUE=""> Zona de texto de saída
</FORM>
</BODY>
</HTML>

Ao clicar no botão "Afixar", o Javascript chama a função a função afixar() na qual passa o formulário em que o nome é form2 desta vez como argumento.
Esta função afixar() definida nos tags <HEAD> toma sob a variável testin, o valor da zona de texto de entrada. À instrução seguinte, dizemos ao Javascript que o valor da zona 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 objecto desejado, seja em Javascript document.form2.output.value.

Anterior

Seguinte

ANÚNCIOS