Obtendo dados com formulários

Tamanho: px
Começar a partir da página:

Download "Obtendo dados com formulários"

Transcrição

1 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

2 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

3 <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

4 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: E Nemer 4 / 27

5 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

6 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

7 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

8 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

9 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

10 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

11 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=" "; document.frmoutrosdados.txtanolivro.value="1999"; E Nemer 11 / 27

12 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=" "; 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=" "; 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=" "; 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=" "; document.forms[1].elements[1].value="2000"; </script> </head> E Nemer 12 / 27

13 <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

14 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

15 E Nemer 15 / 27

16 Á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

17 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

18 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

19 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

20 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

21 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

indica o nome do campo pelo qual podemos acessar.

indica o nome do campo pelo qual podemos acessar. Formulários Em geral Com o Javascript, os formulários Html tomam outra dimensão. Não esqueça que em Javascript, podemos acessar cada elemento de um formulário para, por exemplo, ler ou escrever um valor,

Leia mais

INTRODUÇÃO AO DESENVOLVIMENTO WEB

INTRODUÇÃO AO DESENVOLVIMENTO WEB INTRODUÇÃO AO DESENVOLVIMENTO WEB PROFª. M.Sc. JULIANA H Q BENACCHIO Formulários Os formulários em HTML são usados para selecionar diferentes tipos de entradas do usuário. Um formulário é uma área que

Leia mais

HTML - 7. Vitor Vaz da Silva Paula Graça

HTML - 7. Vitor Vaz da Silva Paula Graça HTML - 7 Vitor Vaz da Silva Paula Graça 1 Formulários Os formulários forms no HTML, são utilizados para a introdução de dados de uma determinada aplicação Os programas JavaScript têm como um dos seus maiores

Leia mais

Programação para Internet I

Programação para Internet I Programação para Internet I Aulas 09 e 10 Fernando F. Costa nando@fimes.edu.br Formulários O formulário representa o modo mais importante de interatividade que a linguagem HTML oferece. Um formulário pode

Leia mais

FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT)

FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) FORMULÁRIOS HTML (FORMS) E ENTRADAS DE DADOS (INPUT) Formulários (FORMS): Um formulário é uma área que pode conter elementos de formulário. Elementos de formulário são elementos que permitem ao usuário

Leia mais

Os componentes de um formulário são: Form, Input, Select e AreaText

Os componentes de um formulário são: Form, Input, Select e AreaText HTML Formulário O elemento FORM, da HTML, é o responsável por prover documentos interativos no ambiente WWW de forma que uma pagina web exibida a um usuário possa submeter um conjunto de dados, informados

Leia mais

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário

Aula 05 HTML FORMULÁRIOS Prof. Daniela Pires Sumário Sumário FORMULÁRIO EM HTML... 2 FORM... 2 ACTION... 2 METHOD... 2 INPUT... 2 INPUT TYPE TEXT... 2 INPUT TYPE PASSWORD... 2 CHECKBOX - Múltipla escolha... 4 RADIO - Escolha única... 4 Botões de ação...

Leia mais

Conteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web

Conteúdo Dinâmico. Introdução. Interação Browser x Servidor Web. Interação Browser x Servidor Web Introdução Formulários rios & Conteúdo Dinâmico Mário Antonio Meireles Teixeira Dept o. de Informática - UFMA A Web surgiu inicialmente como uma nova forma de comunicação de informações, fazendo uso de

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir HTML - Formulários @wre2008 1 Sumário Formulários HTML @wre2008 2 Formulários: Muitos elementos de um formulário html são definidos pela tag . Cada tipo de elemento

Leia mais

COMO FUNCIONA UM FORMULÁRIO

COMO FUNCIONA UM FORMULÁRIO FORMULÁRIOS Constitui-se numa das formas de a máquina cliente enviar informações para que um programa no servidor receba estes dados, processe-os e devolva uma resposta ao usuário, por meio do navegador,

Leia mais

Ferramentas para Multimídia e Internet - 1486

Ferramentas para Multimídia e Internet - 1486 1 Ferramentas para Multimídia e Internet - 1486 HTML BÁSICO: O que é uma página WEB? Uma página WEB, também conhecida pelo termo inglês webpage, é uma "página" na World Wide Web, geralmente em formato

Leia mais

O código acima descreve o formulário com uma caixa de texto e dois botões

O código acima descreve o formulário com uma caixa de texto e dois botões Formulários Formulários permitem que os usuários interajam com um servidor Web passando informações. Assim, através da Web, se pode ler e gravar informações em Banco de Dados, gerando enormes possibilidades

Leia mais

Formulários. Objeto Form

Formulários. Objeto Form Capítulo 10 Formulários 10 Formulários OS COMPONENTES DE FORMULÁRIO SÃO OS OBJETOS HTML mais utilizados em JavaScript. Por componentes de formulário nos referimos a qualquer campo de entrada de dados dentro

Leia mais

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web

ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web RNP REDE NACIONAL DE PESQUISA Centro Regional de Brasília CR/DF ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia3.zip dezembro 1995 Tutorial - Autoria em World Wide Web Parte III - Hypertext

Leia mais

TECNOLOGIAS WEB AULA 7

TECNOLOGIAS WEB AULA 7 TECNOLOGIAS WEB AULA 7 PROF. RAFAEL DIAS RIBEIRO @RIBEIRORD Objetivos: Apresentar as principais tags utilizadas na construção de formulários em HTML. Compreender as principais estruturas formadas com as

Leia mais

Formulário (Send & Recieve) Prof. Celso H. Masotti

Formulário (Send & Recieve) Prof. Celso H. Masotti Formulário (Send & Recieve) Prof. Celso H. Masotti O Send e o Recieve A partir desse momento os exercícios serão realizados com dois arquivos, um de envio de dados (send) e o que recebe esse dados (recieve)

Leia mais

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes

Desenvolvimento Web XHTML Formulários. Prof. Bruno E. G. Gomes Desenvolvimento Web XHTML Formulários Prof. Bruno E. G. Gomes 2014 Introdução Um recurso bastante utilizado no desenvolvimento Web é o envio de dados de uma página para o servidor quando fornecemos informações,

Leia mais

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva

Mini-curso de PHP. Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Mini-curso de PHP Aulas ministradas por: André Luis de Paula Arthur Kalsing Diego Silva Aula 1 Breve introdução de HTML, Conceitos básicos de PHP, Sintaxe, Separador de instruções e Comentários (Cap 1

Leia mais

Exercícios Práticos de HTML e JavaScript.

Exercícios Práticos de HTML e JavaScript. <FORM ACTION=mailto:teste@gmail.com METHOD=POST ENCTYPE=text/plain NAME=cadastro> Exercícios Práticos de HTML e JavaScript Exercício 1: Formulário Padrão HTML SEM JavaScript

Leia mais

JavaScript (Funções, Eventos e Manipulação de Formulários)

JavaScript (Funções, Eventos e Manipulação de Formulários) Linguagem de Programação para Web JavaScript (Funções, Eventos e Manipulação de Formulários) Prof. Mauro Lopes 1-31 23 Objetivos Iremos avançar um pouco mais em nosso estudo sobre o JavaScript. Iremos

Leia mais

Utilizando Janelas e Frames

Utilizando Janelas e Frames Utilizando Janelas e Frames Aprenderemos agora algumas técnicas mais específicas para fazer o JavaScript trabalhar com várias partes das páginas e navegadores da Web. Controlando janelas com objetos Já

Leia mais

Conteúdo. DHTML tópicos Hamilton Lima - 2002-2004

Conteúdo. DHTML tópicos Hamilton Lima - 2002-2004 DHTML tópicos Hamilton Lima - 2002-2004 Conteúdo 1. meu primeiro script... 2 2. DOM Document Object Model...2 3. tipo de execução de scripts...2 4. resposta a um evento... 3 5. tipos de dados, variaveis

Leia mais

PROGRAMAÇÃO WEB DO LADO DO CLIENTE

PROGRAMAÇÃO WEB DO LADO DO CLIENTE PROGRAMAÇÃO WEB DO LADO DO CLIENTE FORMULÁRIO Na linguagem HTML é permitido que o usuário interaja com o servidor através de formulários ligados a scripts desenvolvidos em linguagens como PHP, Servlets,

Leia mais

HTML -- Criação de Home Page

HTML -- Criação de Home Page PPáággi innaa 1 LISTAS Na linguagem HTML existem elementos específicos para a criação de listas, que podem ser listas ordenadas (OL), listas sem ordenação (UL), ou listas de definição (DL). Um detalhe

Leia mais

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br

Linguagem de. Aula 06. Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Linguagem de Programação IV -PHP Aula 06 Profa Cristiane Koehler cristiane.koehler@canoas.ifrs.edu.br Criação de Formulários o Um formulário consiste em uma série de campos que são preenchidos pelo usuário

Leia mais

Formulários em HTML - O que são e para que servem

Formulários em HTML - O que são e para que servem Formulários em HTML - O que são e para que servem A tag - Os atributos action e method A primeira coisa que iremos fazer é usar a tag para podermos usarmos formulários. Antes de entrarmos

Leia mais

Desenvolvimento de Aplicações para Internet

Desenvolvimento de Aplicações para Internet Desenvolvimento de Aplicações para Internet Aula 03 Celso Olivete Júnior olivete@fct.unesp.br Na aula de hoje... Javascript: introdução, operadores lógicos e matemáticos, comandos condicionais. Javascript:

Leia mais

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento.

0,5 pelo negrito das palavras ID, Nome, E-mail e Analisar em outro momento. IFES - Campus Cachoeiro de Itapemirim-ES Curso Técnico em Informática Disciplina: Programação Web Professor: Flávio Izo e Rafael Vargas Data: 07/04/2015 Aluno: GABARITO Valor: 12,5 Conteúdo: HTML + Formulários

Leia mais

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário

Introdução. HyperText Markup Language HTML. Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário. Fluxo do Formulário Introdução HyperText Markup Language HTML Formulário Prof. Luis Nícolas de Amorim Trigo nicolas.trigo@ifsertao-pe.edu.br http://professor.ifsertao-pe.edu.br/nicolas.trigo/ O usuário interage com os serviços

Leia mais

SIMULADOS & TUTORIAIS

SIMULADOS & TUTORIAIS SIMULADOS & TUTORIAIS TUTORIAIS HTML Como criar formulários em HTML Copyright 2013 Todos os Direitos Reservados Jorge Eider F. da Silva Proibida a reprodução deste documento no todo ou em parte por quaisquer

Leia mais

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet

HTML: Listas, Tabelas e Formulários CST Sistemas para Internet HTML: Listas, Tabelas e Formulários CST Sistemas para Internet Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Listas Listas de itens são bastante

Leia mais

Scriptlets e Formulários

Scriptlets e Formulários 2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1 Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE,

Leia mais

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Formulários e JavaScript Como visto anteriormente, JavaScript pode ser usada para

Leia mais

Mais sobre uso de formulários Site sem Ajax

Mais sobre uso de formulários Site sem Ajax Mais sobre uso de formulários Site sem Ajax Página com busca padrão 1 Página com o resultado da busca carregada no local da anterior (o formulário está vazio) Site com Ajax 2 Site usando Ajax para preencher

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir Linguagem HTML Listas e Formulários @wre2008 1 Sumário Listas Revisão da tag Criação de formulários HTML @wre2008 2 Listas As listas são utilizadas para citar, numerar

Leia mais

JavaScript: Validação de Formulários. Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com

JavaScript: Validação de Formulários. Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com JavaScript: Validação de Formulários Prof. Ivanilton Polato ipolato@utfpr.edu.br ipolato@gmail.com Validação de Formulários Um dos usos mais frequentes do JS é a validação de formulários. Além de garantir

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web HTML HyperText Markup Language XTML extensible HyperText Markup Language Elementos da Seção do Corpo Tabelas Formulários Professor Alan Cleber Borim www.alanborim.com.br Índice.

Leia mais

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web;

HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; HTML Introdução Introdução ao HTML HTML (Hyper Text Markup Language) É a linguagem com que se escrevem as páginas web; É uma linguagem de hipertexto; Permite escrever texto de forma estruturada, que está

Leia mais

Guia do RepositorioDocumento

Guia do RepositorioDocumento Módulo: RepositorioDocumento.Cls_Repositorio Versão: 1.0.0 Data: 16/05/2003 Analista: João Augusto de Moura DBA: Maria Cristina de Oliveira Zimmermann Coordenador: Alex Albert Henchel Gerente Operacional:

Leia mais

Web Design Aula 09: Formulários

Web Design Aula 09: Formulários Web Design Aula 09: Formulários Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Tag ... Tag Tag ... Rádio Checkbox Atributo name Form Um

Leia mais

Programação Web Aula 5 - Javascript Parte 2 - Javascript e HTML

Programação Web Aula 5 - Javascript Parte 2 - Javascript e HTML Programação Web Aula 5 - Javascript Parte 2 - Javascript e HTML Departamento de Informática UFPR 17 de Março de 2014 1 Javascript e HTML 2 Ambiente Hierarquia Propriedades de Document 3 DOM Denição Hierarquia

Leia mais

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique.

Lista de Revisão. 3. Analise a afirmativa a seguir como verdadeira ou falsa e justifique. Lista de Revisão 1. Nos sistemas web, geralmente os usuários apresentam dois problemas típicos, a desorientação e a sobrecarga cognitiva. Discorra sobre esses problemas. 2. Apresente as principais diferenças

Leia mais

Programando em PHP. Conceitos Básicos

Programando em PHP. Conceitos Básicos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Conceitos Básicos Todo o escopo deste estudo estará voltado para a criação de sites com o uso dos diversos recursos de programação web

Leia mais

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros.

Formulários. Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. Formulários Permite ao usuário enviar informações por meio da página, em forma de pesquisa, mala direta, compra eletrônica e outros. O formulário depende de outros programas no servidor, para receber e

Leia mais

O que é o Javascript?

O que é o Javascript? O que é o Javascript? JavaScript é uma linguagem para criação de Home-Pages. Funções escritas em JavaScript podem ser embutidas dentro de seu documento HTML. Com JavaScript você tem muitas possibilidades

Leia mais

1-03/11/03 INTRODUÇÃO

1-03/11/03 INTRODUÇÃO 1-03/11/03 INTRODUÇÃO JavaScript é uma linguagem que permite injetar lógica em páginas escritas em HTML (HiperText Mark-up Language). As páginas HTML podem ser escritas utilizando-se editores de texto,

Leia mais

Criando um script simples

Criando um script simples Criando um script simples As ferramentas de script Diferente de muitas linguagens de programação, você não precisará de quaisquer softwares especiais para criar scripts de JavaScript. A primeira coisa

Leia mais

Tecnologias para Web Design

Tecnologias para Web Design Tecnologias para Javascript e DOM Introdução à Scripts Um script do lado cliente é um programa que acompanha um documento HTML Pode estar incluído no próprio documento embutido ou acompanha-lo num arquivo

Leia mais

Programação web Prof. Wladimir

Programação web Prof. Wladimir Programação web Prof. Wladimir Linguagem PHP Cookie e Sessão @wre2008 1 Sumário Header; Cookie; Sessão; Exemplos. @wre2008 2 Header Esta função permite que um script php redirecione para outra página.

Leia mais

Programação Web Prof. Wladimir

Programação Web Prof. Wladimir Programação Web Prof. Wladimir Linguagem PHP @wre2008 1 Sumário PHP: Tipos de dados; Manipulação de dados; Utilizando formulário. @wre2008 2 Tipos de dados As variáveis são declaradas no momento de sua

Leia mais

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).

HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.). HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a

Leia mais

Basicamente iremos precisar de uma base de dados na qual iremos armazenar os registros feitos pelos vistantes: Vamos armazenar os seguintes dados:

Basicamente iremos precisar de uma base de dados na qual iremos armazenar os registros feitos pelos vistantes: Vamos armazenar os seguintes dados: Livro de Visitas Basicamente iremos precisar de uma base de dados na qual iremos armazenar os registros feitos pelos vistantes: Vamos armazenar os seguintes dados: ID nome email mensagem data O código

Leia mais

7. Formulários em XHTML

7. Formulários em XHTML Programação para Internet I 7. Formulários em XHTML Nuno Miguel Gil Fonseca nuno.fonseca@estgoh.ipc.pt Os formulários constituem uma das principais formas de interacção entre clientes e servidores. São

Leia mais

Tecnologias para apresentação de dados - HTML. Aécio Costa

Tecnologias para apresentação de dados - HTML. Aécio Costa Tecnologias para apresentação de dados - HTML Aécio Costa Apresentação de Dados na Web Tecnologias client-side HTML CSS JavaScript HyperText Markup Language Uma linguagem de marcação utilizada para produzir

Leia mais

Formulários HTML. Envio de Informação para o servidor

Formulários HTML. Envio de Informação para o servidor Programação Na Web Formulários HTML Envio de Informação para o servidor 1 António Gonçalves Agenda Envio de dados através de formulários A Marca FORM Controle para Text Botões tipo Push Botões Check boxes

Leia mais

Desenvolvimento de Sistemas Web Prof. Leandro Roberto. Aula 18 JavaScript: Eventos MySQL PHP (insert, update e delete)

Desenvolvimento de Sistemas Web Prof. Leandro Roberto. Aula 18 JavaScript: Eventos MySQL PHP (insert, update e delete) Desenvolvimento de Sistemas Web Prof. Leandro Roberto Aula 18 JavaScript: Eventos MySQL PHP (insert, update e delete) JavaScript Eventos Alguns eventos de uma página HTML podem ser interceptados e programados

Leia mais

Programação WEB II. Formulários Em PHP. Métodos GET e POST progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza

Programação WEB II. Formulários Em PHP. Métodos GET e POST progweb2@thiagomiranda.net. Thiago Miranda dos Santos Souza Formulários Em PHP Métodos GET e POST progweb2@thiagomiranda.net Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net Objetivos Entender o funcionamento

Leia mais

Prof Evandro Manara Miletto. parte 2

Prof Evandro Manara Miletto. parte 2 Prof Evandro Manara Miletto parte 2 Sumário Estruturas de Controle Eventos Estruturas de controle características Estruturas de controle (ou condicionais) são executadas caso um teste seja atendido Permite

Leia mais

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL

PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL PÓS-GRADUAÇÃO EM MATEMÁTICA COMPUTACIONAL INFORMÁTICA INSTRUMENTAL Formulários HTML Aula 07: Formulários e Frames HTML Os formulários HTML são utilizados, geralmente, como entradas de dados prépreenchimento,

Leia mais

Universidade Federal do Espírito Santo CCA UFES. Centro de Ciências Agrárias CCA UFES Departamento de Computação. JavaScript

Universidade Federal do Espírito Santo CCA UFES. Centro de Ciências Agrárias CCA UFES Departamento de Computação. JavaScript Universidade Federal do Espírito Santo Centro de Ciências Agrárias CCA UFES Departamento de Computação Universidade Federal do Espírito Santo CCA UFES JavaScript Desenvolvimento de Sistemas para WEB Site:

Leia mais

www.coldfusionbrasil.com.br

www.coldfusionbrasil.com.br www.coldfusionbrasil.com.br 2000 TRABALHANDO COM E-MAILS 3 ENVIANDO E-MAILS COM CFMAIL 3 ENVIANDO E-MAIL BASEADO EM UM FORMULÁRIO 4 UTILIZANDO QUERY PARA ENVIAR E-MAILS 5 ENVIANDO E-MAIL PARA MÚLTIPLOS

Leia mais

Vamos criar nosso formulário, vou utilizar aqui como exemplo cinco campos para upload:

Vamos criar nosso formulário, vou utilizar aqui como exemplo cinco campos para upload: Upload de vários arquivos com PHP 22.856 visualizações 2 1 Fala pessoal, hoje irei ensinar a fazer upload de vários arquivos de uma vez, ou seja, ao invés de criar apenas um campo para o usuário selecionar

Leia mais

Ajax Asynchronous JavaScript and Xml

Ajax Asynchronous JavaScript and Xml Ajax Asynchronous JavaScript and Xml Ajax permite construir aplicações Web mais interactivas, responsivas, e fáceis de usar que aplicações Web tradicionais. Numa aplicação Web tradicional quando se prime

Leia mais

Java Script Pág: 1. Índice

Java Script Pág: 1. Índice Java Script Pág: 1 Índice Índice... 1 Introdução ao JavaScript Básico... 2 Configurações... 2 Usando o Java Script.... 2 Comandos: script language - alert - /script... 3 Variáveis... 4 Regras para criar

Leia mais

Tecnologias para apresentação de dados - Java Script. Aécio Costa

Tecnologias para apresentação de dados - Java Script. Aécio Costa Tecnologias para apresentação de dados - Java Script Aécio Costa Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem

Leia mais

Guia de Consulta Rápida. PHP com XML. Juliano Niederauer. Terceira Edição. Novatec

Guia de Consulta Rápida. PHP com XML. Juliano Niederauer. Terceira Edição. Novatec Guia de Consulta Rápida PHP com XML Juliano Niederauer Terceira Edição Novatec Copyright 2002 da Novatec Editora Ltda. Todos os direitos reservados e protegidos pela Lei 9.610 de 19/02/1998. É proibida

Leia mais

Capítulo 6. Delphi x Web x WebBroker. Primeiro Exemplo (Hello World)

Capítulo 6. Delphi x Web x WebBroker. Primeiro Exemplo (Hello World) 66 Delphi 7 Internet e Banco de Dados Capítulo 6 Delphi x Web x WebBroker Para entender como funcionam as aplicações servidoras desenvolvidas em Delphi, nada melhor do que aprender na prática. A cada exercício

Leia mais

DESENVOLVIMENTO WEB I - 7122

DESENVOLVIMENTO WEB I - 7122 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

6.2 - Formulários: form ... form action method POST GET exceto outros formulários form

6.2 - Formulários: form <form action=url_de_script method=método>...</form> form action method POST GET exceto outros formulários form 6.2 - Formulários: Um dos recursos mais fascinantes da linguagem HTML é a possibilidade de criar formulários eletrônicos. Usando um formulário o usuário pode interagir com o servidor, enviando dados que

Leia mais

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN

INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN INSTITUTO FEDERAL DE EDUCAÇÃO, CIÊNCIA E TECNOLOGIA DO RN - IFRN APOSTILA: AUTORIA WEB PROFESSOR: ADDSON ARAÚJO DA COSTA SANTA CRUZ - RN Sumário 1. Introdução...1 2. Tags...1 3. HTML...1 4. Cabeça, Corpo

Leia mais

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos

mkdir /srv/www/default/html/calculadora/imagens mkdir /srv/www/default/html/calculadora/blocos Programando em PHP www.guilhermepontes.eti.br lgapontes@gmail.com Criando uma Calculadora Primeiramente deve se criar uma estrutura para armazenar os arquivos necessários para o funcionamento da calculadora.

Leia mais

3 HTML Tabelas, frames e formulário

3 HTML Tabelas, frames e formulário 3 HTML Tabelas, frames e formulário Vinicius A. de Souza va.vinicius@gmail.com São José dos Campos, 2011. 1 Sumário Desenvolvimento Web Tabelas...3 Principais atributos das tabelas...4 Principais atributos

Leia mais

As janelas do browser

As janelas do browser Capítulo 5 As janelas do browser 5 As janelas do browser A JANELA DO BROWSER é manipulável de várias formas através da linguagem JavaScript. Pode-se alterar dinamicamente várias de suas características

Leia mais

Formulários HTML e Introdução à Programação Web

Formulários HTML e Introdução à Programação Web Formulários Até agora tivemos uma boa visão da parte gráfica e de hipertexto do HTML. Agora vamos ver como o HTML pode ser usado para fazer parte efetiva em um programa. Dissemos que HTML não é uma linguagem

Leia mais

CAPITULO 5 COMANDO DE FLUXO IF

CAPITULO 5 COMANDO DE FLUXO IF CAPITULO 5 COMANDO DE FLUXO IF Sempre que for necessária a tomada de decisão dentro de um programa, você terá que utilizar um comando condicional, pois é por meio dele que o PHP decidirá que lógica deverá

Leia mais

Validação de formulários utilizando Javascript

Validação de formulários utilizando Javascript Validação de formulários utilizando Javascript A validação de formulários é um dos usos mais comuns na programação Javascript. A validação de dados por meio da programação Javascript é muito fácil e rápida

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web JavaScript Validação de Formulários Profª MSc. Elizabete Munzlinger www.elizabete.com.br JavaScript Validação de Formulários Índice 1 VALIDAÇÃO DE FORMULÁRIOS... 2 Para validar

Leia mais

LINGUAGEM DE PROGRAMAÇÃO WEB

LINGUAGEM DE PROGRAMAÇÃO WEB LINGUAGEM DE PROGRAMAÇÃO WEB GABRIELA TREVISAN Formulários e Aula 3 Relembrando HTML 5 Tag Form o Utilizada para marcar a região do formulário. o Os atributos mais importantes são o method e o action.

Leia mais

HTML: Formulários Programação de Servidores

HTML: Formulários Programação de Servidores HTML: Formulários Programação de Servidores Marx Gomes Van der Linden ( Material baseado no original de Marcelo José Siqueira Coutinho de Almeida ) Exemplo 2 Criando um Formulário Um formulário é composto

Leia mais

Introdução a JavaScript

Introdução a JavaScript 1 Introdução a JavaScript A LINGUAGEM HTML HYPERTEXT MARKUP LANGUAGE, foi criada exclusivamente para definir a estrutura de uma página. Esforços para usar HTML como linguagem de formatação de página, visando

Leia mais

Apostila sobre Java Script

Apostila sobre Java Script Apostila sobre Java Script 1 Java Script Básico... 3 1. Introdução... 3 1.1 O que é Java Script?... 3 1.2 Qual é a diferença entre Java e JavaScript?... 3 1.3 Um pequeno exemplo do uso de scripts... 4

Leia mais

Ajax Asynchronous JavaScript and Xml

Ajax Asynchronous JavaScript and Xml Ajax Asynchronous JavaScript and Xml Ajax permite construir aplicações Web mais interativas, responsivas, e fáceis de usar que aplicações Web tradicionais. Numa aplicação Web tradicional quando se prime

Leia mais

Introdução à Tecnologia Web

Introdução à Tecnologia Web Introdução à Tecnologia Web JavaScript Sintaxe da Linguagem: Eventos Profª MSc. Elizabete Munzlinger www.elizabete.com.br JavaScript Eventos Índice 1 Eventos JavaScript... 2 a) Relacionados a Janela...

Leia mais

O código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso de navegadores antigos que não reconhecem a linguagem.

O código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso de navegadores antigos que não reconhecem a linguagem. 1 - O que é JAVASCRIPT? É uma linguagem de script orientada a objetos, usada para aumentar a interatividade de páginas Web. O JavaScript foi introduzido pela Netscape em seu navegador 2.0 e posteriormente

Leia mais

DWEB. Design para Web. HTML5 - Marcação de formulário. Curso Superior de Tecnologia em Design Gráfico

DWEB. Design para Web. HTML5 - Marcação de formulário. Curso Superior de Tecnologia em Design Gráfico DWEB Design para Web Curso Superior de Tecnologia em Design Gráfico HTML5 - Marcação de formulário E não vos conformeis com este século, mas transformai-vos pela renovação da vossa mente, para que experimenteis

Leia mais

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com

TECNOLOGIAS WEB. Unidade 2 Introdução a Construção de Páginas Estáticas. Luiz Leão luizleao@gmail.com http://luizleao.com Luiz Leão luizleao@gmail.com http://luizleao.com CONTEÚDO PROGRAMÁTICO DESTA UNIDADE HTML TAG S HTML LINGUAGEM HTML Hypertext Markup Language Interpretada pelo navegador Não linearidade da informação Formatação

Leia mais

4. A Linguagem JavaScript

4. A Linguagem JavaScript 4. A Linguagem JavaScript! A linguagem XHTML, por não ser uma linguagem de programação e sim uma linguagem de marcação, não permite interação entre o usuário e a página, além de clicar em um link, fazendo

Leia mais

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont

APOSTILA. Curso de HTML com PHP HTML. Pablo Dapont APOSTILA Curso de HTML com PHP HTML Pablo Dapont PET Computação - sala 202 Prédio 43424 ( prédio dos laboratórios ) Instituto de Informática - UFRGS email : pet@inf.ufrgs.br Av. Bento Gonçalves, 9500 bloco

Leia mais

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos.

HTML Curso Básico HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. HTML CURSO BÁSICO Aprenda os conceitos iniciais de HTML em alguns minutos. 1 Índice 1 - INTRODUÇÃO 3 2 - TAGS 3 3 - EDITORES 3 4 - SALVANDO UMA PAGINA HTML 3 5 - INICIANDO UMA PÁGINA 3 6 - CONSTRUINDO

Leia mais

Primeiro exemplo de uso de páginas JSP

Primeiro exemplo de uso de páginas JSP Primeiro exemplo de uso de páginas JSP Crie um arquivo html com o nome: index, e digite o código abaixo no Eclipse. Salve no seguinte diretório: C:\apache-tomcat-6.0.33\webapps\ROOT\Prog1\ Voces podem

Leia mais

HTML. Sessão 8 HTML. Criação de Páginas WEB. Formulários

HTML. Sessão 8 HTML. Criação de Páginas WEB. Formulários HTML Sessão 8 HTML Falta ver de que forma podemos trocar informações com nosso visitante. Este aspecto é primordial para a grande quantidade de acções que se podem realizar : Comprar um artigo, preencher

Leia mais

Os objetivos indicados aplicam-se a duas linguagens de programação: C e PHP

Os objetivos indicados aplicam-se a duas linguagens de programação: C e PHP AGRUPAMENTO DE ESCOLAS DE SANTA COMBA DÃO CURSO PROFISSIONAL DE TÉCNICO DE GESTÃO E PROGRAMAÇÃO DE SISTEMAS INFORMÁTICOS 2012-2015 PROGRAMAÇÃO E SISTEMAS DE INFORMAÇÃO MÓDULO 2 Mecanismos de Controlo de

Leia mais

Lista de operadores de comparação - > Maior que - < Menor que - <= Menor ou igual a - >= Maior ou igual a - === Igual a -!

Lista de operadores de comparação - > Maior que - < Menor que - <= Menor ou igual a - >= Maior ou igual a - === Igual a -! Página1 Javascript JavaScript (JS) é uma linguagem de programação client side Funciona no navegador do usuário. É uma linguagem baseada em objetos. "Walmir".length; 6 Para que serve - fazer websites responder

Leia mais

Índice. 1 Introdução ao Javascript...1 1.1 HTML e Javascript...1 1.2 Resumo do capítulo...2

Índice. 1 Introdução ao Javascript...1 1.1 HTML e Javascript...1 1.2 Resumo do capítulo...2 Índice 1 Introdução ao Javascript...1 1.1 HTML e Javascript...1 1.2 Resumo do capítulo...2 2 Elementos da Linguagem...3 2.1 Variáveis...3 2.2 Tipos de dados...4 2.3 Operadores...4 2.4 Comparação...5 2.5

Leia mais

COBRANÇA SITE. Instruções de Instalação e Utilização. Manual Técnico do Desenvolvedor. Segunda via do Bloqueto Digital

COBRANÇA SITE. Instruções de Instalação e Utilização. Manual Técnico do Desenvolvedor. Segunda via do Bloqueto Digital COBRANÇA SITE Instruções de Instalação e Utilização Manual Técnico do Desenvolvedor Segunda via do Bloqueto Digital Índice 1. INFORMAÇÕES TÉCNICAS - Windows... 3 1.1 URL DA 2A VIA DO BLOQUETO DIGITAL...

Leia mais

Incorporando JavaScript em HTML

Incorporando JavaScript em HTML Incorporando JavaScript em HTML Existem quatro maneiras de incorporar JavaScript em HTML. Vamos abordar as três primeiras, por ser mais comum: Entre as tags dentro do código HTML. A partir

Leia mais

HTML Básico Formulários. Matheus Meira

HTML Básico Formulários. Matheus Meira HTML Básico Formulários Matheus Meira 1 Objetivos Neste apresentação conheceremos os fundamentos básicos de HTML para a manipulação com servlets e jsp. Serão vistos Formulários Links Elementos de disparo

Leia mais

FORMULÁRIOS ACESSÍVEIS

FORMULÁRIOS ACESSÍVEIS Ministério da Educação Secretaria de Educação Profissional e Tecnológica IFRS Instituto Federal de Educação, Ciência e Tecnologia do Rio Grande do Sul NAV Núcleo de Acessibilidade Virtual FORMULÁRIOS ACESSÍVEIS

Leia mais