Capítulo 8

Formulários

Os formulários eletrônicos são um dos mais fascinantes recursos da linguagem

HTML pois através deles um usuário pode interagir com o sevidor enviando-
lhe dados para serem processados. Os comandos de criação de formulários
são, portanto, os principais responsáveis pela troca de informações entre
cliente e servidor.
Neste capítulo, você aprenderá a criar um formulário usando os recursos
da linguagem HTML. Porém, para que um formulário funcione, é neces-
sário que no lado do servidor exista um outro programa, escrito em outra
linguagem de programação, que será o responsável pelo recebimento e pro-
cessamento das informações enviadas. Este tipo de programa é denominado
CGI e não será abordado neste curso.

8.1 O marcador FORM

As marcações <FORM> e </FORM> são usadas para denir um formulário.
Este comando tem duas funções importantes: especicar o local do programa
que controlará o formulário e denir a forma ou método como os dados serão
enviados.
O comando FORM possui os seguintes parâmetros:

ACTION=URL - Especica o local (URL) do servidor e do programa

CGI que vai processar os dados do formulário.

METHOD=Método de troca de dados - Indica o método usado pelo

servidor para receber os dados do formulário. As opções possíveis para

59
60

este parâmetro são:

GET - As informações são enviadas como se zessem parte da URL.

POST - As informações são enviadas num bloco de dados separado
da URL. É o método mais utilizado.

Sintaxe: <FORM ACTION=URL METHOD=método > [Campos do

formulário] </FORM>
Nos exemplos das seções seguintes ignoraremos os parâmetros do comando
FORM, uma vez que não estaremos realizando envio de informação através
dos formulários apresentados.

8.2 O marcador INPUT

O marcador INPUT dene um campo de entrada de dados, onde o usuário
digita as informações requeridas pelo formulário. Cada campo de um formu-
lário atribui seu conteúdo a uma variável que possui nome e tipo especícos.
Os parâmetros do marcador INPUT são os seguintes:

TYPE=Tipo de variável - Especica o tipo de dado para a variável.

Suas opções possíveis são:

TEXT - Aceita dados do tipo caractere. É o tipo de variável mais

usado para a digitação de um campo de texto com tamanho co-
nhecido. Por padrão, a caixa de digitação criada para este tipo de
variável terá largura equivalente a 20 caracteres, não impõe limite
para a quantidade de caracteres digitados.

PASSWORD - Aceita dados do tipo caractere. Funciona exatamente

como uma variável do tipo TEXT, porém, exibe um asterisco no
lugar de cada caractere digitado para impedir sua visualização na
tela. É ideal para a digitação de senhas e palavras-chave.

RADIO - Aceita campos do tipo sim/não. Permite a exibição de

várias opções, mas só aceita que uma delas seja escolhida. O
campo de entrada de dados criado para este tipo de variável é
um pequeno círculo, que pode ser marcado com um clique. Dois
círculos associados à mesma variável não podem estar marcados
simultaneamente, pois quando o usuário clicar sobre o segundo, o
primeiro será automaticamete desmarcado.
UFF PET-TELE))) 61

CHECKBOX - Aceita campos do tipo sim/não. Permite a exibição

de várias opções e aceita que o usuário escolha várias delas. O
campo de entrada de dados criado para este tipo de variável é um
pequeno quadrado, que pode ser marcado com um clique.

SUBMIT - Cria um botão que envia o conteúdo do formulário ao

ser pressionado. Os dados são enviados para a URL especicada
no parâmetro ACTION e de acordo com o método escolhido no
parâmetro METHOD do comando FORM. Por padrão, a legenda
do botão criado será `Submit'

RESET - Cria um botão que, ao ser pressionado, possibilita ao usuário

apagar e restabelecer o valor padrão para todos os campos do
formulário de uma única vez. Por padrão, a legenda do botão
criado será `Reset'.

HIDDEN - Dene um campo invisível, cujo conteúdo é enviado junto

com os demais.

NAME=nome - Nome da variável que receberá o conteúdo do campo.

Este parâmtero é essencial na sintaxe de criação de qualquer campo de
entrada de dados, seja qual for o tipo de variável escolhido.

VALUE=valor - Permite denir um conteúdo prévio para campos dos

tipos TEXT e PASSWORD, ou seja, um texto que aparecerá escrito
na caixa de digitação quando o formulário for aberto. Para os campos
do tipo CHECKBOX ou RADIO representa o valor que será atribuído
à variável se a opção for marcada. Para os campos SUBMIT e RESET
indica o texto que aparece no botão. Este parâmetro é obrigatório
apenas para variáveis dos tipos CHECKBOX e RADIO.

CHECKED - Só se aplica a campos do tipo CHECKBOX e RADIO. Os

campos cuja sintaxe de criação possui este parâmetro aparecerão mar-
cados quando o formulário for aberto.

SIZE=tamanho - Dene a quantidade de caracteres exibidos em campos

do tipo TEXT ou PASSWORD. Este número delimita apenas o tama-
nho do campo para digitação, e não a quantidade de caracteres que o
campo pode ter.

MAXLENGTH=comprimento - Dene o número máximo de caracte-

res permitidos para variáveis do tipo TEXT ou PASSWORD.
62

ID=String de identicação - Identica o campo para permitir que seja

criada uma tecla de atalho para ele.

Sintaxe básica para campos do tipo TEXT:

<INPUT TYPE=textNAME=nome >.
Sintaxe completa: <INPUT TYPE=text NAME=nome SIZE=tamanho
MAXLENGTH=comprimento VALUE=valor >.
Sintaxe básica para campos do tipo PASSWORD:
<INPUT TYPE=password NAME=nome >.
Sintaxe completa: <INPUT TYPE=password NAME=nome
SIZE=tamanhoMAXLENGTH=comprimento VALUE=valor >.
Sintaxe básica para campos do tipo RADIO:
<INPUT TYPE=radio NAME=nome VALUE=valor >.
Sintaxe completa: <INPUT TYPE=radio NAME=nome VALUE=valor
CHECKED>.
Sintaxe básica para campos do tipo CHECKBOX:
<INPUT TYPE=checkbox NAME=nome VALUE=valor >.
Sintaxe completa: <INPUT TYPE=radio NAME=nome VALUE=valor
CHECKED>.
Digite o exemplo abaixo e salve-o como `[Link]'.

<HTML>
<HEAD>
<TITLE> Formul&aacute;rios 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Ficha de Inscri&ccedil;&atilde;o</H1>
</CENTER>
<FORM>
Nome: <INPUT TYPE=text NAME=nome>
<P>Sexo:
<INPUT TYPE=radio NAME=sexo VALUE=m>Masculino
<INPUT TYPE=radio NAME=sexo VALUE=f>Feminino
<P> Assinale abaixo os programas de computador que voc&ecirc; domina:
<BR><INPUT TYPE=checkbox NAME=prog VALUE=word> Word
<BR><INPUT TYPE=checkbox NAME=prog VALUE=excel> Excel
<BR><INPUT TYPE=checkbox NAME=prog VALUE=access> Access
UFF PET-TELE))) 63

<BR><INPUT TYPE=checkbox NAME=prog VALUE=powerpoint>

Power Point
<P ALIGN=center> <INPUT TYPE=submit VALUE=Enviar> <INPUT
TYPE=reset VALUE=Apagar Campos > </P>
</FORM>
</BODY>
</HTML>

8.3 Os marcadores SELECT e OPTION

As tags <SELECT> e </SELECT> denem e exibem uma lista de itens que
podem ser selecionados pelo usuário. Visualmente elas criam uma lista de
seleção onde uma caixa é exibida com o valor padrão, e o clique em uma seta
faz surgir uma lista de opções. Um ou mais itens podem ser selecionados.
Os parâmetros do comando SELECT são:

NAME=nome - Especica o nome da variável que receberá o conteúdo

do campo.

SIZE=tamanho - Especica a quantidade de itens que será exibida de

uma vez pela lista. Este parâmetro é opcional.

MULTIPLE - Indica que podem ser escolhidos vários itens da lista. É

opcional.

<SELECT NAME=nome > [Itens da lista] </SELECT>.

Sintaxe básica:
Sintaxe completa: <SELECT NAME=nome SIZE=tamanho
MULTIPLE> [Itens da lista] </SELECT>.
Cada item da lista deve ser especicado pelo comando OPTION, cujos
principais parâmetros são:

VALUE=conteúdo - Dene o conteúdo que a variável correspondente

receberá caso a opção seja selecionada.

SELECTED - Indica que a opção deve ser previamente marcada como se-
lecionada.

Sintaxe básica: <OPTION VALUE=valor >.

Sintaxe completa: <OPTION VALUE=valor SELECTED>.
Complemente o exemplo `[Link]' conforme o indicado abaixo.
64

<HTML>
<HEAD>
<TITLE> Formul&aacute;rios 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Ficha de Inscri&ccedil;&atilde;o</H1>
</CENTER>
<FORM>
Nome: <INPUT TYPE=text NAME=nome>
<P>Sexo:
<INPUT TYPE=radio NAME=sexo VALUE=m>Masculino
<INPUT TYPE=radio NAME=sexo VALUE=f>Feminino
<P> Assinale abaixo os programas de computador que voc&ecirc; domina:
<BR><INPUT TYPE=checkbox NAME=prog VALUE=word> Word
<BR><INPUT TYPE=checkbox NAME=prog VALUE=excel> Excel
<BR><INPUT TYPE=checkbox NAME=prog VALUE=access> Access
<BR><INPUT TYPE=checkbox NAME=prog VALUE=powerpoint>
Power Point
<P> Cargo:</P>
<SELECT NAME=cargo>
<OPTION VALUE=analista>Analista de Sistemas
<OPTION VALUE=gerente>Gerente
<OPTION VALUE=programador>Programador C
<OPTION VALUE=Webmaster>Webmaster
</SELECT>
<P ALIGN=center> <INPUT TYPE=submit VALUE=Enviar> <INPUT
TYPE=reset VALUE=Apagar Campos > </P>
</FORM>
</BODY>
</HTML>

8.4 O marcador TEXTAREA

As marcações <TEXTAREA> e </TEXTAREA> denem uma caixa de
digitação onde o usuário pode digitar livremente um texto. Esta caixa pode
UFF PET-TELE))) 65

ser previamente preenchida com algum texto que deve ser especicado no
local de `texto padrão'.
Os parâmetros do comando TEXTAREA são:

NAME=nome - Especica o nome da variável que receberá o conteúdo

do campo.

ROWS=número - Especica a altura, ou seja, a quantidade de linhas

que a caixa deve ter.

COLS=número - Especica a largura, ou seja, a quantidade de colunas

que a caixa deve ter.

<TEXTAREA NAME=nome
Assim, sua sintaxe é: ROWS=número
COLS=número > Texto Padrão </TEXTAREA>.
Complemente mais uma vez o exemplo `[Link]' conforme o indicado.

<HTML>
<HEAD>
<TITLE> Formul&aacute;rios 1 </TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Ficha de Inscri&ccedil;&atilde;o<H1>
</CENTER>
<FORM>
Nome: <INPUT TYPE=text NAME=nome>
<P>Sexo:
<INPUT TYPE=radio NAME=sexo VALUE=m>Masculino
<INPUT TYPE=radio NAME=sexo VALUE=f>Feminino
<P> Assinale abaixo os programas de computador que voc&ecirc; domina:
<BR><INPUT TYPE=checkbox NAME=prog VALUE=word> Word
<BR><INPUT TYPE=checkbox NAME=prog VALUE=excel> Excel
<BR><INPUT TYPE=checkbox NAME=prog VALUE=access> Access
<BR><INPUT TYPE=checkbox NAME=prog VALUE=powerpoint>
Power Point
<SELECT NAME=cargo>
<OPTION VALUE=analista>Analista de Sistemas
<OPTION VALUE=gerente>Gerente
66

<OPTION VALUE=programador>Programador C
<OPTION VALUE=Webmaster>Webmaster
</SELECT>
<P> Por que deseja trabalhar em nossa empresa?
<BR><TEXTAREA ROWS=6 COLS=40
NAME=pq>M&iacute;nimo de 3 linhas!</TEXTAREA>
<P ALIGN=center> <INPUT TYPE=submit VALUE=Enviar> <INPUT
TYPE=reset VALUE=Apagar Campos > </P>
</FORM>
</BODY>
</HTML>

8.5 Alinhamento de campos em formulários

8.5.1 Usando o marcador PRE
Um dos problemas que o programador pode enfrentar na criação de formulá-
rios é o fato de os campos do formulário não carem alinhados naturalmente.
Uma técnica simples de alinhamento consiste em envolver os comandos
relativos aos campos de formulário pelas marcações <PRE> e </PRE>.
O texto formatado pelo comando PRE é exibido em uma fonte de largura
xa, ou seja, todas as letras possuem a mesma largura. Desta forma, basta
acrescentar os espaços necessários entre o rótulo do campo e o comando
INPUT para que seja feito o alinhamento.

8.5.2 Usando tabelas

Uma técnica mais versátil consiste na utilização de tabelas para alinhar os
campos. Nesta técnica a tabela deve possuir colunas de títulos e colunas
de campos. Para ter uma noção mais clara desta técnica, digite o exemplo
abaixo. Salve-o como `[Link]'.

<HTML>
<HEAD>
<TITLE> Formul&aacute;rios 2 - Alinhamento Usando Tabelas
</TITLE>
</HEAD>
<BODY>
UFF PET-TELE))) 67

<P> Alinhamento usando tabela

<FORM>
<TABLE>
<TR>
<TD>Nome:</TD>
<TD><INPUT TYPE=text NAME=nome></TD>
<TD>E-mail:</TD>
<TD><INPUT TYPE=text NAME=email></TD>
</TR>
<TR>
<TD>Telefone:</TD>
<TD><INPUT TYPE=text NAME=tel></TD>
<TD>Celular:</TD>
<TD><INPUT TYPE=text NAME=cel></TD>
</TR>
</TABLE>
<P> <INPUT TYPE=submit VALUE=Enviar> <INPUT TYPE=reset
VALUE=Apagar Campos >
</FORM>
</BODY>
</HTML>

8.6 Agrupamento de campos com o marcador

FIELDSET
O marcador FIELDSET é utilizado para envolver campos com uma moldura.
Basta que os campos sejam criados entre as marcações <FIELDSET> e
</FIELDSET>. Sua sintaxe básica é: <FIELDSET> [Campos] </FIELDSET>.
Além disso, o comando LEGEND, denido dentro do comando FIELD-
SET, permite especicar nomes para os conjuntos de campos e criar teclas
de atalho para eles. Sua sintaxe básica é: <LEGEND> Nome do conjunto
de campos </LEGEND>.
Estes recursos não são compatíveis com todos os Browsers.
Digite o exemplo abaixo e salve-o como `[Link]'.

<HTML>
<HEAD>
68

<TITLE> Formul&aacute;rios 3 - FIELDSET </TITLE>

</HEAD>
<BODY>
<FORM>
<FIELDSET>
<LEGEND> Informa&ccedil;&otilde;es de Contato</LEGEND>
Nome:<INPUT TYPE=text NAME=nome><BR>
E-mail:<INPUT TYPE=text NAME=email><BR>
Telefone:<INPUT TYPE=text NAME=tel>
</FIELDSET>
<FIELDSET>
<LEGEND>Cart&atilde;o de cr&eacute;dito</LEGEND>
<INPUT TYPE=radio NAME=card VALUE=visa> Visa
<INPUT TYPE=radio NAME=card VALUE=mc> Master Card
<BR>
N&uacute;mero: <INPUT TYPE=text NAME=number>
<BR>
Data de validade: <INPUT TYPE=text SIZE=7 NAME=data
VALUE=mm/aaaa >
</FIELDSET>
</FORM>
</BODY>
</HTML>

8.6.1 Teclas de atalho para conjuntos de campos

O parâmetro ACCESSKEY do cmarcador LEGEND permite ao programador
denir teclas que, quando pressionadas juntamente com a tecla ALT, movem
o cursor para o primeiro campo de cada conjunto.
<LEGEND
Sintaxe: ACCESSKEY=A> Nome do conjunto de campos
</LEGEND>
A sintaxe acima dene a tecla `a' como tecla de atalho para o conjunto
de campos `Nome do conjunto de campos'.
Modique o exemplo `[Link]' para que que como mostrado abaixo.
Teste as teclas de atalho.

<HTML>
<HEAD>
UFF PET-TELE))) 69

<TITLE> Formul&aacute;rios 3 - FIELDSET </TITLE>

</HEAD>
<BODY>
<FORM>
<FIELDSET>
<LEGEND ACCESSKEY=I>
<U>I</U>nforma&ccedil;&otilde;es de Contato</LEGEND>
Nome:<INPUT TYPE=text NAME=nome><BR>
E-mail:<INPUT TYPE=text NAME=email><BR>
Telefone:<INPUT TYPE=text NAME=email>
</FIELDSET>
<FIELDSET>
<LEGEND ACCESSKEY=C> <U>C</U>art&atilde;o de
cr&eacute;dito</LEGEND>
<INPUT TYPE=radio NAME=card VALUE=visa> Visa
<INPUT TYPE=radio NAME=card VALUE=mc> Master Card
<BR>
N&uacute;mero: <INPUT TYPE=text NAME=number>
<BR>
Data de validade: <INPUT TYPE=text SIZE=7 NAME=data
VALUE=00/0000 >
</FIELDSET>
</FORM>
</BODY>
</HTML>

8.6.2 Teclas de atalho para campos

Outro marcador que permite ao usuário navegar rapidamente pelos campos
de um formulário através de teclas de atalho é o marcador LABEL. Esta tag
especica uma tecla que, ao ser pressionada juntamente com a tecla ALT,
move o cursor diretamente para o campo especicado.
Para utilizar o marcador LABEL é preciso identicar cada campo atra-
vés do parâmetro ID do marcador INPUT. A sintaxe usada é: <INPUT
TYPE=tipo NAME=nome ID=String de identicação >.
Uma vez identicado o campo, a tecla de atalho para ele será denida
através do parâmetro ACCESSKEY do marcador LABEL. O parâmetro FOR
deste mesmo marcador indicará o campo a que a tecla de atalho levará. A
70

sintaxe usada é: <LABEL

ACCESSKEY=A FOR= String de identicação > Rótulo do campo </LABEL>
[Campo]. O marcador LABEL pode também ser fechado logo após sua aber-
tura ou até mesmo depois da tag de criação do campo.
Modique novamente o exemplo `[Link]' para que que como mos-
trado abaixo. Teste agora as teclas de atalho para cada campo.

<HTML>
<HEAD>
<TITLE> Formul&aacute;rios 3 - FIELDSET </TITLE>
</HEAD>
<BODY>
<FORM>
<FIELDSET>
<LEGEND ACCESSKEY=I> <U>I</U>nforma&ccedil;&otilde;es de
Contato</LEGEND>
<LABEL ACCESSKEY=N FOR=nome> <U>N</U>ome:
</LABEL><INPUT TYPE=text NAME=nome
ID=nome><BR>
<LABEL ACCESSKEY=E FOR=email><U>E</U>-mail:
</LABEL><INPUT TYPE=text NAME=email
ID=email><BR>
<LABEL ACCESSKEY=T FOR=tel> <U>T</U>ELEFONE:
</LABEL><INPUT TYPE=text NAME=tel ID=tel>
</FIELDSET>
<FIELDSET>
<LEGEND ACCESSKEY=C> <U>C</U>art&atilde;o de
cr&eacute;dito</LEGEND>
<LABEL ACCESSKEY=V FOR=visa><INPUT TYPE=radio
NAME=card VALUE=visa ID=visa> <U>V</U>isa
</LABEL>
<LABEL ACCESSKEY=M FOR=master><INPUT
TYPE=radio NAME=card VALUE=mc
ID=master><U>M</U>aster Card </LABEL>
<BR>
<LABEL ACCESSKEY=U FOR=num>
N<U>&uacute;</U>mero: </LABEL><INPUT TYPE=text
NAME=number ID=num>
UFF PET-TELE))) 71

<BR>
<LABEL ACCESSKEY=D FOR=data> <U>D</U>ata de
validade: </LABEL> <INPUT TYPE=text SIZE=7
NAME=data VALUE=00/0000 ID=data>
</FIELDSET>
</FORM>
</BODY>
</HTML>
72
Capítulo 9

Frames

O recurso de frames permite ao programador criar páginas HTML que podem

ser visualizadas simultaneamente na janela do Browser. Desta forma, a janela
ca dividida em frames que compartilham o espaço disponível. Este recurso
não é compatível com todos os clientes Web, porém é aceito pelas versões
mais recentes dos navegadores mais populares.

O uso de frames requer um planejamento prévio, que consiste na criação

da estrutura de janelas. O programador irá especicar a quantidade de fra-
mes, a disposição que eles terão na tela, a largura e a altura de cada frame,
assim como o conteúdo que será exibido em cada um deles.

9.1 O frame document

O uso de frames exige a criação de um documento HTML especial que con-
tém todas as denições dos frames. Este documento se diferencia dos demais
por não utilizar o comando BODY. Em seu lugar é usado o comando FRA-
MESET. Dentro do par de marcações <FRAMESET></FRAMESET> são
especicados todos os atributos dos frames que serão criados, tais como sua
quantidade e disposição horizontal e vertical.

Cada frame especicado precisará de um outro comando para denir suas

características individuais e, principalmente, seu conteúdo. Para tanto é
utilizado o comando FRAME.

73
74

9.2 O marcador FRAMESET

Os principais parâmetros do marcador FRAMESET são:

COLS=tamanhos - É usado para criar um documento com frames dis-

postos em colunas. Nele deverá ser especicada a largura de cada
coluna do documento. Os valores podem ser especicados em pixels,
percentagem ou tamanho relativo.

ROWS=tamanhos - É usado para criar um documento com frames dis-

postos em linhas. Nele deverá ser especicada a altura de cada linha do
documento. Os valores podem ser especicados em pixels, percentagem
ou tamanho relativo.

FRAMEBORDER=1|0 - Mostra ou inibe borda para os frames, caso re-

ceba os valores 1 ou 0 respectivamente.

FRAMESPACING=valor - Cria espaço adicional em pixels entre os

frames.

Sintaxe básica:<FRAMESET COLS | ROWS=tamanhos > [Especi-

cação individual de cada frame] </FRAMESET>.
Sintaxe completa: <FRAMESET COLS | ROWS=tamanhos
FRAMEBORDER=1|0 FRAMESPACING=valor > [Especicação indivi-
dual de cada frame]</FRAMESET>.

9.3 Especicação de tamanho de frames

9.3.1 Usando valores em pixels
Como vimos, pode-se especicar o tamanho de frames no comando FRAME-
SET através de seus parâmetros ROWS e COLS. A maneira mais simples de
fazê-lo é atribuir valores em pixels à dimensão com que se está trabalhando,
altura no caso do parâmetro ROWS e largura no caso do parâmetro COLS.
As dimensões dos frames devem estar separadas entre si por vírgulas.
Veja os exemplos:

<FRAMESET COLS=100,300,200 > [Frames] </FRAMESET> - Cria

três frames dispostos em colunas, cujas larguras, da esquerda para a direita,
são de 100, 300 e 200 pixels.
UFF PET-TELE))) 75

<FRAMESET ROWS=60,100,100,200 > [Frames] </FRAMESET> -

Cria quatro frames dispostos em linhas, cujas alturas, de cima para baixo,
são de 60, 100, 100 e 200 pixels.

Nota: Quando a dimensão especicada para um determinado frame não

é suciente para exibir seu conteúdo, barras de rolagem aparecem automati-
camente para auxiliar o usuário.

9.3.2 Usando valores relativos

Para dividir frames igualmente pela dimensão da janela do Browser, a melhor
opção é usar o sinal de asterisco para cada linha ou coluna.
Veja os exemplos:

<FRAMESET COLS=*,*,* > [Frames] </FRAMESET> - Cria três

frames dispostos em colunas cujas larguras são iguais.

<FRAMESET ROWS=*,*,*,*,* > [Frames] <FRAMESET> - Cria cinco

frames dispostos em linhas cujas alturas são iguais.

<FRAMESET COLS=*,2* > [Frames] </FRAMESET> - Cria dois

frames dispostos em colunas, sendo que o da direita ocupa dois terços da
tela.

<FRAMESET ROWS=*,300,* > [Frames] </FRAMESET> - Cria um

frame com altura de 300 pixels no centro da janela e, acima e abaixo dele,
dois frames de mesma altura.

9.3.3 Usando valores percentuais

A terceira forma de especicar tamanhos de frames é utilizando valores na
forma percentual, totalizando 100%.
Veja os exemplos:

<FRAMESET ROWS=30%, 70% > [Frames] </FRAMESET> - Cria

dois frames dispostos em linhas, sendo que o de cima ocupa 30% da tela, e
o de baixo ocupa 70%.
76

<FRAMESET COLS=30%, 50%, 20% > [Frames] </FRAMESET> -

Cria três frames dispostos em colunas, sendo que o da esquerda ocupa 30%
da tela, o do centro 50% e o da direita 20%.

<FRAMESET ROWS=25%, *, 100 > [Frames] </FRAMESET> - Cria

três frames dispostos em linhas, sendo que o de cima ocupa 25% da tela, o
de baixo tem altura de 100 pixels e o do centro ocupa o espaço restante.

Nota: Como você deve ter percebido pelos exemplos, os diferentes forma-
tos de valores podem ser combinados entre si.

9.4 O marcador FRAME

Enquanto o comando FRAMESET cria o layout geral dos frames, o comando
FRAME é o responsável pela atribuição do conteúdo de cada frame e das
características individuais de cada um deles. Os parâmetros do comando
FRAME se sobrepõem aos parâmetros de mesmo nome do comando FRA-
MESET.
Principais parâmetros do comando FRAME:

SRC= Endereço - Este parâmetro é o único indispensável, pois especi-

ca o nome ou a URL do documento que será exibido no frame.

ALIGN=posiçao - Ajusta o alinhamento do frame ou do texto. As op-

ções permitidas para este parâmetro são:

Top - O texto ao redor do frame é alinhado pela parte superior do

frame.

Middle - O texto ao redor do frame é alinhado pelo meio do frame.

Bottom - O texto ao redor do frame é alinhado pela parte inferior do

frame.

Left - O frame é alinhado à esquerda, deixando o texto posicionado

no seu lado direito.

Right - O frame é alinhado à direita, deixando o texto posicionado no

seu lado esquerdo
UFF PET-TELE))) 77

FRAMEBORDER=1|0 -Idêntico ao parâmetro de mesmo nome do co-

mando FRAMESET, ele ativa ou desativa a exibição de borda para o
frame atual.

MARGINHEIGHT=altura - Especica a altura das margens superior

e inferior do frame em pixels.

MARGINWIDTH=largura - Especica a largura das margens esquerda

e direita do frame em pixels.

NAME=nome - Atribui um nome para o frame, de maneira que possa

ser identicado e localizado para carregar documentos.

NORESIZE - Evita que o frame seja redimensionado pelo usuário.

SCROLLING=yes| no - Quando ajustado para o valor `no', não permite

que o frame possua barras de rolagem.

<FRAME SRC=nome ou URL do arquivo >.

Sintaxe básica:
Sintaxe completa: <FRAME SRC=nome ou URL do arquivo
ALIGN=posiçao FRAMEBORDER=1 | 0 MARGINHEIGHT=altura
MARGINWIDTH=largura NAME=nome NORESIZE SCROLLING=yes
| no>.

9.5 Combinando ROWS e COLS

Pode-se combinar a criação de frames usando os dois atributos. O programa-
dor pode, por exemplo, criar uma janela dividida em dois frames horizontais,
onde o de baixo é dividido em duas colunas. Para que isto seja possível,
basta aninhar conjuntos de comandos FRAMESET.
Para exemplicar, vamos criar, primeiramente, os documentos que serão
exibidos por cada frame:
Documento 1:

<HTML>
<HEAD><TITLE> Documento 1 </TITLE></HEAD>
<BODY>
<CENTER><H1> Documento 1 </H1></CENTER>
</BODY>
</HTML>
78

Salve-o com o nome de `[Link]'.

Documento 2:

<HTML>
<HEAD><TITLE> Documento 2 </TITLE></HEAD>
<BODY>
<CENTER><H1> Documento 2 </H1></CENTER>
</BODY>
</HTML>

Salve-o com o nome de `[Link]'.

UFF PET-TELE))) 79

Documento 3:

<HTML>
<HEAD><TITLE> Documento 3 </TITLE></HEAD>
<BODY>
<CENTER><H1> Documento 3 </H1></CENTER>
</BODY>
</HTML>

Salve-o com o nome de `[Link]'.

Agora, digite o seguinte código, salvando-o como `[Link]':

<HTML>
<HEAD>
<TITLE> Frames 1 </TITLE>
</HEAD>
<FRAMESET ROWS=40%, 60% >
<FRAME SRC=[Link] >
<FRAMESET COLS=*,* >
<FRAME SRC=[Link] >
<FRAME SRC=[Link] >
</FRAMESET>
</FRAMESET>
</HTML>

Abra o arquivo `[Link]' e visualize o resultado.

9.6 Interligação de frames

Uma aplicação interessante do recurso de frames é a criação de páginas que
exibam, na mesma tela, uma lista de itens permanente e o conteúdo do item
selecionado. Para fazer isto precisaremos de dois frames, um para exibir a
lista e outro, os conteúdos.
Os frames devem receber nomes, através do parâmetro NAME do co-
mando FRAME, para que o Browser possa abrir os documentos no local
correto.
No campo do cabeçalho do documento que contém os links, deve ser usada
a tag <BASE TARGET=nome do frame >, contendo o nome do frame