HTML. Frames e FORMs

Tamanho: px

Começar a partir da página:

Download "HTML. Frames e FORMs"

Pietra Aleixo Palma
7 Há anos
Visualizações:

1 HTML Frames e FORMs

2 Frames As frames são divisões do ecrã do browser em diversas janelas (ou quadros ). Torna-se assim possível apresentar mais do que uma página numa janela do browser. É muito fácil colocar frames em páginas; porém, nem todos os utilizadores gostam delas, pois nem sempre a navegação é fácil, além de trazerem problemas com a impressão e com a marcação (nos bookmarks) dos documentos presentes nas frames. A alternativa natural para as frames são as tabelas.

3 Aplicações de Frames e Cuidados As frames são interessantes para apresentação de conjuntos de páginas que mantém um índice fixo para navegação. Um cuidado a ter será procurar controlar bem a navegação, evitando que a activação de links não leve o utilizador a ver o seu browser criar frames dentro de frames, gerando uma grande confusão.

4 Exemplo de <frameset> <html> <head> <title> Título da página HTML </title> </head> <frameset cols= 20%,80% > <frame src= links.html name= links > <frame src= apresentacao.html name= principal > </frameset> </html>

5 Composição com Frames Como já foi possível observar, a formatação frameset tem atributos que definem a divisão do espaço da janela do browser em colunas ou linhas. Pode-se utilizar uma combinação de "framesets" para criar diversos modos de apresentação do conteúdo de um site.

6 Composição com Frames Como montar duas frames em coluna: <frameset cols="x, y"> <frame src="col1.html"> <frame src="col2.html"> </frameset> Duas frames em linha: <frameset rows="x, y"> <frame src="lin1.html"> <frame src="lin2.html"> </frameset>

7 Atributos de Frames Para além dos atributos anteriores (cols, rows, src e name), as frames têm também outros atributos: Frameborder (exemplo: frameborder= no ) Scrolling (exemplo: scrolling= no )

8 Links para Frames Tendo em conta o exemplo do slide 4, vejamos a página links.htm : <html> <head> <title> Página de links </title> </head> <body> <p><a href= link1.htm target= principal >Link 1</a></p> <p><a href= link2.htm target= principal >Link 2</a></p> <p><a href= link3.htm target= principal >Link 3</a></p> <p><a href= link4.htm target= principal >Link 4</a></p> <p><a href= link5.htm target= principal >Link 5</a></p> </body> </html>

9 Limpar o ecrã Existem 2 efeitos possíveis para limpar a apresentação de frames a partir de "targets" especiais: target = "_top" - limpa as frames que estiverem activas, apresentando a página de destino na janela inteira target = "_blank" - abre uma nova janela do browser para apresentar a página de destino

10 Frames Exemplo (1) Ficheiro index.html <html> <head> <title>título da página HTML</title> </head> <frameset rows= 20%,80% > <frame src= title.html name= title > <frameset cols= 20%,80% > <frame src= links.html name= links > <frame src= main.html name= main > </frameset> </frameset> </html> Ficheiro links.html <html> <head><title>links</title></head> <body> <h3>os meus links</h3> <p><a href= link1.html target= main >Link1</a></p> <p><a href= link2.html target= main >Link2</a></p> <p><a href= link3.html target= main >Link3</a></p> <p><a href= link4.html Ficheiro main.html <html> <head> <title>principal</title> </head> <body> <h1>aqui vai aparecer todos as minhas páginas</h1> </body> </html> Ficheiro title.html <html> <head> <title>título</title> </head> <body> <h1>a minha primeira página</h1> </body> </html>

11 FORMs Utilizados para enviar dados ao servidor a partir das páginas visualizadas no browser do cliente Tipos de Controlo: RADIO, TEXT, CHECKBOX, SELECT, BUTTON Método de submissão de dados POST ou GET Destino, ou seja página para onde se navega depois de submeter os dados de um form Exemplo: action="destino.html"

12 Exemplo 1 <html> <head> <title>titulo da página</title> </head> <body> <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> </body> </html>

13 Exemplo 2 <html> <head> <title>titulo da página</title> </head> <body> <form> Username: <input type="text" name="user"><br> Password: <input type="password" name="password"> </form> <p> Note que os caracteres que são introduzidos no campo da password aparecem com asteriscos, em vez dos caracteres da password. </p> </body> </html>

14 Tipos de controlo Text: <input type="text" name= nome"> Password: <input type="password" name= nome"> Radio: <input type="radio" name= nome" value= valor"> Checkbox: <input type="checkbox" name= nome value= valor > Button: <input type="button" value= valor"> Lists: <select name= nome"> <option value= valor1">valor1 <option value= valor2">valor2 <option value= valor3">valor3 </select>...

15 Atributos para <form> Name: define um nome único para o form; Action: URL de destino para os dados introduzidos pelo utilizador; Method: o método de envio dos dados para o URL de destino. Por defeito utiliza o get. Get este método envia os dados no URL (exemplo: URL?nome=valor&nome=valor). Nota: se os dados contiverem caracteres não ASCII ou excederem os 100 caracteres devesse usar o método post. Post este método enviar os dados no corpo do pedido. Nota: muitos browsers não suportam este método de submissão de dados. Target: onde irá abrir o URL de destino: _blank irá abrir numa nova janela; _self irá abrir na mesma janela (opção por defeito);...

16 Submissão de dados - Exemplo 1 Para submeter dados introduzidos pelo utilizador para outro ficheiro, onde irão ser tratados: <form name="input" action= destino.htm" method="get"> Username: <input type="text" name="user"> <input type="submit" value="submit"> </form>

17 Submissão de dados Exemplo 2 <html> <head> <title>titulo da página</title> </head> <body> <form action="mailto:mart@est.ips.pt" method="post" enctype="text/plain"> <h3>enviar um mail</h3> Nome: <input type="text" name= nome value= nome" size="20"><br> Mail: <input type="text" name="mail value= mail" size="20"><br> Texto: <input type="text" name= texto value= texto" size="40"><br> <br> <input type="submit" value= Enviar"> <input type="reset" value= Limpar"> </form> </body> </html>

18 Submissão de dados Exemplo 3 <html> <head> <title> Título da página HTML </title> </head> <body> <form method="post" action="destino.html"> <h2>inserir</h2> <p>radio Buttons:<br> Opcção_1 <input name="r1" type="radio" value="f"> Opcção_2 <input name="r1" type="radio" value="m"> </p> <p>número: <input name="numero" type="int"></p> <p>texto: <input name="texto" type="text" size="48"></p> <p>password: <input name="password" size="16" type="password"></p> <p>selection(combo box): <select name="curso"> <option>selecção1</option> <option>selecção2</option> <option>selecção3</option> </select> </p> <p>checkbox: <input name="check" type="checkbox" value="s"></p> <p>textarea: <textarea name="obs:" rows=6 cols=60></textarea></p> <p><input type="submit" value="enviar"> <input type="reset value="limpar"></p> </form> </body> </html>

19 Submissão de dados Exemplo 3

20 Referências Tutoriais de HTML, CSS, JavaScript, PHP, etc.:

Documentos relacionados

HTML. Leonardo Gresta Paulino Murta

HTML. Leonardo Gresta Paulino Murta HTML Leonardo Gresta Paulino Murta leomurta@gmail.com Introdução a HTML Formulários em HTML Critério para escolha de campos Agenda Leonardo Murta HTML 2 HTML HyperText Markup Language Criada por Tim Berners-