HTML Básico Formulários. Matheus Meira

Tamanho: px

Começar a partir da página:

Download "HTML Básico Formulários. Matheus Meira"

Benedita Alvarenga Teixeira
8 Há anos
Visualizações:

1 HTML Básico Formulários Matheus Meira 1

2 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 de eventos Caixa de Texto Campos Ocultos Chaves Booleanas Upload de Arquivos Área de Entrada de Texto Menus (Caixas de Seleção) Javascript para validação(um pouco) 2

Serão vistos Formulários Links Elementos de disparo de eventos Caixa de Texto

3 Formulários HTML Todo formulário em HTML é construído usando elementos dentro de um bloco <FORM> O bloco <FORM> define a URL que receberá o formulário e pode definir também o método usado <FORM ACTION="URL para onde serão enviado os dados" METHOD="método HTTP (pode ser GET ou POST)" ENCTYPE="formato de codificação" TARGET="nome da janela que mostrará a resposta" >... corpo do formulário (permite qualquer coisa permitida em <BODY>)... </FORM> 3

enviado os dados" METHOD="método HTTP (pode ser GET ou POST)" ENCTYPE="formato de codificação" TARGET="nome da

4 Formulários e links Formulários são similares a links. Um par formulário-botão tem o mesmo efeito que um link criado com <A HREF> O link está no formulário e o evento no botão O bloco <FORM ACTION="/dados/tutorial.html"> <INPUT TYPE="submit" VALUE="Tutorial"> </FORM> gera a mesma requisição que <A HREF="/dados/tutorial.html">Tutorial</A> que é GET / dados/tutorial.html HTTP/1.0 4

formulário e o evento no botão O bloco <FORM ACTION="/dados/tutorial.

5 Envio de dados com Formulários Vários elementos HTML servem para entrada de dados e são usados dentro de formulários. Todos os elementos de entrada de dados têm um nome e enviam um valor Exemplo de formulário para entrada de dados <FORM ACTION="/cgi-bin/catalogo.pl" METHOD="POST"> <H3>Consulta preço de livro</h3> <P>ISBN: <INPUT TYPE="text" NAME="isbn"> <INPUT TYPE="Submit" VALUE="Enviar"> </FORM> 5

Todos os elementos de entrada de dados têm um nome e enviam um valor Exemplo de formulário para

6 Elementos para disparo de eventos Os elementos <INPUT> com atributo TYPE Submit, Reset e Button servem para disparar eventos Envio do formulário (Submit) Reinicialização do formulário (Reset) Evento programado por JavaScript (Button) O value do botão define o texto que mostrará Apenas se o botão contiver um atributo name, o conteúdo de value será enviado ao servidor 6

formulário (Reset) Evento programado por JavaScript (Button) O value do botão define o texto

7 Entrada de texto Elementos <INPUT> com TYPE="text" podem ser usados para entrada de texto Com TYPE="password" o texto digitado é ocultado na tela do browser 7

8 Campos ocultos Campos ocultos consistem de um par nome/valor embutido no código HTML São úteis para que o autor da página possa enviar informações ao servidor Informações sobre configuração da aplicação Comandos, para selecionar comportamentos diferentes da aplicação Parâmetros especiais para controle da aplicação, sessão ou dados que pertencem ao contexto da aplicação Sintaxe <INPUT TYPE="hidden" NAME="nome" VALUE="valor"> 8

para selecionar comportamentos diferentes da aplicação Parâmetros especiais para controle da aplicação,

9 Chaves booleanas Há dois tipos: checkboxes e radio buttons Checkboxes permitem mais de uma seleção O código acima enviará nomes repetidos contendo valores diferentes na requisição Radio Buttons, se tiverem o mesmo nome, formam um grupo. No grupo, apenas uma seleção é aceita 9

repetidos contendo valores diferentes na requisição Radio Buttons,

10 Upload de arquivos O elemento <INPUT TYPE="file"> cria uma tela que permite o Upload de arquivos para o servidor Formulário usado deve ter a seguinte sintaxe <FORM ACTION="/servlet/UploadServlet" METHOD="POST" ENCTYPE="text/multipart-form-data">... </FORM> 10

11 Área para entrada de texto Possibilitam a entrada de texto de múltiplas linhas Elemento: <TEXTAREA> 11

12 Menus(Caixas) de seleção Geram requisições similares a checkboxes e radio buttons Consistem de um par de elementos <SELECT> define o nome da coleção <OPTION> define o valor que será enviado 12

13 JavaScript JavaScript não é uma versão limitada de Java. JavaScript foi criada pela Netscape e seu nome original se chamada LiveScript. Importante lembrar que JavaScript é implementada, de alguma forma, diferentemente em Internet Explorer e outros Browsers. 13

14 JavaScript Tem palavras chave parecidas com as de Java. Não é strongly-typed como Java Declaração de variáveis globais é opcional Declaração de variáveis locais com var Integra-se com Java É baseada em objetos (pode-se criar objetos a partir de protótipos mas não de herança) Não suporta sobrecarga ou sobreposição Funções (function) são objetos Quando usada no browser, várias estruturas do HTML são acessíveis como objetos JavaScript, permitindo que a linguagem os manipule. 14

Integra-se com Java É baseada em objetos (pode-se criar objetos a partir de protótipos mas não de herança) Não suporta

15 Redirecionando <html> <head> <title>tela de Apresentacao </title> <script language="javascript"> settimeout("location='destino.html'", 2000); </script> </head> <body> Apresentacao <img src="tomcat.gif"> </body> </html> inicio.html <html> <head> <title>destino </title> </head> <body> <h1>pagina de Destino</h1> <img src="tomcat.gif"> </body> </html> destino.html 15

html'", 2000); </script> </head> <body> Apresentacao <img src="tomcat.

16 Voltar à página anterior <HTML> <HEAD> <TITLE>Primeira Pagina</TITLE> </HEAD. <BODY> Clique <A HREF="segunda.html">aqui</A> para ir para a segunda pagina. </BODY> </HTML> primeira.html Para voltar n páginas Troque back() por go(n) onde n é o número de paginas que você quer voltar <HTML> <HEAD> <TITLE>Segunda Pagina</TITLE> </HEAD. <BODY> Clique <A HREF="javascript:history.back()">aqui</A> para voltar a pagina anterior. </BODY> </HTML> segunda.html 16

html Para voltar n páginas Troque back() por go(n) onde n é o número de paginas que você quer voltar <HTML>

17 JavaScript Os objetos, variáveis, etc. estão disponíveis a partir do objeto raiz, que no browser é document Todos os elementos da página estão em uma árvore a partir de document Pode-se criar novos elementos e anexá-los a document, fazendo-os aparecer dinamicamente na página (usando o DOM) Exemplo document.forms[0] primeiro formulário da página this.txtnomeusuario no formulário da página atual no elemento que tenha o id txtnomeusuario document.getelementbyid( botao_2 ) acessa um elemento HTML que tenha ID botao_2 17

document Pode-se criar novos elementos e anexá-los a document, fazendo-os aparecer dinamicamente na página (usando o DOM) Exemplo

18 Validação de Entrada Vazia <html><head><title>usando função validar e evazio</title> <script language="javascript"> function evazio(_str) { if (_str==null _str=="") return true; return false; function validar(_nomeusuario, _senha) { if (evazio(_nomeusuario)) { alert('nome do usuário deve ter um valor'); return false; if (evazio(_senha)) { alert('senha deve ter um valor'); return false; return true; </script> </head><body> <form action=servlet/login METHOD=POST OnSubmit="return validar(this.txtnomeusuario.value, this.txtsenha.value);"> Nome Usuario: <INPUT TYPE=TEXT NAME=txtNomeUsuario><br> Senha: <INPUT TYPE=PASSWORD NAME=txtSenha><br> <input type=submit value="login"> </form> </body> </html> validaevazio.html 18

ter um valor'); return false; return true; </script> </head><body> <form action=servlet/login METHOD=POST OnSubmit="return validar(this.txtnomeusuario.value, this.txtsenha.

19 Validando Formulário <html><head><title>validacao de Formulario</title> <script language="javascript"> function trim(_str) { while (_str.charat(_str.length - 1)==" ") _str = _str.substring(0, _str.length - 1); while (_str.charat(0)==" ") _str = _str.substring(1, _str.length); return _str; function einteiropositivo(_str) { var padrao = " " var i = 0; do { var pos = 0; for (var j=0; j<padrao.length; j++) if (_str.charat(i)==padrao.charat(j)) { pos = 1; break; i++; while (pos==1 && i<_str.length) if (pos==0) return false; return true; Continua... 19

$length); return _str; function einteiropositivo(_str) { var padrao = "0123456789" var i = 0; do { var pos = 0; for (var j=0; j<padrao.$

20 Validando Formulário(Continuação) function validarform(_oform) { if (trim(_oform.txtnome.value)=='') { alert('por favor entre um valor na caixa "Nome"'); _oform.txtnome.focus(); return false; if (trim(_oform.txtidade.value)=='') { alert('por favor entre um valor na caixa "Idade"'); _oform.txtidade.focus(); return false; if (!einteiropositivo(trim(_oform.txtidade.value))) { alert('por favor entre somente numero positivo na caixa "Idade"'); _oform.txtidade.focus(); return false; return true; </script> </head><body> <form method=post action=servlet/processa onsubmit='return validarform(this)'> Nome:<input type=text name=txtnome><br> Idade:<input type=text name=txtidade><br> <input type=submit><br> </form> </body> </html> Formulario.html 20

21 Fim 21

Documentos relacionados

Tecnologias Web. Formulários HTML

Tecnologias Web. Formulários HTML Tecnologias Web Formulários HTML Cristiano Lehrer, M.Sc. Tag form (1/2) Todo formulário em HTML é construído usando elementos dentro de um bloco . O bloco define a URL que receberá o formulário