Vous êtes sur la page 1sur 29

3.

Formulrios e Folhas de Estilo em XHTML


!

Formulrios introduzem em pginas XHTML a possibilidade de interao com o


usurio. A informao introduzida em um formulrio pode ser submetida para
tratamento por um servidor Web ou ser tratada diretamente no lado cliente
por uma linguagem de script, como JavaScript.
O primeiro padro para tratamento de informao pelo lado servidor foi o CGI
(Common Gateway Interface), para servidores baseados em Unix. Embora
qualquer linguagem possa ser usada para escrever programas CGI, a mais
utilizada a linguagem Perl (http://www.perl.com/).
Atualmente, as linguagens ASP (Active Server Pages) e JSP (Java Server
Pages) e PHP permitem que programas sejam includos em pginas de forma
similar a scripts. A linguagem ASP suportada pelo servidor IIS (Internet
Information Server), enquanto JSP e PHP so suportadas pelos servidores IIS
e Apache.
Para incluir um formulrio em uma pgina XHTML devem ser usados os
marcadores <form> e </form> dentro do elemento <body>. O elemento
<form> pode ter os seguintes atributos:
"
action: define a URL que ir receber os dados do formulrio.
Normalmente a URL ser o endereo de uma pgina ou de um script, mas
no precisa, necessariamente, usar o protocolo HTTP. Por exemplo:
<form action=mailto:elfsenne@feg.unesp.br

ELFS, 2003

52

Formulrios e Folhas de Estilo em XHTML


"

"

"
"

method: define o mtodo usado para envio do formulrio; valores


possveis: GET ou POST.
name: nome do formulrio, para ser referenciado em outras partes do
documento (por exemplo: scripts)
target: nome do frame onde os dados devem ser processados
enctype: define o mecanismo utilizado para codificar os dados a serem
enviados.

Submisso de Formulrios
! Normalmente, um formulrio contm um boto do tipo submit para o envio
dos dados do formulrio ao servidor. Cada dado a ser enviado da forma:
nome=valor, onde nome identifica o componente do formulrio (uma caixa
de texto, um boto de rdio, etc) e valor corresponde ao valor atribudo ao
componente (o contedo de uma caixa de texto, o valor de um boto de
rdio, etc). Para transmitir mais de um valor utilizado o smbolo & entre
cada par (nome, valor). Espaos em branco so codificados como +. Os
caracteres (exceto: @ _ . *) so codificados como seu valor hexadecimal
precedido do smbolo % (por exemplo: ! = %21).
! Existem duas maneiras de enviar dados ao servidor:
"
O mtodo GET: os dados codificados so adicionados ao final da URL e
enviados ao servidor.
ELFS, 2003

53

Formulrios e Folhas de Estilo em XHTML


O mtodo POST: os dados codificados so enviados juntamente com o
cabealho HTTP da pgina.
! O mtodo POST prefervel em relao ao mtodo GET pelas razes:
"
POST pode tratar uma quantidade ilimitada de informao, enquanto GET
est limitado ao tamanho mximo de uma URL
"
GET menos seguro, pois como os dados so enviados junto com a URL,
os dados so visveis na barra de endereo do navegador
! O mtodo GET, no entanto, permite reenviar os dados de um formulrio
armazenados no cache do navegador (pois os dados fazem parte da URL).
Exemplo:
"

aula03_01.htm
<html>
<head><title>Formulrio XHTML</title></head>
<body>
<h3>Digite seu nome:</h3>
<form action="mailto:elfsenne@feg.unesp.br" method="post">
<input type="text" name="cliente" />
<input type="submit" value="Enviar" />
</form>
</body>
</html>
ELFS, 2003

54

Formulrios e Folhas de Estilo em XHTML


Exerccio: Altere o valor do atributo action do formulrio para:
http://www.wrox.com/Consumer/Errata/3439/post-echo.asp
e veja a resposta do servidor.
Controles em Formulrios
! Os elementos <input> permitem que as informaes possam ser fornecidas
de diversas maneiras. Os diversos tipos associados ao elemento <input> so
conhecidos como controles de formulrios. Os controles de formulrios podem
usar os seguintes atributos:
"
name: define o nome do controle.
"
value: estabelece o valor a ser enviado ao servidor; para um boto,
corresponde ao texto exibido na face do boto.
"
disabled: permite desabilitar um controle (disabled=disabled).
! O elemento <input> pode assumir os seguintes tipos: text, password,
file, submit, reset, button, image, checkbox, radio, hidden.
Controle <input> do tipo texto
! Controles do tipo texto permitem que o usurio digite um texto no formulrio.
Um controle do tipo texto estabelecido com o elemento <input> com o
atributo type assumindo um dos seguintes valores:
"
text: uma caixa de texto simples.
"
password: o texto digitado no mostrado.
ELFS, 2003

55

Formulrios e Folhas de Estilo em XHTML


file: inroduz no formulrio uma caixa de texto (onde deve-se digitar o
nome de um arquivo) e um boto Browse com cdigo embutido, que
pode ser usado para localizar o arquivo.
Controles do tipo texto podem ter os seguintes atributos:
"
size: tamanho da caixa (size="n")
"
maxlength: nmero mximo de caracteres que a caixa pode conter
(maxlength="n")
"
readonly: o contedo da caixa s pode ser lido, mas no modificado
(readonly=readonly")
"

Exemplo:
aula03_02.htm
<html>
<head>
<title>Formulrio XHTML</title>
</head>
<body>
<h3>Controles de Texto</h3>
<form action="mailto:elfsenne@feg.unesp.br" method="post">
<div>Digite seu login:</div>
<input type="text" name="usuario" value="[login]" />
ELFS, 2003

56

Formulrios e Folhas de Estilo em XHTML


<div>Digite sua senha:</div>
<input type="password" name="senha" />
<div>Selecione um arquivo:</div>
<input type="file" name="usuario" />
<br />
<input type="submit" value="Enviar" />
</form>
</body>
</html>

Controle <input> do tipo boto


! Pode assumir os seguintes tipos (valor do atributo type):
"
submit: permite transmitir todos os pares (nome, valor) ao servidor
"
reset: permite que todos os controles assumam seus valores de
definio (ou um valor em branco, se no houver valor de definio)
"
button: um boto comum (o atributo value define o texto da face);
no envia nada ao servidor (para ser til deve ser usado com scripts)
"
image: deve ter os atributos src e alt; ao ser clicado, envia ao servidor
todos os pares (nome, valor) juntamente com a coordenada do ponto
onde houve o clique na imagem.
ELFS, 2003

57

Formulrios e Folhas de Estilo em XHTML


Exerccio: Reproduzir a pgina ao lado.

aula03_03.htm

Controle <input> do tipo boto de rdio


! Pode ser dos seguintes tipos:
"
checkbox: caixa de seleo; o
atributo checked=checked pode
ser usado para que a caixa de seleo
aparea selecionada inicialmente; em
um formulrio vrios elementos
checkbox podem ter o mesmo nome
e, neste caso, todas as caixas
selecionadas sero enviadas ao
servidor.
"
radio: diferentemente dos elementos
checkbox, se diversos elementos
radio tiverem o mesmo nome estes
elementos sero mutuamente
exclusivos, ou seja, somente um par
(nome, valor) ser enviado ao servidor.
Exerccio: Reproduzir a pgina ao lado.
aula03_04.htm
ELFS, 2003

58

Formulrios e Folhas de Estilo em XHTML


Controle <input> do tipo hidden
! Elementos <input> do tipo hidden tm um papel importante em
formulrios. Estes elementos no podem ser vistos ou editados pelos
usurios, mas podem armazenar informao em um formulrio.
Desabilitao de elementos <input>
! Qualquer elemento <input> pode ser desabilitado utilizando-se o atributo
disabled. Por exemplo:
<input type="button" disabled="true" />

Elemento <textarea>
! Este elemento corresponde a uma grande caixa onde o usurio poder digitar
um texto que ocupa vrias linhas. O tamanho da caixa definido pelos
atributos cols e rows. Barras de rolagem sero acrescentadas
automaticamente se o texto for maior do que o tamanho da caixa.
Elementos <select> e <option>
! Os elementos <select> e <option> so usados para definir uma caixa de
seleo. A caixa de seleo ter tantos itens quantos forem os elementos
<option> existentes entre os elementos <select> e </select> . O
atributo size do elemento <select> define quantas escolhas sero exibidas
ao usurio e se h necessidade de barra de rolagem para exibir as demais.
ELFS, 2003

59

Formulrios e Folhas de Estilo em XHTML


O atributo multiple do elemento
<select> indica se mais de uma
seleo possvel
(multiple=true).
Exerccio:
! Reproduzir o formulrio ao lado.
Note que o Ramo de Atividade
Indstria deve estar selecionado
inicialmente. Considere que as
opes de Estado so: SP, RJ,
MG e RS.
aula03_05.htm

ELFS, 2003

60

Formulrios e Folhas de Estilo em XHTML


Folhas de Estilo
! Folhas de estilo so utilizadas em documentos XHTML para atribuir diversas
propriedades ao mesmo tempo aos elementos de uma pgina. Por exemplo,
fazer com que todos os ttulos de nvel 1 da pgina (<h1>) sejam
apresentados usando fonte Arial de tamanho 18 e na cor azul.
! A linguagem mais utilizada para definir estilos em um documento XHTML a
CSS (Cascading Style Sheets).
! Vantagens em utilizar folhas de estilo:
"
Pode-se alterar completamente a aparncia de um documento com pouco
esforo, pois estilos permitem a separao da parte funcional de um
documento de seus aspectos de apresentao, definidos nas folhas de
estilo.
"
Uma mesma folha de estilos pode ser aplicada a diversos documentos.
"
Os marcadores no documento tornam-se mais simples (com menos
atributos e propriedades) e as pginas tornam-se mais compreensveis e
podem ser mantidas mais facilmente.
"
possvel um controle melhor da apresentao dos documentos, pois
algumas propriedades de folhas de estilo no tm equivalentes em
marcadores XHTML.
"
Melhor adaptao a diferentes navegadores, pois como a apresentao do
documento definida separadamente, pode-se criar para um mesmo
ELFS, 2003

61

Formulrios e Folhas de Estilo em XHTML

documento, estilos especficos para diferentes navegadores. Por exemplo,


para navegadores clssicos (como Netscape e Internet Explorer) pode-se
enfatizar as cores, fontes ou tamanhos, enquanto que para um
sintetizador de voz, a tonalidade e o volume podem ser enfatizados.
"
As propriedades das folhas de estilo podem ser herdadas de um elemento
para outro. Por exemplo: Se em um pargrafo com propriedades
definidas em uma folha de estilo para ser apresentado com fonte Arial de
tamanho 14 e na cor azul for includo um atributo ou uma outra
propriedade para que o texto seja apresentado em negrito, o texto ser
apresentado em negrito, com fonte Arial de tamanho 14 e na cor azul.
Desvantagem em utilizar folhas de estilo
"
Nem todas as propriedades de folhas de estilo so interpretadas
corretamente pelos navegadores atuais. Para verificar as propriedades de
folhas de estilo interpretadas pelos navegadores pode-se consultar:
http://webreview.com/pub/guides/style/style.html

Criao e Definio de Folhas de Estilo


elemento ao qual o
estilo se aplica

ponto-e-vrgula separando
as propriedades

p {font-size:12; font-style: italic; color:blue}


propriedade
ELFS, 2003

valor da propriedade
62

Formulrios e Folhas de Estilo em XHTML


A criao de estilos feita utilizando a seguinte sintaxe: elemento ao qual o
estilo se aplica, seguido da lista de propriedades e seus respectivos valores a
serem aplicadas ao elemento delimitada por chaves { e }. Dentro da lista, os
pares propriedade:valor so separados por pontos-e-vrgulas. Para folhas de
estilo, no existe diferena entre letras maisculas e minsculas.
! Estilos podem ser definidos em trs nveis: local, interno e externo. Um
documento pode usar estilos de qualquer nvel. Estilos locais anulam estilos
internos e estilos internos anulam estilos externos.
Definio de Estilos Locais
! Estilo local o definido dentro de elementos de uma pgina. Por exemplo:
!

aula03_06.htm
<html>
<head><title>Estilos Locais</title></head>
<body>
<h1>Estilos Locais</h1>
<p style="font-size:150%">Pargrafo mostrado com fonte maior do que o
normal.</p>
<p style="color:blue">Pargrafo mostrado com fonte de tamanho normal,
mas na cor azul.</p>
</body>
</html>
ELFS, 2003

63

Formulrios e Folhas de Estilo em XHTML


!

A definio de estilos locais pode ser feita com o elemento <span> para
indicar que o estilo se aplica apenas a uma parte de um elemento. Por
exemplo:

aula03_07.htm

<html>
<head><title>Estilos Locais</title></head>
<body>
<h1>Estilos Locais</h1>
<p>Este pargrafo mostra que estilos podem ser aplicados a
<span style="font-size:150%; color:blue"> apenas algumas partes</span>
do elemento.</p>
</body>
</html>

A definio de estilos locais pode ser feita tambm com o elemento <div>
para indicar que o estilo se aplica a todos os elementos internos diviso. Por
exemplo, a pgina:

ELFS, 2003

64

Formulrios e Folhas de Estilo em XHTML


pode ser obtida com:

aula03_08.htm

<html>
<head><title>Estilos Locais</title></head>
<body>
<h1>Estilos Locais</h1>
<div style="font-name:Arial; font-size:150%; color:red">
<p>Este o primeiro pargrafo.</p>
<p>Este o segundo. Note que o mesmo estilo se aplica a
ambos os pargrafos.</p>
</div>
</body>
</html>

Definio de Estilos Internos


! A definio de estilos internos deve ser feita entre os elementos <style> e
</style> e dentro do elemento <head> da pgina. Por exemplo:
aula03_09.htm

<html>
<head>
<title>Estilos Internos</title>
<style type="text/css">
p {font-family:Arial; font-style:italic; font-size:90%}
ELFS, 2003

65

Formulrios e Folhas de Estilo em XHTML


h1 {color:blue}
h2 {color:red; font-size:120%}
b {color:green}
</style>
</head>
<body>
<h1>Apresentao de Documentos<br />
<b>definida em folha de estilo</b></h1>
<h2>Ttulo de nvel 2</h2>
<p>Este o primeiro pargrafo.</p>
<p>Este o segundo. Note que o <b>mesmo estilo</b> se aplica a
ambos os pargrafos.</p>
</body>
</html>

ELFS, 2003

66

Formulrios e Folhas de Estilo em XHTML


!

possvel atribuir uma mesma definio de estilo para vrios elementos. Por
exemplo: h1, h2, h3 { color:blue }, faz com que os ttulos de nveis
1, 2 e 3 sejam apresentados na cor azul.

Definio de Estilos Externos


! A definio de estilos pode ser feita em um documento separado (que,
normalmente, tem a extenso .css). O elemento <link> deve ser utilizado
para aplicar uma folha de estilo ao documento, com a atributo href definindo
a URL da folha de estilos externa. Por exemplo:
aula03_10.htm

Note que este


documento
no tem
informaes
de estilo. O
estilo
importado de
um arquivo
externo.

ELFS, 2003

<html>
<head>
<title>Estilos Externos</title>
<link rel="stylesheet" href="meu_estilo.css" />
</head>
<body>
<h1>Apresentao de Documentos<br />
<b>definida em folha de estilo</b></h1>
<h2>Ttulo de nvel 2</h2>
<p>Este o primeiro pargrafo.</p>
<p>Este o segundo. Note que o <b>mesmo estilo</b>
se aplica a ambos os pargrafos.</p>
</body>
</html>

67

Formulrios e Folhas de Estilo em XHTML


meu_estilo.css
p
h1
h2
b

{font-family:Arial; font-style:italic; font-size:90%}


{color:blue}
{color:red; font-size:120%}
{color:green}

Exerccio: Verificar o resultado obtido pela pgina aula03_10.htm, que usa


o arquivo de folha de estilo meu_estilo.css, e compare com a pgina
obtida pelo documento aula03_09.htm.

Herana de Propriedades em Folhas de Estilo


! A pgina a seguir ser construda usando estilos externo, interno e local.

ELFS, 2003

68

Formulrios e Folhas de Estilo em XHTML


um_estilo.css
p
h1
h2
b

{font-family:Arial; font-size:150%}
{color:blue}
{color:red; font-size:120%}
{color:green}

aula03_11.htm

<html>
<head>
<title>Herana de Estilos</title>
<link rel="stylesheet" href="um_estilo.css" />
Note que estilos
<style type="text/css">
definidos externamente
so redefinidos como
body {font-style: italic}
estilo interno e mesmo
p
{color: red}
como estilo local.
</style>
</head>
<body>
<h1>Apresentao de Documentos<br />
<b>definida em folhas de estilo</b></h1>
<h2 style="color:black">Ttulo de nvel 2</h2>
<p style="font-family=Courier">Este primeiro pargrafo tem a
fonte definida em estilo local, o estilo e a cor da fonte
definido em estilo interno, e o tamanho da fonte definido
em estilo externo.</p>
ELFS, 2003

69

Formulrios e Folhas de Estilo em XHTML


<p>Este o segundo pargrafo. Note que a ele se aplicam somente
os <b>estilos interno e externo</b> no havendo definio de
estilo local ao pargrafo.</p>
</body>
</html>

Algumas Propriedades de Folhas de Estilo


! Cores. A maneira mais fcil de estabelecer o valor da propriedade color
usar um dos 16 nomes das cores padro da paleta de cores VGA: aqua,
black, blue, fuchsia, grey, green, lime, maroon, navy, olive,
purple, red, teal, silver, white, yellow. Outra possibilidade
especificar a cor desejada por um valor RGB hexadecimal, por exemplo:
color:#006699.
! Ligaes Hipertexto. Os elementos a:link, a:visited e a:active
estabelecem a apresentao de ligaes no visitadas, visitadas e que se est
tentando visitar no momento. Exemplos: text-decoration:none (suprime
o sublinhado de uma ligao), background-color:uma-cor (adiciona uma
cor de fundo a uma ligao).
! Textura de Fundo. Estabelecida pela propriedade backgound-image do
elemento body. O valor da propriedade deve ser escrito como url(arquivode-imagem). Exemplo: body {background-image:url(gato.gif)}.
ELFS, 2003

70

Formulrios e Folhas de Estilo em XHTML


Outras propriedades: background-position (valores possveis: top,
bottom, left, center, right, podendo haver combinaes consistentes de
valores, como: top left ou bottom center) e background-repeat
(valores possveis: repeat, repeat-x, repeat-y, no-repeat).
Exemplo:

ELFS, 2003

71

Formulrios e Folhas de Estilo em XHTML


aula03_12.htm

<html>
<head><title>Textura de Fundo</title>
<style type="text/css">
body {background-image:url(pantera.gif);
background-position:bottom center;
background-repeat:repeat-x}
</style>
</head>
<body>
<h1>Textura de Fundo</h1>
<p>
A aplicao de uma textura a um documento requer a
definio de uma imagem que deve ser utilizada como
fundo do documento. Se a imagem no ocupar a totalidade
da pgina ela poder ser repetida quantas vezes forem
necessrias para ocupar toda a pgina.
</p>
</body>
</html>

Exerccio: Testar outras combinaes de valores para as propriedades


background-position e background-repeat.

ELFS, 2003

72

Formulrios e Folhas de Estilo em XHTML


!

Bordas e Margens. A figura a seguir mostra como so entendidos os


conceitos de borda e margem em relao a um elemento qualquer de um
documento XHTML.
margem
borda
contedo

Para a margem, os valores: auto, um-tamanho, uma-porcentagem devem ser


atribudos s propriedades: margin-top, margin-right, margin-bottom,
margin-left ou margin.

A borda estabelecida pela propriedade border, que pode assumir um dos


seguintes valores: solid, dotted, dashed, double, groove, ridge,
inset, outset. Para a espessura da borda, os valores: thin, medium,
thick e um-tamanho devem ser atribudos s propriedades: border-topwidth, border-right-width, border-bottom-width, border-leftwidth ou border-width.

ELFS, 2003

73

Formulrios e Folhas de Estilo em XHTML


!

Exerccio: Estabelecer um estilo conveniente para o elemento img de modo a


obter o efeito mostrado na pgina abaixo.
aula03_13.htm

ELFS, 2003

74

Formulrios e Folhas de Estilo em XHTML


!

As propriedades margin-top e margin-bottom podem ser usadas tambm


para definir o espaamento acima e abaixo de ttulos em um documento
XHTML. Por exemplo:
<style type=text/css>
body {margin-left:10%; margin-right:10%}
h1
{margin-top:20%; margin-bottom:5%}
</style>

possvel tambm a definio de classes para a definio de estilos. Por


exemplo:
<style type=text/css>
h2.secao {margin-top:3em; margin-bottom:2em}
</style>
...
<h2 class=secao>Ttulo da seo</h2>
Medidas relativas

ELFS, 2003

Medidas absolutas

em

altura da fonte do elemento

in

polegadas

ex

altura da letra x

cm

centmetros

px

pixels

mm

milmetros

porcentagem

pt

pontos (1 ponto = 1/72 polegadas)


75

Formulrios e Folhas de Estilo em XHTML


!

Indentao de Pargrafos. A propriedade text-indent usada para


estabelecer um recuo na primeira linha de um pargrafo (indentao). Por
exemplo:
<style type="text/css">
p {text-indent: 15%}
</style>

Controle de Fontes de Caracteres. As propriedades de folhas de


estilo tambm devem ser usadas para controlar como os caracteres sero
apresentados em um documento XHTML. As seguintes propriedades esto
disponveis:
"
font-size: normalmente definido em pt ou %, mas pode ser expresso
com os valores: small, large, normal.
"
font-style: valores possveis: italic, oblique ou normal.
"
font-weight: nmero de 100 a 900 (nvel de negrito) ou os valores:
bold, light e normal.
"
text-transform: upercase ou lowercase.
"
line-height: espaamento entre linhas; pode assumir os seguintes
valores: nmero de vezes o espaamento normal, valor em porcentagem
do espaamento normal, valor em pt, ou normal.

ELFS, 2003

76

Formulrios e Folhas de Estilo em XHTML


"

font-family: define os nomes das fontes a serem usadas; pode definir


vrios nomes alternativos (ser usada a primeira disponvel no
computador). Exemplo:

<style type="text/css">
p {font-family:Georgia, Times New Roman, Garamond, Vivaldi, Arial}
</style>

Definio de Estilos Prprios


! Atravs do atributo class possvel definir estilos personalizados, como ocorre
em processadores de texto usuais. Exemplo:

ELFS, 2003

77

Formulrios e Folhas de Estilo em XHTML

<html>
<head>
<title>Textura de Fundo</title>
<style type="text/css">
h1.especial {
font-size:18pt;
font-family:Arial;
color:blue;
text-align:center; }

aula03_14.htm

p.cor {
text-indent: 15%;
background:yellow;
margin-left:5%;
font-size:normal; }
p.normal {
font-weight:bold;
font-size:normal;
color:black;
margin-left:20%; }
ELFS, 2003

78

Formulrios e Folhas de Estilo em XHTML


p.pequeno {
font-size:small;
margin-left:30%; }
</style>
</head>
<body>
<h1 class="especial">A Pantera Cor-de-Rosa</h1>
<p class="cor">No filme "A Pantera Cor-de-Rosa", Peter Sellers
interpreta o atrapalhado Inspetor Clouseau.</p>
<p class="pequeno">Clouseau precisa encontrar um ladro de jias que
est mais perto do que ele imagina: o perigoso assaltante amante
de sua esposa.</p>
<p class="normal">O filme, dirigido por Blake Edwards, contou tambm
com David Niven e Robert Wagner no elenco.</p>
</body>
</html>

Exerccio. Definir uma folha de estilo externa de modo que todas as


caractersticas de apresentao da pgina a seguir estejam definidas nesta folha
de estilo. Se necessrio, defina classes para as diversas apresentaes de um
mesmo elemento.
ELFS, 2003

79

Formulrios e Folhas de Estilo em XHTML

ELFS, 2003

aula03_15.htm

80

Vous aimerez peut-être aussi