Menu
∞ Formulários ∞
Utilizando o HTML e os elementos correspondentes para gerar um formulário, é necessário ter, por trás do servidor Web, um script ou programa CGI que receba e interprete os dados que o utilizador da página submeta.
No entanto, é uma necessidade frequente das aplicações Web efectuar algumas validações sobre os dados introduzidos num formulário, antes de estes serem remetidos para o servidor.
Os programas JavaScript têm, naturalmente, como um dos seus maiores campos de aplicação o processamento local de dados introduzidos pelo utilizador e, portanto, o assunto dos formulários assume a maior importância.
Introdução
Apesar de os programas JavaScript de cliente poderem substituir muitas das aplicações tradicionais HTML/CGI, scripts de servidor, nomeadamente aquelas que envolverem simples cálculos com os dados que são introduzidos, em que não existe vantagem em haver interacção com um servidor, também é verdade que podem ser utilizados em conjunto com programas CGI do lado do servidor, efectuando algumas operações simples, por exemplo, de verificação ou validação dos dados antes de os dados serem passados para o servidor. Vejamos dois exemplos.
Se quiser fazer um programa JavaScript que calcule os dados do IRS a pagar ou a receber, pode tratar-se de operar unicamente sobre dados que o utilizador da página Web introduz. Se não tiver necessidade de interacção com dados de uma base de dados no servidor, não será necessário a existência de nenhuma componente CGI no servidor, uma vez que todos os cálculos podem ser realizados ao nível do cliente.
O script é interpretado localmente, enviando uma página com um formulário ao utilizador. Este preenche-o e envia-o, sendo realizados os cálculos no cliente e devolvido o resultado.
Este tipo de utilização de scripts JavaScript é frequente, no entanto existem outras situações em que se pode usar, como calculadoras, programas de conversão de unidades, câmbios de moeda, etc.
A grande vantagem deste tipo de utilização é, sem dúvida, a inexistência de comunicação com o servidor, garantindo bastante rapidez de execução, a partir do momento em que termina a importação do script. Além disso deixa o servidor disponível para outras tarefas, que requerem mais da interacção com ele.
Caso esteja a desenvolver uma página para o utilizador preencher os dados e envia-los para o servidor, por exemplo a uma encomenda de pizzas que será feita via Internet.
Neste caso, é forçoso existir uma componente de scripting do lado do servidor, que aceita os dados preenchidos no ecrã e que, por exemplo coloque a encomenda numa base de dados.
Nesta situação, o procedimento é semelhante, mas após a conclusão e validação do formulário, é que o resultado é enviado para a aplicação CGI que reside no servidor e que, eventualmente, processará a encomenda.
Tanto num caso como noutro são utilizados ecrãs pré-formatados formulários para gerir a entrada dos dados do utilizador. O JavaScript é um precioso auxiliar no trabalho com os formulários HTML, contribuindo para eliminar parte do peso excessivo que os múltiplos clientes poderiam colocar sobre o servidor.
Elementos dos formulários e Objectos relacionados
Form
No JavaScript utiliza-se um objecto, denominado form, para referenciar os elementos dos formulários, que são os tradicionalmente usados em HTML.
Contudo, um documento pode conter várias forms, razão pela qual os objectos deste tipo se agrupem em arrays de forms.
Vejamos uma descrição do que é o objecto form e qual o conjunto de propriedades e métodos que utiliza.
Propriedades
action
Uma string contendo o valor a atribuir ao atributo action, do elemento HTML
<form>, que contém o script CGI a ser executado quando o conteúdo do formulário é submetido.
elements
Um array contendo uma entrada correspondente a cada elemento existente no formulário, campos de
texto, caixas de selecção, etc...
encoding
Tipo de codificação MIME utilizado no conteúdo enviado para o servidor, correspondente ao atributo
enctype, do elemento HTML <form>.
length
Número de elementos contidos no formulário, ou seja, o comprimento do array elements.
method
Identifica o atributo method.
name
String contendo o nome do formulário, correspondente ao atributo name.
target
Este parâmetro traduz o target do elemento <form>, que é utilizado
para conter o nome da frame que é utilizada.
Métodos
submit()
Submete o formulário para o programa CGI ou server side script correspondente.
Os formulários em HTML são construídos com base num conjunto de elementos distintos, usados para a entrada dos dados. Os scripts JavaScript operaram sobre os elementos componentes dos formulários, bem como sobre os seus conteúdos, utilizando, para tal, as propriedades e métodos dos objectos associados.
Área de Texto
A área de texto é um campo no qual o utilizador pode colocar múltiplas linhas de texto. O aspecto inicial do objecto no ecrã é fácil de configurar, modificando os valores dos campos rows (linhas) e cols (colunas).
A sintaxe é a seguinte:
<textarea name = "nome" rows = "n_linhas" cols = "n_cols">
Texto inicial...
</textarea>
Atributos
name
Nome que designa o elemento de texto.
rows
Número de linhas da janela e texto (altura).
cols
Número de colunas da janela de texto (largura).
"texto inicial"
Texto integrado na área de texto.
Propriedades
defaultValue
Indica o valor inicial que vai aparecer na zona de texto, especificado como atributo do elemento HTML
<input ...>.
form
Referencia o objecto form que identifica o formulário que contém o campo.
name
Nome atribuído ao elemento, também é um atributo de <input ...>.
type
Valor do atributo type.
value
Valor contido no elemento.
Métodos
focus()
Coloca o foco no elemento de texto,
blur()
Retira o foco.
select()
Selecciona o texto contido no elemento de texto.
Lista de Selecção
Este elemento corresponde a uma caixa de selecção, na qual o utilizador pode seleccionar entre um conjunto predeterminado de itens, quer seja num menu, quer numa lista de opções.
A sintaxe a empregar em HTML para construir um elemento deste tipo é, a seguinte:
<select name = "lista">
<option selected value = "item1"> Item1
<option value = "item2"> Item2
<option value = "item3"> Item3
</select>
Neste caso, o item que está seleccionado (predefinido) é o item1, razão pela qual, ao surgir o elemento na página HTML correspondente, surge como visível à partida o elemento item1.
O elemento <select ...> aceita como atributos os seguintes parâmetros:
Atributos
name
Nome que designa o elemento.
size
Parâmetro que designa o número de escolhas a mostrar. Se não for preenchido, os itens surgem como um
menu, caso contrário, surgem dentro de uma caixa de escolhas com o número de elementos visíveis colocado em size.
multiple
Caso este parâmetro seja definido, são autorizadas escolhas de múltiplos itens da lista. Normalmente,
só um elemento pode ser seleccionado.
<select name = "lista" size = "2">
<select multiple name = "lista">
Propriedades
form
Referencia o formulário que contém o elemento select.
length
Número de elementos (opções) da lista de selecção.
name
Nome do elemento.
selectedIndex
Índice do item correntemente seleccionado.
type
Toma o valor select_one se o atributo HTML multiple estiver não activo e
select_multiple no caso contrário.
options
Array contendo os diversos itens disponíveis para selecção.
A propriedade options contém em si um conjunto de propriedades que se enumeram em seguida:
defaultSelected
Indica se a opção estava ou não seleccionada à partida.
index
Número de índice da opção.
length
Número de opções da lista.
name
Nome da lista de selecção.
options
Código HTML completo da lista.
selected
Indica se a opção está seleccionada,
selectedIndex
Número de índice da opção seleccionada.
text
Texto mostrado na lista de escolha para a opção em causa.
value
Valor da opção em causa.
Métodos
focus()
Coloca o foco no elemento de texto.
blur()
Retira o foco.