Obtendo dados com formulários Exploraremos agora uma das utilizações mais poderosas para o JavaScript: trabalhar com formulários de HTML. Você pode utilizar JavaScript para tornar um formulário mais interativo, validar dados que o usuário insere e inserir dados baseados em outros dados. Princípios básicos de formulários de HTML Os formulários estão entre os recursos mais úteis da linguagem de HTML. O primeiro passo na criação de um formulário interativo é criar seu próprio formulário de HTML. Um formulário de HTML inicia com a tag <FORM>. Essa tag indica que um formulário está iniciando e permite que elementos de formulário sejam utilizados. A tag <FORM> inclui três parâmetros: o NAME é simplesmente um nome para o formulário. Você pode utilizar formulários sem lhes atribuir nomes, mas você precisará atribuir um nome a um formulário a fim de facilmente utiliza-lo com o JavaScript; o METHOD é tanto GET como POST; essas são duas maneiras como os dados podem ser enviados para o servidor; o ACTION é o script de CGI para o qual os dados do formulário serão enviados. Você também pode utilizar a ação mailto: para enviar os resultados do formulário para um endereço de correio eletrônico, como descrito mais adiante. Por exemplo, abaixo temos uma tag <FORM> para um formulário denominado Order. Esse formulário utiliza o método GET e envia seus dados para um script de CGI chamado order.cgi no mesmo diretório da própria página da Web: <FORM NAME= Order METHOD= GET ACTION= ORDER.CGI > Para um formulário que será processado inteiramente pelo JavaScript (como uma calculadora ou jogo interativo), os atributos METHOD e ACTION não são necessários. Você pode utilizar uma tag <FORM> simples que atribui nome ao formulário: <FORM NAME= calcform > A tag <FORM> é seguida por um ou mais elementos de formulário. Esses são os campos de dados no formulário, como campos de texto, botões e caixas de seleção. E Nemer 1 / 27
A seguir temos um exemplo de um formulário simples, onde não são usados os atributos METHOD e ACTION. <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE> Exemplo de um formulário simples - formsimples.htm </TITLE> <script language="javascript"> function ValidaNum1( ) if (calcform.txtvalor1.value.length < 1) alert("entre com o primeiro numero"); function ValidaNum2( ) if (calcform.txtvalor2.value.length < 1 calcform.txtvalor2.value ==0) alert("entre com o segundo numero e ele não pode ser igual a zero"); calcform.txtvalor2.value =""; function Soma( ) total=parseint(calcform.txtvalor1.value)+parseint(calcform.txtvalor2.value); alert("total = "+total); function Subtrai( ) diferenca=calcform.txtvalor1.value-calcform.txtvalor2.value; alert("diferença = "+diferenca); function Multiplica( ) produto=calcform.txtvalor1.value*calcform.txtvalor2.value; alert("produto = "+produto ); function Divide( ) quociente=calcform.txtvalor1.value/calcform.txtvalor2.value; alert("quociente = "+quociente); </script> </HEAD> <BODY> <h1> Exemplo de um formulário simples - formsimples.htm </h1> <hr> <h2>calculadora</h2> E Nemer 2 / 27
<form name="calcform"> <b>primeiro número</b> : <input name="txtvalor1" onblur="validanum1( );"> <br><br> <b>segundo número</b>: <input name="txtvalor2" onblur="validanum2( );" ><br><br> <input type="button" name="cmdadicao" value="adição" onclick="soma( );"> <input type="button" name="cmdsubtrai" value="subtração" onclick="subtrai( );"> <input type="button" name="cmdmultiplica" value="multiplicação" onclick="multiplica( );"> <input type="button" name="cmddivide" value="divisão" onclick="divide( );"> </form> <hr> </BODY> </HTML> E Nemer 3 / 27
Enviando os dados de um formulário Utilizando um navegador da Web padrão, um usuário pode navegar para uma página da Web com um formulário nele e inserir as informações. Quando o usuário faz isso, as informações que ele está digitando ainda não forma enviadas para o servidor da Web. Essas informações não estão disponíveis para o servidor da Web processar até o usuário enviar o formulário clicando no botão de enviar do formulário. Seria ótimo ser capaz de enviar essas informações para uma página ASP que, então, poderia determinar o que o usuário inseriu no formulário e agir sobre essas informações. O tag <FORM> oferece duas propriedades que permitem a você enviar as informações do formulário para uma página ASP para processamento: a propriedade ACTION e propriedade METHOD. A propriedade ACTION de um formulário pode ser configurada como qualquer URL válido. Quando um usuário envia o formulário, o URL especificado na propriedade ACTION é chamado e os valores nos campos de formulário são passados. É importante observar que a propriedade ACTION não tem de ser configurada como uma página ASP. A propriedade ACTION pode ser configurada como qualquer nome de página da Web em seu servidor da Web (como um script de CGI) ou como um script em outro servidor ou pode ser deixada de forma. Observe que se você não especificar a propriedade ACTION em um formulário, quando um usuário enviar o formulário, o atual é recarregado. A segunda propriedade do tag <FORM> é chamada METHOD e pode ser configurada como GET ou POST. O METHOD determina como os valores de campo de formulário são passados à página ASP especificada na propriedade ACTION do formulário. No caso de METHOD ser configurada como GET, a string de consulta (querystring) é utilizada para passar as informações de um formulário para uma página ASP, por exemplo. A querystring são as informações adicionais enviadas para uma página da Web acrescentada ao fim do URL e é composta de pares nome/valor, na seguinte forma: NomeDaVariável = ValorDaVariável A querystring pode conter múltiplos pares nomes/valor e cada par nome/valor é separado por um e comercial (&). Por exemplo, se o nome e idade foram armazenados na querystring, ela talvez se pareça com isto:?nome=edson&idade=42 Lembre-se de que a querystring sempre é acrescentada ao URL, então, no painel de endereço no seu navegador, o URL completo da página apareceria, por exemplo, da seguinte forma: http://www.seuservidor.com.br/aplic.asp?nome=edson&idade=42 E Nemer 4 / 27
Se você tiver um vasto número de campos de formulário em seu formulário, rapidamente torna-se aparente que a querystring se tornará muito longa. Isso significa que se você tiver um número grande de campos de formulário, talvez seja recomendável configurar o METHOD do formulário como POST, como veremos a seguir. Embora passar informações de formulário pela querystring talvez pareça inofensivo, imagine se você tiver um formulário onde quer que o usuário insira sua senha ou alguns outros tipos de informações sigilosas. Quando as informações são passadas pela querystring, essas informações sensíveis aparecem na tela. Portanto, se estiver pedindo informações privadas, é melhor não configurar METHOD como GET. Quando a propriedade METHOD é configurada como POST, as informações sendo passadas são ocultas, e, portanto, configurar METHOD=POST é preferível a coletar informações sigilosas de seus usuários. Ao configurar METHOD como POST, os dados são ainda passados em pares nome/valor à página ASP especificada pela propriedade ACTION do formulário. Entretanto, em vez de acrescentar ao URL, os pares nome/valor são ocultos da barra Address. Portanto, se planeja pedir que seus usuários insiram informações privadas, é melhor utilizar POST. Na realidade, a recomendação é que sempre crie seus formulários com METHOD=POST como o padrão. E Nemer 5 / 27
Lendo valores de um formulário de uma página ASP Você lê os valores de campo de formulário utilizando o objeto Request. O objeto Request contém duas coleções utilizadas para ler o formulário: Coleção de formulário QueryString Form Quando utilizar Quando os valores de campo de formulário estão sendo passados pela querystring, utilize essa coleção. Então, se criar um formulário com METHOD=GET, essa é a coleção Request que você deverá utilizar. Quando o formulário é criado com sua propriedade METHOD configurada como POST, utilize essa coleção Request. O exemplo a seguir apresenta uma página com um formulário e uma página ASP que trata os dados desse formulário. <html> i) Página com formulário <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft FrontPage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title> Exemplo de formulário - exform1.htm </title> </head> <body> <h2> Exemplo de implementação e tratamento de 1 formulário - ex1form.htm </h2> <form name="frmdados" action="tratadado.asp" method="get"> <h2>dados pessoais </h2> Nome: <input name="txtnome" > <br> Time: <input name="txttime" > <br> <input type="submit" value="envia dados" name=submit1> </form> </body> </html> E Nemer 6 / 27
ii) Página ASP para tratar dados do formulário <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE> Página asp que trata os dados do formulário simples - tratadado.asp </TITLE> </HEAD> <BODY> <% Dim nome Dim time nome = Request.Form("txtNome") time = Request.Form("txtTime") Response.Write ("Nome =" & nome & "<br>") Response.Write ("Time de futebol = " & time) %> </BODY> </HTML> E Nemer 7 / 27
Utilizando o objeto form com JavaScript Cada formulário em sua página de HTML é representado no JavaScript por um objeto form, que tem o mesmo nome que o atributo NAME na tag <FORM> que você utilizou para defini-lo. Pode-se utilizar o array forms para fazer referência a formulários. Esse array inclui um item para cada elemento de formulário, indexado iniciando com 0. Por exemplo, se o primeiro formulário em um documento tem o nome form1, você pode fazer referência a ele de uma destas duas maneiras: document.form1 document.forms[0] As propriedades do objeto form Junto com os elementos, cada objeto de formulário também tem uma lista de propriedades, a maioria das quais é definida pela tag <FORM> correspondente. Você também pode configurar essas propriedades a partir do JavaScript. Essas propriedades incluem as seguintes: o action é o atributo ACTION do formulário ou o programa para o qual os dados do formulário serão enviados; o encoding é o tipo de MIME do formulário, especificado com o atributo ENCTYPE. Na maioria dos casos, essa propriedade não é necessária; o length é o número de elementos no formulário. Você não pode alterar essa propriedade; o method é o método utilizado para submeter o formulário, tanto GET como POST; o target especifica a janela em que o resultado do formulário (do script de CGI) será exibido. Normalmente, isso é feito na janela principal, substituindo o próprio formulário. Enviando e limpando formulários O objeto form tem dois métodos, submit e reset. Você pode utilizar esses métodos para enviar os dados ou limpar o próprio formulário, sem exigir que o usuário pressione um botão. Uma razão para isso é enviar o formulário quando o usuário dá um clique em uma imagem ou executa outra ação que normalmente não enviaria o formulário. Se você utilizar o método submit para enviar dados para um servidor ou por correio eletrônico, o browser solicitará ao usuário para confirmar se quer E Nemer 8 / 27
enviar as informações. Não há nenhuma maneira de fazer isso sem que o usuário autorize. Detectando eventos de formulário O objeto form tem dois handlers de evento, onsubmit e onreset. Você pode especificar um grupo de instruções de JavaScript ou uma chamada de função para esses eventos dentro da tag <FORM> que define o formulário. Se você especifica uma instrução ou função para o evento onsubmit, a instrução é chamada antes que os dados sejam enviados para o script de CGI. Você pode evitar que o envio aconteça retornando um valor false do handler de evento onsubmit. Se a instrução retornar true, os dados serão enviados. Da mesma forma, você pode evitar que um botão Reset funcione com um handler de evento onreset. Elementos de script de formulário A propriedade mais importante do objeto form é o array elements, que contém um objeto para cada um dos elementos do formulário. Você pode fazer referência a um elemento pelo próprio nome ou por seu índice no array. Por exemplo, as seguintes duas expressões referenciam o primeiro elemento no formulário order, o campo de texto name1: document.order.elements[0] document.order.name1 Tanto os formulários como os elementos podem ser referenciados por seus próprios nomes ou como índices nos arrays forms e elements. Se você fizer referência aos formulários e elementos como arrays, você pode utilizar a propriedade length para determinar o número de objetos no array: document.forms.length é o número de formulários em um documento e document.form1.elements.length é o número de elementos no formulário form1. Campos de texto Provavelmente os elementos de formulário mais comumente utilizados são os campos de texto. Você pode utilizá-los para solicitar um nome, endereço ou qualquer outra informação. Com JavaScript, você pode exibir o texto do E Nemer 9 / 27
campo automaticamente. O exemplo seguinte é de um campo simples de texto: <INPUT TYPE= TEXT NAME= TEXT1 VALUE= hello SIZE= 30 > O código acima define um campo de texto chamado text1. Ao campo é dado um valor padrão de hello e permite que até 30 caracteres sejam inseridos. O JavaScript trata esse campo como um objeto text com o nome text1. Os campos de texto são os mais simples de trabalhar no JavaScript. Cada objeto text tem as seguintes propriedades: o name é o nome dado ao campo. Esse nome também é utilizado como o nome do objeto; o defaultvalue é o valor padrão e corresponde ao atributo VALUE. Essa é uma propriedade de leitura somente; o value é o valor atual. Essa propriedade inicia com o valor padrão, mas pode ser alterada, tanto pelo usuário como por funções em JavaScript. Quando você trabalha com campos de texto, na maior parte do tempo você utiliza o atributo value para ler o valor que o usuário inseriu ou para alterar o valor. Por exemplo, a seguinte instrução altera o valor de um campo de texto chamado username no formulário order para Edson Nemer : document.order.username.value = Edson Nemer ; O exemplo a seguir apresenta vários pontos do que foi falado até agora. E Nemer 10 / 27
i) Página html com dois formulários <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft FrontPage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title> Exemplo de implementação e tratamento de 2 formulários - ex2form.htm </title> <script language="javascript"> function ValfrmDados( ) if((document.frmdados.txtnomelivro.value.length<1) (document.frmdados.txtautorlivro.value.length<1)) alert("os campos não podem estar vazios."); return false; else return true; function LimpouDados() alert("você acabou de limpar os campos do formulário!!!"); function EnviaForm2( ) if((document.frmoutrosdados.txtisbnlivro.value.length<1) (document.frmoutrosdados.txtanolivro.value.length<1)) alert("os campos não podem estar vazios."); else frmoutrosdados.submit(); function ValDefault( ) /* utiliza os nomes dos formulários e de cada elemento do formulário para preencher os campos do formulário */ document.frmdados.txtnomelivro.value="aprenda em 24 horas - JavaScript 1.3"; document.frmdados.txtautorlivro.value="michael Moncur"; document.frmoutrosdados.txtisbnlivro.value="85-352-0445-8"; document.frmoutrosdados.txtanolivro.value="1999"; E Nemer 11 / 27
function ValVB6( ) /* utiliza os nomes dos formulários e de cada elemento do formulário para preencher os campos do formulário */ document.frmdados.txtnomelivro.value="usando Visual Basic 6"; document.frmdados.txtautorlivro.value="brian Siler & Jeff Spotts"; document.frmoutrosdados.txtisbnlivro.value="857333482-4"; document.frmoutrosdados.txtanolivro.value="1998"; function ValCriSite( ) /* utiliza o array forms e o nome de cada elemento do formulário para preencher os campos do formulário */ document.forms[0].txtnomelivro.value="criando Sites Arrasadores na Web"; document.forms[0].txtautorlivro.value="david Siegel"; document.forms[1].txtisbnlivro.value="857354021-4"; document.forms[1].txtanolivro.value="1996"; function ValASP30( ) /* utiliza o array forms e o array elements para preencher os campos do formulário */ document.forms[0].elements[0].value="aprenda em 21 dias - ASP Active Server Pages 3.0"; document.forms[0].elements[1].value="scott Mitchell & James Atkinson"; document.forms[1].elements[0].value="85-352-0611-6"; document.forms[1].elements[1].value="2000"; function ValProjWeb( ) /* utiliza o array forms e o array elements para preencher os campos do formulário */ document.forms[0].elements[0].value="projetando Websites"; document.forms[0].elements[1].value="jakob Nielsen"; document.forms[1].elements[0].value="85-352-0656-6"; document.forms[1].elements[1].value="2000"; </script> </head> E Nemer 12 / 27
<body> <h2> Exemplo de implementação e tratamento de 2 formulários - ex2form.htm </h2> <TABLE border=1 cellpadding=1 cellspacing=1 > <TR> <TD> <form name="frmdados" action="tratalivro.asp" method="post" onsubmit="valfrmdados( );" onreset="limpoudados();"> <h2>livros recomendados </h2> Nome : <input type="text" name="txtnomelivro" size=45> Autor : <input type="text" name="txtautorlivro" size=30 > <br> <!--utiliza um botão submit para enviar os dados do formulário--> <input type="submit" value="envia dados" id=submit1 name=submit1> <!--limpa os campos do formulário--> <input type="reset" name="reset1"> </form> </TD></TR> <TR> <TD> <h2> Outros dados </h2> <form name="frmoutrosdados" action="dadoslivro.asp" method="post" onreset="limpoudados();"> ISBN : <input type="text" name="txtisbnlivro" size=45> Ano : <input type="text" name="txtanolivro" size=30> <br> <!--Utiliza um botão comum para enviar os dados do formulário--> <input type="button" value="envia dados" id=submit2 name=submit2 onclick="enviaform2( );"> <!--limpa os campos do formulário--> <input type="reset" name="reset2"> </form> </TD></TR></TABLE></P> <h2> Preenchimento automático de dados dos livros mais importantes </h2> <input type="button" onclick="valdefault( );" name="cmdvaldefault" value="javascript"> <input type="button" onclick="valvb6( );" name="cmdvalvb6" value="visual Basic 6"> <input type="button" onclick="valcrisite( );" name="cmdvalcrisite" value="criando Sites Arrasadores"> <input type="button" onclick="valasp30( );" name="cmdvalasp30" value="asp 3.0"> <input type="button" onclick="valprojweb( );" name="cmdvalprojweb" value="projetando Websites"> <hr> </body> </html> E Nemer 13 / 27
ii) Página asp para tratar dados de um dos formulários <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE> Página asp que trata os dados do formulário simples - tratadado.asp </TITLE> </HEAD> <BODY> <h2> Principais informações do livro </h2> <% Dim nome Dim autor nome = Request.Form("txtNomeLivro") autor = Request.Form("txtAutorLivro") %> Response.Write ("Nome do livro =" & nome & "<br>") Response.Write ("Autor do livro = " & autor) </BODY> </HTML> iii) Página asp para tratar dados do outro formulário <HTML> <HEAD> <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0"> <TITLE> Página asp para tratar das preferências - tratapref.asp </TITLE> </HEAD> <BODY> <h2> Outros dados do livro </h2> <% Dim isbn Dim ano isbn = Request.Form("txtISBNLivro") ano = Request.Form("txtAnoLivro") Response.Write ("ISBN do livro =" & isbn & "<br>") Response.Write ("Ano do livro = " & ano) %> </BODY> </HTML> E Nemer 14 / 27
E Nemer 15 / 27
Áreas de texto As áreas de texto são definidas com sua própria tag, <TEXTAREA> e são representadas pelo objeto textarea. Há uma diferença importante entre uma área de texto e um campo de texto: as áreas de texto permitem ao usuário inserir mais do que apenas uma linha de informações. Eis um exemplo de uma definição de área de texto: <TEXTAREA NAME= TEXT1 ROWS= 2 COLS= 70 > Este é o conteúdo de uma tag TEXTAREA. </TEXTAREA> A HTML acima define uma área de texto chamada text1, com 2 linhas e 70 colunas disponíveis para texto. No JavaScript, isso seria representado por um objeto área de texto chamado text1 sob o objeto form. O texto entre as tags <TEXTAREA> de abertura e de fechamento é utilizado como o valor inicial para a área de texto. Você pode incluir quebras de linha dentro do valor padrão. Trabalhando com texto em formulários Os objetos text e textarea também têm alguns métodos que você pode utilizar: o focus( ) configura o foco para o campo. Serve para posicionar o cursor no campo e tornar o campo atual; o blur( ) é o oposto; remove o foco co campo; o select( ) seleciona o texto no campo, apenas quando um usuário pode fazer com o mouse. Todo o texto é selecionado; não há como selecionar parte do texto. Você também pode utilizar handlers de evento para detectar quando o valor de um campo de texto se altera. Os objetos text e textarea suportam os seguintes handlers de evento; o O evento onfocus ocorre quando o campo de texto obtém o foco; o O evento de onblur ocorre quando o campo de texto perde o foco; o o evento de onchange ocorre quando o usuário altera o texto no campo e então move-se para fora dele; o O evento de onselect ocorre quando o usuário seleciona alguns ou todo o texto no campo. Infelizmente, não há nenhuma maneira de dizer exatamente qual parte do texto foi selecionada. (Se o texto foi selecionado com o método select( ) descrito acima, esse evento não é acionado.) E Nemer 16 / 27
Se utilizado, esses handlers de evento deveriam ser incluídos na declaração de tag <INPUT>. Por exemplo, o campo seguinte é de um texto incluindo um evento onchange que exibe um alerta: <INPUT TYPE= TEXT NAME= TEXT1 onchange= window.alert(çhanged. );> Botões O tipo de elemento final de um formulário é um botão. Os botões utilizam a tag <INPUT> e podem ser de um destes três tipos: o type=sumbit é um botão Submit ou botão de enviar. Esse botão faz com que os dados nos campos de formulário sejam enviados para o script de CGI. o type=reset é um botão Reset ou botão de limpar. Esse botão configura todos os campos de formulário de volta para seus valores padrão ou em branco; o type=button é um botão genérico. Esse botão não desempenha nenhuma ação por conta própria, mas você pode atribuí-lo utilizando um handler de evento de JavaScript. Todos os três tipos de botões incluem um atributo NAME para identificar o botão e um VALUE que indica o texto para exibir na face do botão. Como exemplo, vamos definir um botão Submit com o nome sub1 e o valor Clique aqui : <INPUT TYPE= SUBMIT NAME= sub1 VALUE= Clique aqui > Se o usuário pressionar um botão Submit ou Reset, você pode detecta-lo com os handlers de evento onsubmit ou onreset, descritos anteriormente. Para botões genéricos, você pode utilizar um handler de evento onclick. Caixas de seleção Uma caixa de seleção é um elemento de formulário que alterna entre os estados ativado e desativado quando se clica nela, o que é útil para indicar escolhas do tipo Sim ou Não em seus formulários. Você pode utilizar a tag <INPUT> para definir uma caixa de seleção, conforme mostrado no exemplo seguinte. <INPUT TYPE= CHECKBOX NAME= check1 VALUE= Yes CHECKED> E Nemer 17 / 27
O exemplo acima atribui um nome ao elemento de formulário. O atributo VALUE atribui um significado à caixa de seleção; isso é um valor que é retornado se a caixa estiver ativada. O valor padrão é on. O atributo CHECKED pode ser incluído para tornar a caixa ativada por padrão. Uma caixa de seleção é simples: ela tem somente dois estados. Contudo, o objeto caixa de seleção no JavaScript tem quatro propriedades diferentes: o name é o nome da caixa de seleção e também do nome de objeto; o value é o valor verdadeiro para a caixa de seleção normalmente indicado por on. Esse valor é utilizado pelo servidor para indicar que a caixa de seleção foi ativada. No JavaScript, você deve utilizar a propriedade checked.; o defaultchecked é o status padrão da caixa de seleção, atribuído pelo atributo CHECKED; o checked é o valor atual. Esse é um valor booleano: true para ativado e false para desativado. Para manipular a caixa de seleção ou utilizar seu valor, você utiliza o atributo checked. Por exemplo, essa instrução associa uma caixa de seleção chamada same ao formulário order: document.order.same.checked = true; A caixa de seleção tem um único método, click( ). Esse método simula um clique na caixa. Ela também tem um único evento, onclick, que ocorre sempre que a caixa de seleção é clicada. Isso ocorre se a caixa foi ativada ou desativada, de modo que você precisará examinar a propriedade checked para ver o que aconteceu. Botões de opção Outro elemento para decisões é o botão de opção, utilizando o tipo RADIO da tag <INPUT>. Os botões de opção são semelhantes a caixas de seleção, mas existem em grupos e somente um botão pode ser ativado em cada grupo. Eles são utilizados para múltipla escolha ou entradas do tipo um em muitos, como mostrado no exemplo abaixo: <INPUT TYPE= RADIO NAME= radio1 VALUE= Option1 CHECKED> Opção 1 <INPUT TYPE= RADIO NAME= radio1 VALUE= Option2 CHECKED> Opção 2 <INPUT TYPE= RADIO NAME= radio1 VALUE= Option3 CHECKED> Opção 3 E Nemer 18 / 27
As instruções acima definem um grupo de três botões de opção. O atributo NAME é o mesmo para todos os três (o que torna um grupo). O atributo VALUE é o valor passado para um script ou programa de CGI para indicar qual botão foi selecionado certifique-se de atribuir um valor diferente para cada botão. No que diz respeito a um script, os botões de opção são semelhantes a caixas de seleção, exceto que um grupo inteiro deles compartilha um único nome e um único objeto. Você pode referir-se às seguintes propriedades do objeto radio: o name é o nome comum para os botões de opção; o length é o número de botões de opção no grupo. Para acessar os botões individuais, você trata o objeto radio como um array. Os botões são indexados, iniciando com 0 (zero). Cada botão individual tem as seguintes propriedades: o value é o valor atribuído ao botão (Isso é utilizado pelo servidor.); o defaultchecked indica o valor do atributo CHECKED e o estado padrão do botão; o checked é o estado atual. Por exemplo, você pode ativar o primeiro botão de opção no grupo radio1 no formulário form1 com esta instrução: document.form1.radio[0].checked = true; Entretanto, se fizer isso, certifique-se de configurar os outros valores para false quando necessário. Isso não é feito automaticamente. Você pode utilizar o método click para fazer essas duas coisas em um único passo; Como um caixa de seleção, os botões de opção têm um método click( ) e um handler de evento onclick. Cada botão de opção pode ter uma instrução separada para esse evento. Listas drop-down Um último elemento de formulário também é útil para seleções de múltipla escolha. A tag HTML <SELECT> é utilizada para definir uma lista de seleção ou uma lista drop-down de itens de texto. O seguinte é um exemplo de uma lista de seleção: <SELECT NAME= select1 SIZE=40> <OPTION VALUE= choice1 SELECTED>Esta é a primeira escolha. <OPTION VALUE= choice2 >Esta é a segunda escolha. <OPTION VALUE= choice3>esta é a terceira escolha. </SELECT> E Nemer 19 / 27
Cada uma das tags OPTION define uma das possíveis escolhas. O atributo VALUE é o nome que é retornado para o programa e o texto fora da tag OPTION é exibido como o texto da opção. Um atributo opcional para a tag SELECT, MULTIPLE pode ser especificado para permitir que múltiplos itens sejam selecionados. Os navegadores normalmente exibem uma única seleção SELECT como uma lista dropdown e uma lista de seleção múltipla como uma lista rolável. O objeto para listas de seleção é o objeto select. Esse objeto tem as seguintes propriedades: o name é o nome da lista de seleção; o length é o número de opções na lista; o options é o array de opções. Cada opção selecionável tem uma entrada nesse array; o selectedindex retorna o valor de índice do item atualmente selecionado. Você pode utilizar isso para ativar o valor facilmente. Em uma lista de seleção múltipla, indica o primeiro item selecionado. O array options tem uma única propriedade própria, length, que indica o número de seleções. Além disso, cada item no array options tem as seguintes propriedades: o index é o índice no array; o defaultselected é o estado atual da opção. Você pode selecionar múltiplas opções se o atributo MULTIPLE estiver incluído na tag <SELECT>; o name é o valor do NAME. Esse atributo é utilizado pelo servidor; o text é o texto que é exibido na opção. No Netscape 3.0 ou superior, você pode alterar esse valor. O objeto select tem dois métodos, blur ( ) e focus ( ), que servem para os mesmos fins que os métodos correspondentes em objetos text. Os handlers de evento são onblur, onfocus e onchange, também semelhantes a outros objetos. A leitura do valor de um item selecionado é um processo em duas etapas. Você primeiro utiliza a propriedade selectedindex, depois utiliza a propriedade valur para localizar o valor da escolha selecionada, como mostrado no exemplo abaixo: ind = document.navform.choice.selectedindex; val = document.navform.choice.options[ind].value; O exemplo acima utiliza a variável ind para armazenar o índice selecionado, então atribui a variável val ao valor da escolha selecionada. O exemplo abaixo utiliza vários dos elementos e propriedades mencionadas até o momento. E Nemer 20 / 27
i) Página html com um formulário com vários elementos diferentes <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft FrontPage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title> Exemplo de formulário com outros elementos - exformelementos.htm </title> <script language="javascript"> function helpareadetexto() status="entre com observações a respeito dos seus esportes preferidos."; function helpnome() status="entre com seu nome completo."; </script> </head> <body> <h2> Exemplo de formulário com outros elementos - exformelementos.htm </h2> <form name="frmprincipal" action="tratainf.asp" method="post"> <b>dados pessoais </b><br> Nome: <input name="txtnome" onfocus="helpnome();"> Profissão: <input name="txtprof" > <hr> <b>observação: </b><textarea cols="20" name="areaobserv" rows="4" onfocus="helpareadetexto();"> </TEXTAREA> <b>estado</b><select name="selestados" size=5> <option value="rio de Janeiro" selected>rj <option value="são Paulo">SP <option value="minas Gerais">MG </select> <hr><b> Seus esportes preferidos são : </b><br> Futebol :<input type="checkbox" name="chkfutebol" value="1" checked> Volei :<input type="checkbox" name="chkvolei" value="1"> Natação :<input type="checkbox" name="chknatacao" value="1"> Tenis :<input type="checkbox" name="chktenis" value="1"> Basquete :<input type="checkbox" name="chkbasquete" value="1"> <hr> E Nemer 21 / 27