DESENVOLVIMENTO WEB I

Transcrição

1 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 serão processados no servidor e em seguida devolvidos ao cliente. Esses comandos são os principais responsáveis pela viabilização da troca de informações entre o cliente (usuário) e o servidor WEB. Eles podem ser usados em qualquer tipo de atividade. O elemento <form> delimita um formulário e contém uma seqüência de elementos de entrada e de formatação do documento. <form action="url_de_script" method="método">...</form> Os atributos de form que nos interessam agora são: action - especifica a URL do script ou ao qual serão enviados os dados do formulário. method - Seleciona um método para acessar o URL de ação. Os métodos usados atualmente são: o POST - os dados entrados fazem parte do corpo da mensagem (campos do formulário) enviada para o servidor; transfere grande quantidade de dados. o GET - os dados entrados fazem parte da URL associada à consulta enviada para o servidor; suporta até 128 caracteres. Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas, imagens - exceto outros formulários. Em especial, colocamos entre a marcação <form>... </form> as formatações para campos de entrada de dados, que são três: <input>, <select> e <textarea>. OBS: O TAG <form> é um TAG fechado, portanto não esqueça de fechar o mesmo com </form>

2 <input>: O campo <input> tem um atributo type, o qual atribuímos seus valores diferentes para gerar vários tipos diferentes de entrada de dados. Campo de dados texto (text): Quando o input não apresenta atributos é assumido que o type = text (default) Nome: <input type = text name = Nome > ou apenas Nome: <input name = Nome > Campo de dados senha (password): Entrada de texto na qual os caracteres são escondidos por asteriscos (*) ou Login: <input type = text name = login > Senha: <input type = password name = senha > Alguns atributos para os campos do tipo text e password: o value: pode ser usado para dar um valor inicial a um campo. Desse modo se o usuário não preencher este campo, será adotado esse valor padrão. Se o usuário quiser entrar com dados, ele apaga o que se encontra escrito e escreve o texto desejado. Nome: <input type = text name = Nome value = Seu nome >

3 o size: especifica o tamanho do espaço na tela para o campo do formulário. Só é válido para campos text e password. O valor default (padrão) é 20. Endereço: <input type = text size = 35 > o maxlength é o número máximo de caracteres aceito em um campo de dados (somente text e password). Dia do mês: <input type = text maxlength = 2 > Por default, o espaço destinado na tela é de 20 caracteres, mais não conseguimos digitar mais que 2, especificado no maxlength. Para resolver o problema do tamanho do campo, podemos usar o código abaixo: Dia do mês: <input type = text size= 2 maxlength = 2 > Campo de dados oculto (hidden): Campos tipo hidden são usados para passar dados que não podem ser alterados pelo usuário que estará inserindo informações no formulário. Por exemplo: você tem um site com sistema de login e o usuário quer alterar as informações de login dele. O script que irá manipular esse

4 formulário precisa saber o ID do usuário para poder alterar as informações no banco de dados, então esse ID é um campo hidden. <input type= hidden name= id value="111"> Obs: Este campo não é exibido na tela Múltipla escolha: Checkbox insere um botão para escolha de opções. Várias opções podem ser escolhidas. <input type = checkbox name = esporte value = Basquete > Basquete <BR> <input type = checkbox name = esporte value = bocha > Bocha Uma diretiva checked marca uma escolha inicial: <input type = checkbox name = esporte value = volei checked> Vôlei Escolha única: Radio insere um botão de escolha de valores para uma opção, isto é, somente uma alternativa pode ser escolhida. <input type = Radio name = time value = Palmeiras > Palmeiras <BR> <input type = Radio name = time value = Flamengo > Flamengo <BR>

5 Uma diretiva checked marca uma escolha inicial: <input type = Radio name = time value = Fluminense checked > Fluminense <SELECT>: Apresenta uma lista de valores através de campos option: <select name = Sabor size = 4 > <option> Abacaxi </option> <option selected> Creme </option> <option> Morango </option> <option> Chocolate </option> <option> Côco </option> <option> Melancia </option> </select> Uma diretiva selected marca uma escolha inicial. Se não for colocado o atributo size, o mesmo recebe o valor 1 por default. <select name = Sabor > <option> Abacaxi </option>

6 <option> Creme </option> <option selected> Morango </option> <option> Chocolate </option> <option> Côco </option> <option> Melancia </option> </select> DESENVOLVIMENTO WEB I Observe que é exibida a opção com a diretiva selected <textarea>: Textarea: Abre uma área para entrada de texto, de acordo com os atributos para o número de colunas, linhas e, se for o caso, um valor inicial. Se você deseja que um texto seja exibido no campo textual ao abrir o formulário, simplesmente coloque este texto entre as marcações de início e fim da textarea. <textarea cols = 40 rows = 5 name="comentario">deixe seu comentário</textarea> Botões de ação: Submit apresenta o botão que causa o envio dos dados de entrada para o servidor. <input type = submit >

7 É possível modificar o rótulo desse botão através do atributo value. <input type = submit value = Gravar Dados > Reset restaura os valores originais das entradas de dados. Em vez do usuário corrigir cada INPUT, um botão RESET pode ser utilizado para restaurar todos os campos a seus valores default, como se nenhuma informação houvesse sido digitada. <input type = reset > É possível também modificar o rótulo desse botão através do atributo value: <input type = reset value = Apagar Tudo! > Exercício: Crie o formulário abaixo (formulario.html): Observações: * A fonte padrão do formulário é Arial; * O Formulário está centralizado na página; * O campo Senha é do tipo password com número máximo de caracteres aceito igual a 10; * As opções de Escolaridade são: 1º Grau Completo, 2º Grau Completo e Superior Completo; * O campo Observações / Comentários tem 35 colunas e 3 linhas

8 6.3 - Frames: Um recurso que nos permite sair do caráter contínuo de um texto exibido na tela é o frame, onde podemos colocar em um lado da tela (ou em qualquer outra parte) um índice para os diversos assuntos que são abordados na página, sem que esse índice desapareça quando escolhemos algum de seus tópicos. O frame é o recurso que nos permite dividir uma tela do navegador em várias áreas diferentes. Cada frame é tratado como uma página independente, pois para sua utilização se faz necessário dois tipos de documentos html: o frameset e o conteúdo. O frameset é um documento html que é o responsável pelo layout da página com os frames. É nele que são especificados a quantidade, o tamanho e a posição de cada frame. O conteúdo também é um documento html em que ficam contidas as informações (texto, figuras, etc.) a serem exibidas em seu respectivo frame ou em uma janela independente. O frameset é um documento que serve apenas como o layout da página, portanto, os TAGS de formatação de texto, inserção de figuras, tabelas e outros não são suportados neste documento, incluindo o TAG <body>. Mesmo assim o frameset é permitido dentro de um documento comum, mas não pode ficar entre os TAGS <body> </body>, apesar disso recomendamos que o frameset seja um documento totalmente separado, pois facilita a construção da página e suas futuras correções e expansões. Veja o exemplo abaixo:

9 Para o exemplo acima, temos os seguintes arquivos: <html> <head> <title>uso de Frames</title> </head> Arquivo Frameset frameset.html DESENVOLVIMENTO WEB I <frameset framespacing = "10" frameborder = "0" cols = "20%, 80%"> <frame name = "indice" src = "frame01.html" scrolling = "no" noresize> <frame name = "principal" src = "frame02.html" scrolling = "yes" noresize> </frameset> <noframe> <body> Esta página usa recursos de frame e o seu browser não suporta este recurso.<br> </body> </noframe> </html> Arquivos de Conteúdo frame01.html <html> <head> <title>novo Documento</title> </head> <body> <center> <h2>menu</h2><br> <br> <a href="frame03.html" target="principal">frame 03</a> <center> </body> </html> frame02.html <html> <head> <title>novo Documento</title> </head> <body bgcolor="#000000" text="#ffffff"> <center> <h2>página Principal</h2> <center> </body> </html> frame03.html <html> <head> <title>novo Documento</title> </head> <body bgcolor="#ff0000" text="#ffff00"> <center> <h2>frame 03</h2> <center> </body> </html> No arquivo frameset.html é especificado quais os documentos (frame01.html e frame02.html) que vão ocupar as áreas da janela. Nestes

10 documentos encontram-se os conteúdos de cada frame. Se o endereço digitado for o de um arquivo conteúdo (frame01.html e frame02.html) somente aparecerá o conteúdo do respectivo arquivo O TAG FRAMESET: Definição de grupo de frames. É usado no lugar do TAG <BODY> no documento que define os frames. <frameset rows= t1/t1%,t2/t2%, cols= t1/t1%,t2/t2%, frameborder=0/1 framespacing="t1"> </frameset> Onde: t1, t2: especifica o tamanho em pixels. t1%, t2%: especifica o tamanho como porcentagem da janela Atributos: ROWS: faz a divisão horizontal da janela. COLS: divide a janela em colunas. Combinando ROWS e COLS teremos a formação de uma grade. O exemplo mostrado anteriormente tem 1 linha (não exibe ROW) e 2 colunas (ROWS= 20%, 80% ). FRAMEBORDER: oculta (0) ou exibe (1) BORDER: espessura da borda (em pixels) BORDERCOLOR: cor da borda FRAMESPACING: espaçamento entre os frames NOFRAME: <NOFRAME> </NOFRAME>: especifica o conteúdo que será mostrado no lugar dos frames caso o browser não possua suporte a frames. Os

11 browsers que suportam este recurso irão ignorar esta TAG e não haverá problemas com a exibição do documento O TAG FRAME: Define o frame dentro do frameset. <FRAME SRC= URL NAME= TEXTO > Atributos: SRC: define o endereço do arquivo a ser exibido no frame. NAME: Nome do frame. Outros comandos são opcionais como: MARGINWIDTH= t1/t1% : define o tamanho das margens esquerda e direita. MARGINHEIGHT= t1/t1% : define o tamanho das margens superior e inferior. NORESIZE: evita que o usuário redimensione o frame. SCROLLING=(YES/NO/AUTO): barras de rolagem do frame (yes: visível / no: não exibe a barra / auto: inclui se o conteúdo ultrapassar o tamanho definido para o frame, esta é a opção padrão) Comandos no documento conteúdo: Para que exista coordenação entre o documento de layout (frameset) e os documentos de conteúdo, eles devem conter as seguintes TAGS: <a href= URL target= NOME >...</a> Carrega a página (URL) no frame especificado pelo NOME. Exercício: Construa os arquivos de acordo com o que foi explicado acima e crie mais links no arquivo frame01.html, e arquivos correspondentes, para serem exibidos na página Principal (<frame name = "Principal">)

12 6.4 Iframes: Outra maneira mais elegante de inserir outras páginas dentro de nossos documentos HTML é através do comando <iframe>. Nesse caso, devemos especificar o tamanho do espaço que deverá ser aberto no documento para apresentação da outra página. Abaixo um exemplo, onde <iframe> foi colocado de forma a abrir uma página centralizada (iframe.html): <HTML> <HEAD> <TITLE>Exemplo de uso do iframe</title> </HEAD> <BODY> <CENTER> <iframe src=' KIN=azul' align='center' scrolling='no' frameborder='0' width=120 height='148' marginheight='0' marginwidth='0'></iframe> </CENTER> </BODY> </HTML> Atributos: ALIGN = LEFT RIGHT CENTER TOP MIDDLE BOTTOM Valores: o LEFT Moldura à esquerda e texto ao redor; o RIGHT Moldura à direita e texto ao redor; o CENTER Moldura no centro e texto ao redor; o TOP Texto alinhado com a parte superior do frame; o MIDDLE Texto alinhado com o centro do frame; o BOTTOM Texto alinhado com a parte inferior do frame; FRAMEBORDER = 1 0 HEIGHT = número % - Altura da moldura. MARGINHEIGHT = número % MARGINWIDTH = número %

13 NAME = texto NORESIZE SCROLLING = yes no auto SRC = URL WIDTH = número % - Largura da moldura. Exercício: Crie uma página html (iframe_exercicio.html) com um iframe de 120 pixels de largura, 148 pixels de altura, margem superior, inferior, direita e esquerda iguais a zero, border igual a zero e que não exiba a barra de rolagem, de modo que o iframe fique centralizado na página html criada Imagens Mapeadas e Cambiáveis: Imagens Mapeadas: Quando queremos criar um link para uma outra página HTML a partir de uma imagem, fazemos da seguinte maneira:... <a href="index.html"><img src="img/imagem.jpg"></a>... Seguindo a marcação acima, basta clicar em qualquer parte da imagem para irmos ao endereço que definimos. Porém, há momentos em que desejamos utilizar apenas parte da imagem. Para isso podemos utilizar o tag <map> cuja função é definir determinadas áreas da imagem para serem usadas como links, por exemplo. Existem 3 formas que podemos atribuir a uma área da imagem com o tag <map>: círculo, quadrado (ou retângulo) e polígono. O código abaixo mostra uma imagem mapeada com o formato de um círculo, onde podemos clicar. Pegue a imagem Koala.jpg que se encontra em "Amostra de Imagens"

14 do Windows Explorer e coloque no mesmo diretório onde você salvará o arquivo imagens_mapeadas.html com o código fonte abaixo: <html> <head> <title>imagens Mapeadas</title> </head> <body> <img src="koala.jpg" border="0" usemap="#urso"> <map name="urso"> <area shape="circle" coords="384,384,20" href=" alt="universo"><!--olho ESQUERDO--> <area shape="circle" coords="662,427,20" href=" alt="google"><!--olho DIREITO--> </map> </body> </html> Observe o valor atribuído a "shape". A palavra-chave "circle" significa que a área terá forma de círculo. Os valores atribuídos a "coords" indicam o local onde ficará o círculo e o tamanho dele. A tabela abaixo apresenta as formas e exemplos de como definir as coordenadas em uma imagem: Shape (formato) Coords (coordenadas) circle (círculo) 50,50,20 rect (retângulo) 100,150,200,140 poly (polígono) 566,206,450,339,625,343 Para o círculo as 3 coordenadas significam, respectivamente, distância da borda esquerda da imagem, distância do topo da imagem e diâmetro do círculo. Para o retângulo, os dois primeiros valores definem o canto superior esquerdo desse formato, e os dois últimos valores definem o canto inferior direito do formato. Já para o polígono, cada dupla de valores representa um

15 canto desse formato. No caso das coordenadas apresentadas na tabela para o Shape poly, um triângulo é formado (3 pares de coordenadas). Para definir as coordenadas desejadas, basta abrir a imagem no Paint e observar os valores apresentados pelo programa da posição do mouse. Observe a imagem abaixo: Ponteiro do mouse Coordenados do ponto Existem outros editores de imagens que também mostram as coordenadas da imagem, mas o Paint é o mais acessível, já que sempre vem junto com o Sistema Operacional Windows. Existem também editores e ferramentas de autoria e apoio ao desenvolvimento WEB que já mapeiam imagens, como por exemplo, o MapEdit já citado

16 Exercício: Mapeie a pata da imagem Koala.jpg, inserindo um link para o site no formato de um retângulo e a testa da imagem Koala.jpg, inserindo um link para o site no formato de um triângulo Imagens Cambiáveis: Uma imagem cambiável é aquela que sofre algum tipo de mudança quando passamos com o mouse sobre ela. O famoso efeito OnMouseOver / OnMouseOut. Normalmente para conseguir tal feito, utiliza-se um código JavaScript, o que dificultava a vida de quem não tem facilidade com essa linguagem. Veja abaixo o código fonte (imagens_cambiaveis.html) do funcionamento de uma imagem cambiável: <html> <head> <title>imagens Cambiáveis</title> </head> <body> <img src="img_camb_1.jpg" onmouseover="this.src='img_camb_2.jpg'" onmouseout="this.src='img_camb_1.jpg'" /> </body> </html>