FORMULÁRIOS HTML
Ate agora vimos a forma na qual o HTML providencia e mostra a informacao, essencialmente mediante o
texto, imagens e links. Falta ver de que forma podemos trocar informacoes com nosso visitante. Desde
entao, este novo aspecto e primordial para a grande quantidade de acoes que se podem realizar
mediante o Web: Comprara um artigo, preencher uma enquete, enviar um comentario ao autor...
Vimos anteriormente que poderiamos, mediante os links, entrar em contato diretamente com um correio
eletronico. Entretanto, esta opcao pode ser em alguns casos pouco versatil se o que desejamos e que o
navegante nos envie uma informacao bem precisa. E atraves dele, o HTML que propoem outra solucao
Os formularios sao estas famosas caixas de texto e botoes que podemos encontrar em muitas paginas
web. Sao muito utilizados para realizar buscar ou tambem para introduzir dados pessoais, por exemplo,
em sites de comercios eletronico. Os dados que o usuario introduz nestes campos sao enviados ao
correio eletronico do administrador do formulario ou tambem, em um programa que se encarrega de
processa-lo automaticamente.
Usando HTML podemos unicamente enviar o formulario a um correio eletronico. Se quisermos processar
o formulario mediante um programa, a coisa pode ser um pouco mais complexa, ja que teremos que
empregar outras linguagens mais sofisticadas. Neste caso, a solucao mais simples e utilizar os programas
pre-desenhados que nos propoem um grande numero de servidores de hospedagem e que nos permitem
armazenar e processar os dados em forma de arquivo ou outros formatos. Se sua pagina es ta
hospedada em um servidor que nao lhe propoem estes tipos de vantagens, voce sempre podera recorrer
a servidores de terceiros que oferecem este ou outros tipos de servicos gratuitos para webs. E claro que
tambem existe outra alternativa que e a de aprender linguagens como ASP ou PHP que nos permitira,
entre outras coisas, o tratamento de formularios.
Os formularios sao definidos por meio das etiquetas <form> e </form>. Entre estas duas etiquetas
colocaremos todos os campos e botoes que compoem o formulario. Dentro desta etiqueta <form>
devemos especificar alguns atributos.:
Action
Define o tipo de acao a realizar com o formulario. Como ja dissemos, existem duas possibilidades:
・ O formulario e enviado a um endereco de correio eletronico
・ O formulario e enviado a um programa ou script que processa seu conteudo.
No primeiro caso, o conteudo do formulario e enviado ao endereco de correio eletronico especificada por
meio de uma sintaxe deste tipo:
<form action="mailto:endereco@correio.com"…>
Se o que queremos e que o formulario seja processado por um programa, temos de especificar o
endereco do arquivo que contem o tal programa. A etiqueta ficaria neste caso da seguinte forma:
<form action="endereco do arquivo"...>
A forma na qual se expressa a localizacao do arquivo que contem o programa e a mesma que a vista
para os links.
Method
Este atributo se encarrega de especificar a forma na qual o formulario e enviado. Os dois valores
possiveis que este atributo pode tomar sao post e get. A efeitos praticos e salvo se lhe disserem o
contrario, daremos sempre o valor post.
Enctype
Utiliza-se para indicar a forma na qual viajara a informacao que for mandada pelo formulario. No caso
mais corrente, enviar o formulario por correio eletronico, o valor deste atributo deve ser "text/plain". Assim,
conseguimos que o conteudo do formulario seja enviado como texto plano dentro do e-mail.
Se quisermos que o formulario se processe automaticamente por um programa, geralmente nao
utilizaremos este atributo, de forma que tome seu valor padrao, ou seja, nao incluiremos enctype dentro
da etiqueta <form>.
Exemplo de etiqueta <form> completa
Assim, para o caso mais habitual - o envio do formulario por correio - a etiqueta de criacao do formulario
tera o seguiente aspecto:
<form action="mailto:endereco@correio.com (ou o nome do arquivo de processo)" method="post"
enctype="text/plain">
Entre esta etiqueta e seu fechamento, colocaremos o resto de etiquetas que darao forma ao nosso
formulario, as quais serao vistas nos proximos capitulos.
Elementos de formulários. Campos de texto.
O HTML nos propoem uma grande diversidade de alternativas na hora de criar nossos formularios. Estas
vao desde a classica caixa de texto ate a lista de opcoes passando pelas caixas de validacao.
Veremos em que consiste cada una destas modalidades e como podemos implementa-las em nosso
formulario.
Texto curto
As caixas de texto sao colocadas por meio da etiqueta <input>. Dentro desta etiqueta temos de
especificar o valor de dois atributos: type e name.
A etiqueta e da seguinte forma:
<input type="text" name="nombre">
Deste modo expressamos nosso desejo de criar uma caixa de texto cujo conteudo sera chamado nome
(por exemplo). O aspecto deste tipo de caixas e conhecido, como pode ser visto aqui:
O nome do elemento do formulario e de grande importancia para poder identifica-lo em nosso programa
de processamento ou no e-mail recebido. Por outro lado, e importante indicar o atributo type, ja que, como
veremos, existem outras modalidades de formulario que usam esta mesma etiqueta.
O emprego destas caixas esta fundamentalmente destinado a tomada de dados breves: palavras ou
conjuntos de palavras de longitude relativamente curta. Veremos mais adiante que existe outra forma de
tomar textos mais longos a partir de outra etiqueta.
Alem destes dois atributos, essenciais para o correto funcionamento de nossa etiqueta, existem outra
serie de atributos que podem ser de utilidade, mas que nao sao imprescindiveis.
size
Define o tamanho da caixa em numero de caracteres. Se ao escrever o usuario chega ao final da caixa, o
texto ira desfilando a medida que se escreve fazendo desaparecer a parte de texto que fica a esquerda.
maxlength
Indica o tamanho maximo do texto que pode ser tomado pelo formulario. E importante nao confundi-lo
com o atributo size. Enquanto o primeiro define o tamanho aparente da caixa de texto, maxlength indica o
tamanho maximo real do texto que pode ser escrito. Podemos ter uma caixa de texto com um tamanho
aparente (size) que e menor do que o tamanho maximo (maxlength). O que ocorrera neste caso e que, ao
escrever, o texto ira desfilando dentro da caixa ate que cheguemos ao seu tamanho maximo definido por
maxlength, momento no qual sera impossivel continuar escrevendo.
value
Em alguns casos pode ser interessante atribuir um valor definido ao campo em questao. Isto pode ajudar
ao usuario a preencher mais rapidamente o formulario ou a dar alguma ideia sobre a natureza de dados
que se requerem. Este valor inicial do campo pode ser expresso mediante o atributo value. Vejamos seu
efeito com um exemplo simples:
<input type="text" name="nome" value="Perico Palotes">
Gera um campo deste tipo:
Josefa Palotes
Nota: estamos obrigados a utilizar a etiqueta <form>
Para que fique mais claro este conteudo, ressaltamos: Quando queremos utilizar em qualquer
situacao elementos de formulario devemos escreve-los sempre entre as etiquetas <form> y
</form>. Caso contrario, os elementos serao vistos perfeitamente no Explorer, mas nao no
Netscape.
Com outras palavras, no Netscape nao se visualizam os elementos de formulario a nao ser que
estejam colocados entre as correspondentes etiquetas de inicio e fim de formulario.
E por isso que para mostrar um campo de texto nao adianta colocar a etiqueta <input>, e sim,
coloca-la dentro de um formulario. Assim:
<form>
<input type="text" name="nome" value="Josefa Palotes">
</form>
Veremos posteriormente que este atributo pode ser relevante em determinadas situacoes.
Texto oculto
Podemos esconder o texto escrito por meio de asteriscos de forma a fornecer uma certa confiabilidade.
Este tipos de campos sao analogos aos de texto com somente uma diferenca: deslocando o atributo
type="text" por type="password":
<input type="password" name="nome">
Neste caso, pode ser comprovado que ao escrever dentro do campo no lugar de texto serao vistos
asteriscos.
Estes campos sao ideais para a introducao de dados confidenciais, principalmente codigos de acesso.
Isto pode ser visto em funcionamento a seguir:
Texto longo
Se desejarmos colocar a disposicao do usuario um campo de texto onde possa escrever comodamente
sobre um espaco composto de varias linhas, temos de convocar uma nova etiqueta: <textarea> e seu
fechamento correspondente.
Estes tipos de campos sao praticos quando o conteudo a enviar nao e um nome, telefone ou qualquer
outro dado breve, e sim, um comentario, opiniao, etc.
Dentro da etiqueta textarea deveremos indicar, como para o caso visto anteriormente, o atributo name
para associar o conteudo a um nome que sera semelhante a uma variavel nos programas de processo.
Alem disso, podemos definir as dimensoes do campo a partir dos seguintes atributos:
rows
Define o numero de linhas do campo de texto.
cols
Define o numero de colunas do campo de texto.
A etiqueta fica portanto, desta forma:
<textarea name="comentario" rows="10" cols="40"></textarea>
O resultado e o seguinte:
Mesmo assim, e possivel definir o conteudo do campo. Para isso, nao usaremos o atributo value e sim,
que escreveremos dentro da etiqueta o conteudo que lhe desejamos atribuir. Vejamos:
<textarea name="comentario" rows="10" cols="40">Escreva seu comentario....</textarea>
Outros elementos de formulários
Efetivamente, os textos sao uma maneira muito pratica de fazer chegar a informacao do navegante.
Porem, em muitos casos, os texto sao dificilmente adaptaveis a programas que possam processa-los
devidamente ou tambem pode ser que seu conteudo nao se ajuste ao tipo de informacao que
requeremos. E por isso que, em determinados casos, pode ser mais efetivo propor uma escolha ao
navegante a partir da exposicao de uma serie de opcoes.
Este e o caso de, por exemplo, oferecer uma lista de paises, o tipo de cartao de credito para um
pagamento, etc.
Estes tipos de opcoes podem ser expressadas de diferentes formas. Vejamos a seguir quais sao:
Listas de opções
As listas de opcoes sao esse tipo de menus desdobraveis que nos permite escolher uma (ou varias) das
multiplas opcoes que nos propoem. Para construi-las utilizaremos uma etiqueta com seu respectivo
fechamento: <select>
Como para os casos ja vistos, dentro desta etiqueta definiremos seu nome por meio do atributo name.
Cada opcao sera incluida em uma linha precedida da etiqueta <option>.
Podemos ver, a partir destas diretrizes, a forma mais tipica e simples desta etiqueta:
<select name="estacao">
<option>Primavera</option>
<option>Verao</option>
<option>Outono</option>
<option>Inverno</option>
</select>
O resultado e:
Primavera
Esta estrutura pode ser vista modificada principalmente a partir de outros dois atributos:
size
Indica o numero de valores mostrados da lista. O resto pode ser visto por meio da barra lateral de
deslocamento.
multiple
Permite a selecao de mais varios elementos da lista. A escolha de mais de um elemento se faz como com
o explorador de Windows, a partir das teclas ctrl ou shift. Este atributo se expressa sem valor algum, ou
seja, nao se utiliza com o igual: simplesmente se coloca para conseguir o efeito, ou nao se coloca se
quisermos uma lista desdobravel comum.
Conselho: Se for possível, não utilize multiple
Nao recomendamos especialmente a pratica desta opcao ja que o manejo das teclas ctrl ou
shift para escolher varias opcoes pode ser desconhecido para o navegante. Evidentemente,
sempre cabe a possibilidade de explicar como funciona a pesar de ser uma complicacao a
mais para o visitante.
Vejamos qual e o efeito produzido por estes dois atributos mudando a linha:
<select name="estacao">
por:
<select name="estacao" size="3" multiple>
A lista ficara desta forma:
Primavera
Verao
Outono
A etiqueta <option> ainda pode ser precisada por meio de outros atributos
selected
Da mesma forma que multiple, este atributo nao toma nenhum valor senao que simplesmente indica que
a opcao que apresenta esta escolhida por padrao.
Assim, se mudamos a linha do codigo anterior:
<option>Outono</option>
por:
<option selected>Outono</option>
O resultado sera:
Outono
value
Define o valor da opcao que sera enviada ao programa ou ao correio eletronico se o usuario escolhe essa
opcao. Este atributo pode ser muito util se o formulario for enviado a um programa visto que a cada opcao
se pode associar um numero ou letra, o qual torna-se mais facilmente manipulavel que uma palavra ou
texto. Poderiamos assim escrever linhas do tipo:
<option value="1">Primavera</option>
Deste modo, se o usuario escolhe primavera, o que chegara ao programa (ou ao correio) e uma variavel
chamada estacao que tera com valor 1. No correio eletronico receberiamos:
estacao=1
Botões de radio
Existe outra alternativa para expor uma escolha, neste caso, obrigamos ao internauta a escolher
unicamente uma das opcoes que lhe propoem.
A etiqueta empregada neste caso e <input> na qual teremos a atributo type que temos de tomar o valor
radio. Vejamos um exemplo:
<input type="radio" name="estacao" value="1">Primavera
<br>
<input type="radio" name="estacao" value="2">Verao
<br>
<input type="radio" name="estacao" value="3">Outono
<br>
<input type="radio" name="estacao" value="4">Inverno
Nota: Temos de observar que a etiqueta <input type="radio"> somente coloca o campo para
clicar na pagina. Os textos que aparecem ao lado, assim como as quebras de linha, colocamos
com o correspondente texto no codigo da pagina e com as etiquetas HTML que necessitarmos.
O resultado e o seguinte:
Primavera
Verao
Outono
Inverno
Como podemos ver, a cada uma das opcoes se atribui uma etiqueta input dentro da qual atribuimos o
mesmo nome (name) para todas as opcoes e um valor (value) distinto. Se o usuario escolhe
supostamente Outono, receberemos em nosso correio uma linha tal como esta:
estacao=3
Cabe assinalar que e possivel pre-selecionar por padrao uma das opcoes. Isto se pode conseguir por
meio do atributo checked:
<input type="radio" name="estacao" value="2" checked>Verao
Vejamos o efeito:
Primavera
Verao
Outono
Inverno
Caixas de validação
Estes tipos de elementos podem ser ativados ou desativados pelo visitante com um simples clique sobre
a caixa em questao. A sintaxe utilizada e muita parecida com as vistas anteriormente:
<input type="checkbox" name="paella">Adoro uma feijoada
O efeito:
Adoro uma feijoada
A unica diferenca fundamental e o valor adotado pelo atributo type.
Da mesma forma que para os botoes de radio, podemos ativar a caixa por meio do atributo checked.
O tipo de informacao que chegara ao nosso correio (ou ao programa) sera do tipo:
feijoada=on (ou off dependendo se tiver sido ativada ou nao)
Botão Submit, Apagar Campos e outros em formulários HTML
Os formularios tem de dar lugar nao somente a informacao a tomar do usuario como tambem, a outra
serie de funcoes. Concretamente, permite-nos seu envio mediante seu botao. Tambem pode ser pratico
poder propor um botao de Apagar Campos ou tambem, acompanha-lo de dados ocultos que possam
ajudar-nos em seu processamento.
Neste capitulo, para terminar a saga de formularios, tornaremos conhecidos os meios de instalar todas
estas funcoes.
Botão Submit (ou de envio)
Para finalizar o processo de preenchimento do formulario e faze-lo chegar a seu gestor, o navegante tem
de valida-lo por meio de um botao previsto para tal efeito. A construcao de tal botao nao implica nenhuma
dificuldade uma vez familiarizados com as etiquetas input ja vistas:
<input type="submit" value="Enviar">
Com este codigo geramos um botao como este:
Enviar
Como pode ser visto, somente temos de especificar se trata de um botao de envio (type="submit") e
temos de definir a mensagem do botao por meio do atributo value.
Botão Apagar Campos
Este botao nos permitira apagar o formulario por completo no caso de que o usuario deseje refaze-lo
desde o principio. Sua estrutura sintatica e igual a anterior:
<input type="reset" value="Apagar Campos">
A diferenca do botao de envio, indispensavel em qualquer formulario, o botao de Apagar Campos e
meramente optativo e nao e utilizado frequentemente. Ha de ter cuidado de nao coloca-lo muito perto do
botao de envio e de distinguir claramente um do outro.
Dados ocultos
Em alguns casos, aparte dos proprios dados enviados pelo usuario, pode ser pratico enviar dados
definidos por nos mesmos que ajudem ao programa em seu processamento do formulario. Estes tipos de
dados, que nao se mostram na pagina, mas que podem ser detectados solicitando o codigo fonte, nao
sao frequentemente utilizados por paginas construidas em HTML, sao mais usados por paginas que
empregam tecnologias de servidor. Nao se assustem, pois veremos mais adiante o que isto quer dizer.
Queremos apenas dar constancia de sua existencia e de seu modo de criacao. Como por exemplo:
<input type=hidden name="site" value="www.andrecavalcante.com">
Esta etiqueta, incluida dentro de nosso formulario, enviara um dado adicional ao correio ou ao programa
encarregado da gestao do formulario. Poderiamos a partir deste dado, tornar conhecido ao programa a
origem do formulario ou algum tipo de acao a realizar (um re-enderecamento, por exemplo).
Botões normais
Dentro dos formularios tambem podemos colocar botoes normais, clicaveis como qualquer outro botao.
Da mesma forma que ocorre com os campos hidden, estes botoes por si so nao tem muita utilidade, mas
poderemos necessita-los para realizar acoes no futuro. Sua sintaxe e a seguinte:
<input type=button value="Texto escrito no botao">
Ficaria desta maneira:
O uso mais frequente de um botao e na programacao no cliente. Utilizando linguagens como Javascript
podemos definir acoes a tomar quando um visitante clique o botao de uma pagina web.
Exemplo de formulário
Com este capitulo finalizamos nosso assunto sobre formularios. Passamos agora a exemplificar todo o
aprendido a partir da criacao de um formulario que consulta o grau de satisfacao dos usuarios de uma
linha de onibus ficticia. O formulario esta construido para que envie os dados por correio eletronico a uma
caixa de entrada determinada.
Vemos o formulario nesta pagina. Voces tratem de construi-lo para ver se realmente entenderam bem os
temas sobre formularios.
Nome
E-mail
@
Cidade
Sexo
Homem
Mulher
Frequencia das viagens
Varias vezes por dia
Comentarios sobre sua satisfacao pessoal
Desejo receber notificacao das novidades nas linhas de onibus.
Enviar formulario
Apagar tudo
A seguir tambem mostraremos o codigo fonte deste formulario, que e importante que todos deem uma
olhada, mesmo que seja rapidamente.
<form action="mailto: andre@andrecavalcante.com " method="post" enctype="text/plain">
Nome <input type="text" name="nome" size="30" maxlength="100">
<br>
E-mail <input type="text" name="email" size="25" maxlength="100" value="@">
<br>
Cidade <input type="text" name="cidade" size="20" maxlength="60">
<br>
Sexo
<br>
<input type="radio" name="sexo" value="Masculino" checked> Homem
<br>
<input type="radio" name="sexo" value="Feminino"> Mulher
<br>
<br>
Frequencia das viagens
<br>
<select name="utilizacao">
<option value="1">Varias vezes por dia
<option value="2">Uma vez por dia
<option value="3">Varias vezes por semana
<option value="4">varias vezes por mes
</select>
<br>
<br>
Comentarios sobre sua satisfacao pessoal
<br>
<textarea cols="30" rows="7" name="comentarios"></textarea>
<br>
<br>
<input type="checkbox" name="receber_info" checked>
Desejo receber notificacao das novidades nas linhas de onibus.
<br>
<br>
<input type="submit" value="Enviar formulario">
<br>
<br>
<input type="Reset" value="Apagar tudo">
</form>
Para acabar, vamos ver o que receberiam por correio eletronico na empresa de onibus quando um
usuario qualquer preenchesse este formulario e clicasse sobre o botao de envio.
nome=Frederico Silvestre
e-mail=fede@terramix.com
cidade=Rio de Janeiro
sexo=Masculino
utilizacao=2
comentarios=Acho que nao e uma boa linha. Colocar mais onibus.
receber_info=on
Mapas de imagens com HTML
Nos capitulos anteriores nos aprofundamos no elemento basico de navegacao do web: O link hipertexto.
Vimos que estes links sao palavras, textos ou imagens que, ao clicar sobre eles, nos enviam a outras
paginas ou zonas.
Os mapas de imagem sao uma nova exposicao de navegacao que incorpora uma serie de links dentro de
uma mesma imagem. Estes links sao definidos por figuras geometricas e funcionam exatamente da
mesma forma que os outros links. Pode-se ver o funcionamento de um neste link.
A principio, estes mapas nao eram diretamente reconhecidos pelos navegadores e recorriam a
tecnologias de lado do servidor para serem visualizados. Hoje em dia podem ser implementados por meio
de codigo HTML tal como veremos neste capitulo.
Podemos utilizar estes mapas, por exemplo, em portais onde tornamos conhecida cada uma das sessoes
do site por meio de uma imagem. Tambem pode ser muito pratico, em mapas geograficos onde cada
cidade, estado ou ponto qualquer representa um link a uma pagina.
Em qualquer caso, o uso destes mapas tem de ser sistematicamente acompanhado de um texto
explicativo que de a entender ao usuario sobre os distintos pontos da imagem. Frases como "De um
clique sobre tal icone para acesar a tal informacao". Sao muito indicativas na hora de fazer intuitiva a
navegacao pelos mapas de imagens. Por outro lado, nao e demais introduzir essa mesma explicacao no
atributo alt da imagem.
Sendo assim, um mapa de imagem esta composto por duas partes:
・ A imagem propriamente dita que estara situada como de costume dentro da etiqueta <body> de
nosso documento HTML.
・ Um codigo, situado no interior da etiqueta <map>, que delimitara por meio de linhas geometricas
imaginarias cada uma das areas dos links apresentados na imagem.
As linhas geometricas que delimitan os links, ou seja, as areas dos links, devem ser definidas por meio de
coordenadas. Cada imagem e definida por umas dimensoes de largura (X) e altura (Y) e cada ponto da
imagem pode ser definido portanto, dizendo a que altura (x) e largura (y) nos encontramos. Deste modo, a
esquina superior esquerda corresponde a posicao 0,0 e a esquina inferior direita corresponde as
coordenadas X,Y. Se desejamos saber quais coordenadas correspondem a um ponto concreto de nossa
imagem, o melhor e utilizar um programa de desenho grafico como Photoshop ou Paint Shop Pro.
A melhor forma de explicar o funcionamento deste tipo de mapa e a partir de um exemplo pratico.
Suponhamos que temos uma imagem com um mapa como esta:
Clique nos circulos para acessar as secoes!
Dentro dela queremos introduzir um link a cada um dos elementos que a compoem. Para isso,
definiremos nossos links como zonas circulares de tamanho pequeno que serao distribuidas ao
comprimento e largura da imagem.
Vejamos a seguir o codigo que utilizaremos:
<table border=0 width=450><tr><td align="center">
<map name="mapa1">
<area alt="Clique para ver a pagina de meus amigos" shape="CIRCLE" coords="44,36,29" href="#">
<area alt="Clique para ver minha noiva" shape="CIRCLE" coords="140,35,31" href="#">
<area alt="Clique para conhecer minha familia" shape="circle" coords="239,37,30" href="#">
<area alt="Clique para conhecer meu trabalho" shape="CIRCLE" coords="336,36,31" href="#">
</map>
<img src="../../../../docs/artigos/imagens/mapa1.gif" width="380" height="72" alt="Mapa de imagens. Clique
em cada um dos circulos." border="0" usemap="#mapa1">
<br>
Clique nos circulos para acessar as secoes!
</td></tr></table>
Nota: Os href das áreas vão a #
Este e um exemplo parcial de utilizacao dos mapas, faltaria colocar os href com valores reais e
nao com a #. Cada um dos links das areas -atributo href da etiqueta <area>- deveriam levar a
uma pagina web. O exemplo ficaria completo se criassemos todas as paginas onde linkar as
areas e colocassemos os href dirigidos para tais paginas. Como nao fizemos as paginas
"destino" colocamos links que nao levam a lugar nenhum, que, como se pode ver, indica-se
com o carater "#".
E possivel observar, tal como explicamos antes, que nosso mapa consta de duas partes principais: a
imagem e a etiqueta <map> que define as areas de cada link.
Cada area se indica com uma etiqueta <area>, que tem os seguinte atributos:
alt
Para indicar um texto que sera mostrado quando situarmos o mouse na area.
shape
Indica o tipo de area.
coords
As coordenadas que definem a area. Sera um grupo de valores numericos distintos
dependendo do tipo de area (shape) que estivermos definindo.
href
Para indicar o destino do link correspondente a area.
Neste caso utilizamos umas areas circulares (shape="CIRCLE"), que se definem
indicando o centro do circulo -uma coordenada (X,Y) e o radio, que e um numero inteiro
que se corresponde com o numero de pixels desde o centro ate a borda do circulo.
Tipos de áreas: shape distintas.
Existem tres tipos de areas distintas, suficientes para fazer quase qualquer tipo de figura.
No desenho que acompanha estas linhas pode ser visto uma representacao das areas,
que detalhamos a seguir.
shape="RECT"
Cria uma area retangular. Para defini-la utilizam-se as coordenadas dos pontos da
esquina superior esquerda e da esquina inferior direita. Tal como estao nomeadas tais
coordenadas em nosso desenho, a area teria a seguinte etiqueta:
<area shape="RECT" coords="X1,Y1,X2,Y2" href="#">
shape="CIRCLE"
Cria uma area circular, que se indica com a coordenada do centro do circulo e o radio. De acordo com
nosso desenho, a etiqueta de uma area circular teria esta forma:
<area shape="CIRCLE" coords="X1,Y1,R" href="#">
shape="POLY"
Este tipo de area, poligonal, e a mais complexa de todas. Um poligono fica definido indicando todos seus
pontos, mas atencao, pois temos que indica-los em ordem, seguindo o caminho marcado pelo perimetro
do poligono. Segundo nosso desenho e os nomes que demos aos pontos do poligono, a etiqueta <area>
ficaria desta forma:
<area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#">
Frames em HTML
Uma das mais modernas caracteristicas de HTML sao os frames, que foram acrescentados tanto em
Netscape Navigator como em Internet Explorer, a partir de suas versoes 2.0. Os frames -que significam
em portugues janelas- sao uma forma de dividir a pagina em diferentes espacos independentes uns dos
outros, de forma que em cada espaco se coloca uma pagina diferente que se codifica em uma arquivo
HTML diferente.
A principio se criaram como etiquetas proprietarias do navegador Netscape e rapidamente a potencia do
recurso fez com que o uso de frames se estendesse por toda a web. Pouco tempo demoraria para
Internet Explorer inclui-los, pois nao podia deixar escapar uma novidade tao popular de seu competidor.
Finalmente, como resposta a popularidade entre os desenvolvedores dos frames, o padrao HTML 4.0
incluiu estas etiquetas dentro das permitidas.
Os frames, como diziamos, nos permitem dividir a janela do navegador em diferentes areas. Cada uma
destas areas sao independentes e devem ser codificadas com arquivos HTML tambem independentes.
Como resultado, cada frame ou janela contem as propriedades especificas que indicamos no codigo
HTML apresentado nesse espaco. Sendo assim, e dado que cada janela e independente, terao suas
proprias barras de deslocamento, horizontais e verticais, separadamente.
Existem muitas paginas na web que contem frames e certamente todos ja tiveram a ocasiao de conhecer
algumas. Costuma se utilizar para colocar em uma parte da janela uma barra de navegacao, que
geralmente encontra-se fixa e permite o acesso a qualquer zona da pagina web. Uma das principais
vantagens da programacao com frames vem derivada da independencia dos distintos frames, pois
podemos navegar pelos conteudos de nosso site web com a barra de navegacao sempre visivel, e sem
que se tenha que recarregar em cada uma das paginas que vamos visitando.
Um exemplo das areas que se podem construir em uma construcao de frames pode ser visto nas
imagens a seguir.
Frames – Explicação básica
As paginas web que estao feitas com frames se compoem de uma declaracao das janelas e tantas
paginas em formato HTML corrente como distintas divisoes tivermos definido. A declaracao ou definicao
de frames e a unica pagina que realmente devemos aprender, visto que as paginas que serao
visualizadas em cada uma das janelas sao arquivos HTML dos que viemos aprendendo anteriormente
neste manual.
Tal definicao esta composta por etiquetas <FRAMESET> e <FRAME>, com as quais indicamos a
disposicao de todos os quadros. A etiqueta <FRAMESET> indica as divisoes da janela do navegador e a
etiqueta <FRAME> indica cada um dos quadros onde colocaremos uma pagina independente.
As particoes que se podem fazer com um <FRAMESET> sao em filas ou colunas. Por exemplo,
poderiamos indicar que desejamos fazer uma divisao da pagina em duas filas, ou duas colunas, tres filas,
etc. Para indicar tanto a forma de dividir a janela -em filas ou colunas- como o numero de particoes que
pretendemos fazer, temos de utilizar o atributo COLS ou ROWS. O primeiro serve para indicar uma
particao em colunas e o segundo para uma particao em filas.
Nota: E importante indicar que nao se pode fazer uma particao em filas e colunas de uma vez
so, e sim, que devemos escolher em dividir a janela em uma das duas disposicoes. Mais
adiante, indicaremos como dividir a janela tanto em filas como em colunas, que e feito com o
acrescimo de frames.
No atributo COLS ou ROWS -somente podemos escolher um dos dois- colocamos entre aspas o numero
de divisoes que desejamos realizar, indicando de antemao o tamanho que vai atribuir a cada uma. Um
valor tipico destes atributos seria o seguinte:
cols="20%,80%"
Indica que devem ser colocadas duas colunas, a da esquerda teria uns 20% do espaco total da janela e a
da direita uns 80%.
rows="15%,60%,25%"
Assim, indicamos que desejamos tres filas, a de cima com um 15% do espaco total, a do meio com um
espaco correspondente ao 60% do total e a de abaixo com um 25%. Ao total somam o 100% do espaco
da janela.
Alem da porcentagem para indicar o espaco de cada um dos campos, tambem podemos indica-lo em
pixels. Desta maneira:
cols="200,600"
Para indicar que a coluna da esquerda deve ter 200 pixels de largura e a da direita 600. Isto esta bem se
nossa janela tem 800 pixels de largura, mas isto nao tem porque ser assim em todos os monitores dos
usuarios, por isso e importante que este modo de expressar as janelas se indique da seguinte maneira.
cols="200,*"
Assim, indicamos que a primeira coluna tem de medir 200 pixels e que o resto do espaco disponivel -que
sera maior ou menor dependendo da definicao da tela do usuario- se atribuira a segunda coluna.
Na pratica podemos misturar todos estes metodos para definir as janelas da maneira de desejarmos, com
porcentagem, com pixels ou com o asteristico (*). Nao importa como se definem, a unica recomendacao e
que um dos valores que indiquemos seja um asterisco, para que a area correspondente a tal asterisco
seja mais ou menos grande dependendo do espaco que tenha a janela de nosso navegador. Outros
metodos de definir filas e colunas, atendendo a este conselho, seriam os seguintes:
rows="100,*,12%"
Definimos tres filas, a primeira com 100 pixels de largura, a segunda com o espaco que sobre das outras
duas, e a terceira com um 12% do espaco total.
cols="10%,50%,120,*"
Estamos indicando quatro colunas. A primeira de 10% do espaco da janela, a segunda com a metade
justa da janela, a terceira com um espaco de 120 pixels e a ultima com a quantidade de espaco que sobre
ao atribuir espaco as demais particoes.
Uma vez indicado o numero de filas ou colunas e o espaco reservado a cada uma com a etiqueta
<FRAMESET>, devemos especificar com a etiqueta <FRAME> a procedencia de cada um dos frames
que dividimos a janela.
Para isso, dispomos do atributo SRC, que tem de ser definido para cada uma das filas ou colunas. Desta
maneira.
<FRAME src="janela1.html">
Assim fica indicado que o frame que estamos definindo deve mostrar a pagina janela1.html em seu
interior.
Frames – Criação de uma estrutura simples
Para ilustrar tudo o que viemos explicando podemos ver o exemplo sobre como se criaria a definicao de
frames da imagem que podemos ver a seguir.
<html>
<head>
<title>Definicao de Frames</title>
</head>
<frameset rows="15%,*,75">
<frame src="pagina1.html">
<frame src="pagina2.html">
<frame src="pagina3.html">
</frameset>
</html>
Pode-se ver esta particao de frames em uma pagina a parte.
Alem disso, temos algumas consideracoes a fazer para terminar de compreender este exemplo:
・ O titulo da definicao de frames e o que herda toda a pagina web, por isso, nao e boa ideia titular
como "definicao de frames" por exemplo, ja que entao toda nossa pagina se titularia assim e
certamente nao seria muito descritivo. Se estivessemos fazendo uma pagina para o acougue
Goncalves seria melhor titular a definicao de frames algo como "Acougue Goncalves, as
melhores carnes no Rio de Janeiro".
・ A pagina que define os frames nao tem body. O HTML pode totalizar um erro se o incluirmos.
・ As paginas "pagina1.html", "pagina2.html" e "pagina3.html" devem ser escritas em arquivos
independentes com o nome indicado. Neste exemplo, Tais paginas deveriam se encontrar no
mesmo diretorio que a declaracao de frames. Se especificarmos uma rota para acessar ao
arquivo podemos coloca-lo no diretorio que desejarmos.
・ As cores de cada um dos frames colocamos com o atributo bgcolor colocado na etiqueta
<BODY> de cada uma das paginas que se mostram nas janelas.
Frames – Uma página em cada janela
As paginas que mostraremos em cada janela sao documentos HTML iguais aos que viemos criando
anteriormente. Podemos colocar qualquer elemento HTML dos estudados neste manual, como
etiquetas de paragrafo, imagens, cores de fundo, etc.
Cada documento, como ja indicamos, se escreve separado em seu proprio arquivo HTML. Para o
exemplo do capitulo anterior podemos definir os arquivos HTML da seguinte maneira.
pagina1.html
E a pagina que contem o titulo da web. Simplesmente se trata de uma etiqueta <H1> de titulo. A
pagina tem seu proprio titulo, com a etiqueta <TITLE>, que nao podera ser visualizada nenhum lugar,
a nao ser que se mostre esta pagina sem os frames, ja que as paginas dentro das janelas herdam o
titulo da definicao dos frames.
<html>
<head>
<title>Titulo Acougue Goncalves</title>
</head>
<body bgcolor="#DECC09">
<h1 align=center>Acougue Goncalves</h1>
</body>
</html>
pagina2.html
E a pagina que se apresentara na area principal da definicao de frames, ou seja, a pagina que tem
mais espaco para ser visualizada e onde colocaremos os conteudos da web. Neste caso, mostra uma
mensagem de bem-vindo a web, que fara as vezes de portal.
<html>
<head>
<title>Portal do Acougue Goncalves</title>
</head>
<body bgcolor="#CF391C" text="#ffffff">
<h1 align="center">Bem-vindo a nossa web</h1>
<br>
<br>
O acougue Goncalves, com mais de 100 anos de experiencia, e a melhor fonte de carnes de boi e de
porco da regiao.
<br>
<br>
Tanto no inverno como no verao voce pode encontrar nossas ofertas de temporada de primeira
qualidade.
</body>
</html>
pagina3.html
Nesta pagina se mostrara a barra de navegacao pelos conteudos do site. Contem links que deveriam
atualizar o conteudo da area principal da declaracao de frames, para mostrar os distintos conteudos
do sitio, por exemplo, o portal, os produtos, a pagina de contato, etc.
<html>
<head>
<title>Barra de navegacao de acougue Goncalves</title>
</head>
<body bgcolor="#AC760E" link="ffffcc" vlink="ffffcc">
<div align="center">
<b>
<a href="pagina2.html">Portal</a> |
<a href="produtos.html">Produtos</a> |
<a href="contato.html">Contato</a>
</b>
</div>
</body>
</html>
Podemos ver como fica a pagina de frames com estes conteudos, que simulam a pagina de um
acougue.
Frames – Orientar os links
A unica particularidade destacavel no exemplo do capitulo anterior, no manejo de frames em geral,
trata-se de que cada um dos links que colocamos nas páginas atualizam o frame onde está
colocado este link. Por exemplo, se temos link na parte inferior da janela, no espaco
correspondente a terceira janela, atualizarao os conteudos do terceiro frame, que e onde estao
situados os links.
Este efeito que comentamos pode-se observar no exemplo da pagina do acougue, tal como ficaria ao
incluir os codigos das distintas paginas.
O logico e que ao clicar sobre um link da barra de navegacao atualizamos o frame principal, que e
onde haviamos planejado colocar os conteudos, no lugar do frame onde colocamos a barra de
navegacao, que deveria se manter fixa. Para conseguir este efeito devemos fazer duas coisas:
1. Dar um nome ao frame que desejamos atualizar
Tal nome se indica na etiqueta <FRAME> da definicao de frames. Para isso utilizamos o atributo
name, igualado ao nome que queremos dar a tal janela.
2. Orientar os links para esse frame
Para isso devemos colocar no atributo target dos links -etiqueta <A>- o nome do frame que
desejamos atualizar ao clicar o link.
Depois de dar um nome ao frame principal, nossa declaracao de frames ficaria da seguinte maneira.
<frameset rows="15%,*,75">
<frame src="pagina1.html">
<frame src="pagina2.html" name="principal">
<frame src="pagina3.html">
</frameset>
Ademais, deveriamos colocar o atributo target aos links, tal como se segue.
<a href="pagina2.html" target="principal">Portal</a> |
<a href="produtos.html" target="principal">Produtos</a> |
<a href="contato.html" target="principal">Contato</a>
Uma vez realizados estas duas mudancas podemos ver como os links da barra de navegacao sim que
atualizam a pagina que devem.
Valores para o atributo target
Como vimos, com o atributo target da etiqueta <A> podemos indicar o nome do frame que desejamos que
atualize esse link. Entretanto, este nao e o unico valor que podemos aplicar ao atributo. Temos alguns
valores adicionais que podemos atribuir a qualquer link em geral.
_blank
Para fazer com que esse link se abra em uma janela a parte. Nossos exemplos neste manual costumam
abrir em uma janela a parte, colocando este valor no target dos links que levam aos exemplos.
_self
Atualiza o frame onde esta situado o link. E o valor por padrao.
_parent
O link se atualiza sobre seu pai ou sobre a janela que estamos trabalhando, se nao tiver um pai.
_top
A pagina carrega a tela completa, ou seja, eliminando todos os frames que pudesse haver. Este atributo e
muito importante porque se colocamos em nossa pagina com frames um link a uma pagina externa, se
abriria em um dos frames e se manteriam visiveis outros frames da pagina, fazendo um efeito que
costuma ser pouco agradavel, porque parece que estao evitando que nos escapemos.
A sintaxe de um desses valores de atributos colocados em um link seria a seguinte:
<A href="http://www.andrecavalcante.com" target="_top">Acessar a andrecavalcante.com</A>
Frames – Aninhar frames
Para criar estruturas de janelas nas quais se misturam as filas e as colunas devemos aninhar etiquetas
<FRAMESET>. Comecando pela particao de frames mais geral, devemos colocar dentro as particoes de
frames menores. A maneira de indicar isto se pode ver facilmente com um exemplo.
Os passos para definir o aninhamento podem ser encontrados a direita.
Os distintos frames veem numerados com a ordem
na qual sao escritas no codigo.
Na imagem pode ser visto o resultado final acompanhada da representacao sobre a maneira de defini-los.
Em primeiro definimos uma estrutura de frames em duas colunas e dentro da primeira coluna colocamos
outra particao de frames em duas filas. O codigo necessario e o seguinte.
<frameset cols="200,*">
<frameset rows="170,*">
<frame src="pagina1.html">
<frame src="pagina2.html">
</frameset>
<frame src="pagina3.html">
</frameset>
Podemos ver o exemplo em uma pagina a parte.
Nota: colocamos uma margem em cada uma das linhas desta definicao de frames para
conseguir um codigo mais compreensivel visualmente. Estas margens nao sao em absoluto
necessarios, simplesmente nos servem para ver em que nivel de aninhamento nos
encontramos.
O exemplo anterior pode se complicar um pouco mais se incluirmos mais particoes. Vamos ver algo um
pouco mais complicado para praticar mais com os aninhamentos de frames.
Os passos para definir o aninhamento podem ser encontrados a direita.
Os distintos frames veem numerados com a ordem
na qual se escrevem no codigo.
Na imagem se observa que o primeiro frameset a definir se compoe de duas filas. Posteriormente, dentro
da segunda fila do primeiro frameset, temos outra particao em duas colunas, dentro das que colocamos
um terceiro nivel de frameset com uma defincao em filas nos dois casos. O codigo pode ser visto a seguir.
<frameset rows="60,*">
<frame src="pagina1.html">
<frameset cols="200,*">
<frameset rows="*,150">
<frame src="pagina2.html">
<frame src="pagina3.html">
</frameset>
<frameset rows="*,60">
<frame src="pagina4.html">
<frame src="pagina5.html">
</frameset>
</frameset>
</frameset>
Podemos ver o exemplo em uma pagina a parte.
Ate aqui vimos a parte mais basica da criacao de frames. Nos proximos capitulos poderemos aprender a
configurar as janelas para variar sua aparencia e, entre outras coisas, eliminar as barras que separam
cada um dos distintos frames.
Frames – Atributos avançados
A parte da criacao das janelas propriamente dita, existem muitos atributos com os que configurar sua
aparencia. Para isso, tanto a etiqueta <frameset> como <frame> admitem diversos atributos que
permitem especificar a forma de elementos como as bordas dos frames, a margem, a existencia ou nao
de barras de deslocamento, etc.
Atributos para a etiqueta <frameset>
Ja conhecemos o atributo cols e rows, que servem para indicar se a distribucao em janelas se fara
horizontalmente ou verticalmente. Somente se pode utilizar um deles e se iguala as dimensoes de cada
uma das divisoes, separadas por virgulas.
Manual de Programação
border="número de pixels"
Permite especificar de maneira global para todo o frameset o numero de pixels que ha de ter a borde dos
frames.
bordercolor="#rrggbb"
Com este atributo podemos modificar a cor da borda dos frames, tambem de maneira global a todo o
frameset.
frameborder="yes|no|0"
Serve para mostrar ou nao a borda do frame. Seus possiveis valores sao "yes" (para que se vejam as
bordas) e "nao" ou "0" (para que nao se vejam). Na pratica elimina a borda, mas permanece uma linha de
separacao dos frames.
framespacing="número de pixels"
Para determinar a largura da linha de separacao dos frames. Pode -se utilizar em Internet Explorer e junto
com o atributo frameborder="0" serve para eliminar a borda das janelas.
Atributos para a etiqueta <frame>
Para esta etiqueta, assinalamos nos capitulos anteriores os atributos src, que servem para indicar o
arquivo que contem a janela e name, para dar um nome a janela e logo direcionar os links para ele.
Vejamos agora outros atributos disponiveis.
marginwidth="número de pixels"
Define o numero de pixels que tem a margem do frame onde se indica. Esta margem se aplica a pagina
que pretendemos ver nessa janela, de modo que se colocamos 0, os conteudos da pagina nessa janela
estarao completamente grudados na borda da margem e se indicamos um valor de 10, os conteudos da
pagina estariam separados da borda 10 pixels.
marginheight="número de pixels"
O mesmo que o atributo anterior, mas para a margem vertical.
scrolling="yes|no|auto"
Serve para indicar se queremos que haja barras de deslocamento nas diferentes janelas. Se indicamos
"yes" sempre sairao as barras, se indicamos "no" nao sairao nunca e se colocamos "auto" sairao somente
se forem necessarias. Auto e o valor por padrao.
Conselho: Ha que ter cuidado se eliminamos as bordas dos frames, visto que a a pagina web
pode ter dimensoes distintas dependendo da definicao de tela do visitante. Se o espaco da
janela se ve reducido, poderia se ver reduzido o espaco para o frame e pode acontecer de nao
caber os elementos que antes sim cabiam e se eliminamos as barras de deslocamento pode
ser que o visitante nao possa ver todo o conteudo da janela.
Este mesmo conselho pode ser aplicado ao redimensionamento de frames, que veremos no
seguinte atributo. Se fizermos com que as janelas nao sejam redimensionaveis provavelmente
teriamos uma declaracao de frames demasiado rigida, que pode ser mal vista em algum tipo
de tela.
noresize
Este atributo nao tem valores, simplesmente se coloca ou nao se coloca. No caso de que esteja presente
indica que o frame nao se pode redimensionar. Como podemos ver, ao colocar o mouse sobre a borda
das janelas sai um cursor que nos assinala que podemos mover tal borda e redimensionar assim os
frames. Por padrao, se nao colocamos nada, as janelas podem ser redimensionadas.
frameborder="yes|no|0"
Este atributo permite controlar a aparicao das bordas dos frames. Com este atributo igualado a "0" ou
"nao" as bordeas se eliminam. Entretanto, ficam as feias margens na borda. Pelo que podemos
comprovar funciona melhor no Netscape do que no Internet Explorer. De qualquer forma, temos um pouco
mais adiante, uma nota para explicar os frames sem bordas.
Nota: os atributos de frames nao funcionam sempre bem em todos os navegadores. E
recomendavel fazermos um teste sobre o que estamos desenhando em varios navegadores
para comprovar que nosos frames se veem bem em todas as plataformas.
bordercolor="#rrggbb"
Permite especificar a cor da borda da janela.
Vantagens e incovenientes do uso de frames
O desenho com frames e um assunto bastante controvertido, ja que distintos desenhadores podem ter
outras opinioes.
Referência: Se voce deseja saber o que sao os frames e como cria-los consulte os capitulos
de Frames de nosso manual de HTML.
No meu caso, penso que e preferivel nao utiliza-los, apesar de que isso depende do tipo de web site que
esteja construindo, pois em alguns casos sim que seria muito adequado seu uso.
Colocarei algumas vantagens e alguns inconvenientes deo uso de janelas (frames). Isto e ao meu ponto
de vista, outros podem ter outras opinioes.
Vantagens de usar frames
・ A navegacao da pagina sera mais rapida. Apesar de que o primeiro caerregamento da pagina
seria igual, em sucessivas impressoes paginas ja teremos algumas janelas salvas, que nao
teriam que voltar a descarregar.
・ Criar paginas do site seria mais rapido. Como nao temos que incluir partes de codigo como a
barra de navegacao, titulo, etc. criar novas paginas seria um processo muito mais rapido.
・ Partes da pagina (como a barra de navegacao) se mantem fixas e isso pode ser bom, para que o
usuario nao as perca nunca de vista.
・ Estas mesmas partes visiveis constantemente, se contem links, podem servir muito bem para
melhorar a navegacao pelo site.
・ Mantem uma navegabilidade do site onde se navega, pois os elementos fixos conservam a
imagem sempre visivel.
Inconvenientes de usar frames
・ Tiram espaco da tela. O espaco ocupado pelos frames fixos se perde na hora de fazer paginas
novas, porque ja esta utilizado. Em definicoes de tela pequena ou em dispositivos como Palms,
este problema se torna mais patente.
・ Forcam ao visitante a entrar pela declaracao de frames. Se nao o fazem assim, somente se veria
una pagina interior sem os requadros. Estes requadros poderian ser insuficientes para uma boa
navegacao pelos conteudos e poderiam nao conservar uma boa imagem corporativa.
・ A promocao da pagina seria, a principio, mais limitada. Isto e devido a que somente se deveria
promocioanr o portal, pois se se promocionam paginas interiores, poderia acontecer o caso em
que os visitantes entrassem por elas no lugar do portal, criando o problema descrito no ponto
anterior.
・ Muita gente nao gosta porque nao se sentem livers na navegacao, pois entendem que estas
partes fixas estao limitando sua mobilidade pela web. Este efeito se torna mais patente se a
pagina com frames tem links a outras paginas web fora do site e, ao clicar um link, se mostra a
pagina nova com as janelas da pagina que tem frames.
・ Alguns navegadores nao os suportam. Isto nao e muito habitual, mas se estamos fazendo uma
pagina que queremos que seja totalmente acessiivel deveriamos considera-lo importante.
・ Os bookmarks ou favoritos nao funcionam corretamente em muitos casos. Se quisermos incluir
um favorito a uma pagina de um frame que nao seja o portal podemos encontrar problemas.
・ Pode acontecer que o botao detras do navegador nao se comporte como desejamos.
・ Se voce quer atualizar mais de um frame com o clique de um link devera utilizar Javascript.
Ademais os scripts podem se complicar bastante quando tem de comunicar varios frames entre
si.
Conclusão
O trabalho com frames pode ser mais ou menos indicado dependendo das caracteristicas da pagina a
desenvolver, e sua tarefa saber se no seu caso deve utiliza-los ou nao.
