3. Formulários e Folhas de Estilo em XHTML

(1)

3. Formulários e Folhas de Estilo em XHTML

! Formulários introduzem em páginas XHTML a possibilidade de interação com o usuário. A informação introduzida em um formulário 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 padrão para tratamento de informação 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 incluídos em páginas de forma similar a scripts. A linguagem ASP é suportada pelo servidor IIS (Internet Information Server), enquanto JSP e PHP são suportadas pelos servidores IIS

e Apache.

! Para incluir um formulário em uma página 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 formulário.

Normalmente a URL será o endereço de uma página ou de um script, mas não precisa, necessariamente, usar o protocolo HTTP. Por exemplo:

(2)

Formulários e Folhas de Estilo em XHTML

" method: define o método usado para envio do formulário; valores

possíveis: GET ou POST.

" name: nome do formulário, 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.

Submissão de Formulários

! Normalmente, um formulário contém um botão do tipo submit para o envio

dos dados do formulário ao servidor. Cada dado a ser enviado é da forma:

nome=valor, onde nome identifica o componente do formulário (uma caixa

de texto, um botão de rádio, etc) e valor corresponde ao valor atribuído ao

componente (o conteúdo de uma caixa de texto, o valor de um botão de rádio, etc). Para transmitir mais de um valor é utilizado o símbolo & entre cada par (nome, valor). Espaços em branco são codificados como +. Os caracteres (exceto: @ _ . *) são codificados como seu valor hexadecimal precedido do símbolo % (por exemplo: ! = %21).

! Existem duas maneiras de enviar dados ao servidor:

" O método GET: os dados codificados são adicionados ao final da URL e

(3)

Formulários e Folhas de Estilo em XHTML

" O método POST: os dados codificados são enviados juntamente com o

cabeçalho HTTP da página.

! O método POST é preferível em relação ao método GET pelas razões:

" POST pode tratar uma quantidade ilimitada de informação, enquanto GET

está limitado ao tamanho máximo de uma URL

" GET é menos seguro, pois como os dados são enviados junto com a URL,

os dados são visíveis na barra de endereço do navegador

! O método GET, no entanto, permite reenviar os dados de um formulário armazenados no cache do navegador (pois os dados fazem parte da URL). Exemplo:

<html>

<head><title>Formulário XHTML</title></head> <body>

<h3>Digite seu nome:</h3>

<form action="mailto:[email protected]" method="post"> <input type="text" name="cliente" />

<input type="submit" value="Enviar" /> </form>

</body> </html>

(4)

Formulários e Folhas de Estilo em XHTML

Exercício: Altere o valor do atributo action do formulário para:

http://www.wrox.com/Consumer/Errata/3439/post-echo.asp

e veja a resposta do servidor.

Controles em Formulários

! Os elementos <input> permitem que as informações possam ser fornecidas

de diversas maneiras. Os diversos tipos associados ao elemento <input> são

conhecidos como controles de formulários. Os controles de formulários podem usar os seguintes atributos:

" name: define o nome do controle.

" value: estabelece o valor a ser enviado ao servidor; para um botão,

corresponde ao texto exibido na face do botão.

" 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 usuário digite um texto no formulário. 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.

(5)

Formulários e Folhas de Estilo em XHTML

" file: inroduz no formulário uma caixa de texto (onde deve-se digitar o

nome de um arquivo) e um botão Browse com código 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: número máximo de caracteres que a caixa pode conter

(maxlength="n")

" readonly: o conteúdo da caixa só pode ser lido, mas não modificado

(readonly=“readonly") Exemplo: <html> <head> <title>Formulário XHTML</title> </head> <body> <h3>Controles de Texto</h3>

<form action="mailto:[email protected]" method="post"> <div>Digite seu login:</div>

<input type="text" name="usuario" value="[login]" />

(6)

Formulários e Folhas de Estilo em XHTML

Controle <input> do tipo botão

! 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

definição (ou um valor em branco, se não houver valor de definição)

" button: um botão comum (o atributo value define o texto da face);

não 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.

<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>

(7)

Formulários e Folhas de Estilo em XHTML

Exercício: Reproduzir a página ao lado.

Controle <input> do tipo botão de rádio ! Pode ser dos seguintes tipos:

" checkbox: caixa de seleção; o

atributo checked=“checked” pode

ser usado para que a caixa de seleção apareça selecionada inicialmente; em um formulário vários elementos

checkbox podem ter o mesmo nome

e, neste caso, todas as caixas selecionadas serão enviadas ao servidor.

" radio: diferentemente dos elementos

checkbox, se diversos elementos

radio tiverem o mesmo nome estes

elementos serão mutuamente

exclusivos, ou seja, somente um par (nome, valor) será enviado ao servidor.

Exercício: Reproduzir a página ao lado.

aula03_03.htm

(8)

Formulários e Folhas de Estilo em XHTML

Controle <input> do tipo hidden

! Elementos <input> do tipo hidden têm um papel importante em

formulários. Estes elementos não podem ser vistos ou editados pelos usuários, mas podem armazenar informação em um formulário.

Desabilitação de elementos <input>

! Qualquer elemento <input> pode ser desabilitado utilizando-se o atributo

disabled. Por exemplo:

Elemento <textarea>

! Este elemento corresponde a uma grande caixa onde o usuário poderá digitar

um texto que ocupa várias linhas. O tamanho da caixa é definido pelos atributos cols e rows. Barras de rolagem serão acrescentadas

automaticamente se o texto for maior do que o tamanho da caixa.

Elementos <select> e <option>

! Os elementos <select> e <option> são usados para definir uma caixa de

seleção. A caixa de seleção terá tantos itens quantos forem os elementos

<option> existentes entre os elementos <select> e </select> . O

atributo size do elemento <select> define quantas escolhas serão exibidas

ao usuário e se há necessidade de barra de rolagem para exibir as demais.

(9)

Formulários e Folhas de Estilo em XHTML

O atributo multiple do elemento <select> indica se mais de uma

seleção é possível

(multiple=“true”).

Exercício:

! Reproduzir o formulário ao lado.

Note que o Ramo de Atividade “Indústria” deve estar selecionado inicialmente. Considere que as opções de Estado são: “SP”, “RJ”, “MG” e “RS”.

(10)

Formulários e Folhas de Estilo em XHTML

Folhas de Estilo

! Folhas de estilo são utilizadas em documentos XHTML para atribuir diversas propriedades ao mesmo tempo aos elementos de uma página. Por exemplo, fazer com que todos os títulos de nível 1 da página (<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 aparência de um documento com pouco

esforço, pois estilos permitem a separação da parte funcional de um documento de seus aspectos de apresentação, 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 páginas tornam-se mais compreensíveis e podem ser mantidas mais facilmente.

" É possível um controle melhor da apresentação dos documentos, pois

algumas propriedades de folhas de estilo não têm equivalentes em marcadores XHTML.

" Melhor adaptação a diferentes navegadores, pois como a apresentação do

(11)

Formulários e Folhas de Estilo em XHTML

documento, estilos específicos para diferentes navegadores. Por exemplo, para navegadores clássicos (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 parágrafo com propriedades

definidas em uma folha de estilo para ser apresentado com fonte Arial de tamanho 14 e na cor azul for incluído 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 são 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

Criação e Definição de Folhas de Estilo

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

elemento ao qual o estilo se aplica

ponto-e-vírgula separando as propriedades

(12)

Formulários e Folhas de Estilo em XHTML

! A criação 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 são separados por pontos-e-vírgulas. Para folhas de estilo, não existe diferença entre letras maiúsculas e minúsculas.

! Estilos podem ser definidos em três níveis: local, interno e externo. Um documento pode usar estilos de qualquer nível. Estilos locais anulam estilos internos e estilos internos anulam estilos externos.

Definição de Estilos Locais

! Estilo local é o definido dentro de elementos de uma página. Por exemplo:

<html>

<head><title>Estilos Locais</title></head> <body>

<h1>Estilos Locais</h1>

<p style="font-size:150%">Parágrafo mostrado com fonte maior do que o normal.</p>

<p style="color:blue">Parágrafo mostrado com fonte de tamanho normal, mas na cor azul.</p>

</body> </html>

(13)

Formulários e Folhas de Estilo em XHTML

! A definição 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:

! A definição de estilos locais pode ser feita também com o elemento <div>

para indicar que o estilo se aplica a todos os elementos internos à divisão. Por exemplo, a página:

<html>

<p>Este parágrafo mostra que estilos podem ser aplicados a

<span style="font-size:150%; color:blue"> apenas algumas partes</span> do elemento.</p>

</body> </html>

(14)

Formulários e Folhas de Estilo em XHTML

pode ser obtida com:

Definição de Estilos Internos

! A definição de estilos internos deve ser feita entre os elementos <style> e </style> e dentro do elemento <head> da página. Por exemplo:

<html>

<div style="font-name:Arial; font-size:150%; color:red"> <p>Este é o primeiro parágrafo.</p>

<p>Este é o segundo. Note que o mesmo estilo se aplica a ambos os parágrafos.</p> </div> </body> </html> aula03_08.htm <html> <head> <title>Estilos Internos</title> <style type="text/css">

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

(15)

Formulários e Folhas de Estilo em XHTML

h1 {color:blue} h2 {color:red; font-size:120%} b {color:green} </style> </head> <body> <h1>Apresentação de Documentos<br />

<b>definida em folha de estilo</b></h1> <h2>Título de nível 2</h2>

<p>Este é o primeiro parágrafo.</p>

<p>Este é o segundo. Note que o <b>mesmo estilo</b> se aplica a ambos os parágrafos.</p>

</body> </html>

(16)

Formulários e Folhas de Estilo em XHTML

! É possível atribuir uma mesma definição de estilo para vários elementos. Por exemplo: h1, h2, h3 { color:blue }, faz com que os títulos de níveis

1, 2 e 3 sejam apresentados na cor azul.

Definição de Estilos Externos

! A definição de estilos pode ser feita em um documento separado (que,

normalmente, tem a extensão .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:

<html> <head>

<title>Estilos Externos</title>

<link rel="stylesheet" href="meu_estilo.css" /> </head>

<body>

<h1>Apresentação de Documentos<br />

<b>definida em folha de estilo</b></h1> <h2>Título de nível 2</h2>

<p>Este é o primeiro parágrafo.</p>

<p>Este é o segundo. Note que o <b>mesmo estilo</b> se aplica a ambos os parágrafos.</p>

</body>

aula03_10.htm

Note que este documento não tem informações de estilo. O estilo é importado de um arquivo externo.

(17)

Formulários e Folhas de Estilo em XHTML

! Exercício: Verificar o resultado obtido pela página aula03_10.htm, que usa

o arquivo de folha de estilo meu_estilo.css, e compare com a página

obtida pelo documento aula03_09.htm.

Herança de Propriedades em Folhas de Estilo

! A página a seguir será construída usando estilos externo, interno e local.

p {font-family:Arial; font-style:italic; font-size:90%} h1 {color:blue}

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

(18)

Formulários e Folhas de Estilo em XHTML

p {font-family:Arial; font-size:150%} h1 {color:blue} h2 {color:red; font-size:120%} b {color:green} um_estilo.css <html> <head> <title>Herança de Estilos</title>

<link rel="stylesheet" href="um_estilo.css" /> <style type="text/css">

body {font-style: italic} p {color: red}

</style> </head> <body>

<h1>Apresentação de Documentos<br />

<b>definida em folhas de estilo</b></h1> <h2 style="color:black">Título de nível 2</h2>

<p style="font-family=Courier">Este primeiro parágrafo 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>

aula03_11.htm

Note que estilos

definidos externamente são redefinidos como estilo interno e mesmo como estilo local.

(19)

Formulários e Folhas de Estilo em XHTML

Algumas Propriedades de Folhas de Estilo

! Cores. A maneira mais fácil de estabelecer o valor da propriedade color é

usar um dos 16 nomes das cores padrão 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.

! Ligações Hipertexto. Os elementos a:link, a:visited e a:active

estabelecem a apresentação de ligações não visitadas, visitadas e que se está tentando visitar no momento. Exemplos: text-decoration:none (suprime

o sublinhado de uma ligação), background-color:uma-cor (adiciona uma

cor de fundo a uma ligação).

! Textura de Fundo. Estabelecida pela propriedade backgound-image do

elemento body. O valor da propriedade deve ser escrito como url

(arquivo-de-imagem). Exemplo: body {background-image:url(gato.gif)}.

<p>Este é o segundo parágrafo. Note que a ele se aplicam somente os <b>estilos interno e externo</b> não havendo definição de estilo local ao parágrafo.</p>

</body> </html>

(20)

Formulários e Folhas de Estilo em XHTML

Outras propriedades: background-position (valores possíveis: top,

bottom, left, center, right, podendo haver combinações consistentes de

valores, como: top left ou bottom center) e background-repeat

(valores possíveis: repeat, repeat-x, repeat-y, no-repeat).

(21)

Formulários e Folhas de Estilo em XHTML

! Exercício: Testar outras combinações de valores para as propriedades

background-position e background-repeat. <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 aplicação de uma textura a um documento requer a definição de uma imagem que deve ser utilizada como fundo do documento. Se a imagem não ocupar a totalidade da página ela poderá ser repetida quantas vezes forem necessárias para ocupar toda a página.

</p> </body> </html>

(22)

Formulários e Folhas de Estilo em XHTML

! Bordas e Margens. A figura a seguir mostra como são entendidos os

conceitos de borda e margem em relação a um elemento qualquer de um documento XHTML.

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

atribuídos à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 atribuídos às propriedades:

border-top-width, border-right-width, border-bottom-width,

border-left-width ou border-width.

conteúdo margem

(23)

Formulários e Folhas de Estilo em XHTML

! Exercício: Estabelecer um estilo conveniente para o elemento img de modo a

obter o efeito mostrado na página abaixo.

(24)

Formulários e Folhas de Estilo em XHTML

! As propriedades margin-top e margin-bottom podem ser usadas também

para definir o espaçamento acima e abaixo de títulos em um documento XHTML. Por exemplo:

! É possível também a definição de classes para a definição de estilos. Por

exemplo:

<style type=“text/css”>

body {margin-left:10%; margin-right:10%} h1 {margin-top:20%; margin-bottom:5%} </style>

<style type=“text/css”>

h2.secao {margin-top:3em; margin-bottom:2em} </style>

...

<h2 class=“secao”>Título da seção</h2>

pontos (1 ponto = 1/72 polegadas)

pt porcentagem % milímetros mm pixels px centímetros cm altura da letra x ex polegadas in

altura da fonte do elemento

em

Medidas absolutas Medidas relativas

(25)

Formulários e Folhas de Estilo em XHTML

! Indentação de Parágrafos. A propriedade text-indent é usada para

estabelecer um recuo na primeira linha de um parágrafo (“indentação”). Por exemplo:

! Controle de Fontes de Caracteres. As propriedades de folhas de

estilo também devem ser usadas para controlar como os caracteres serão apresentados em um documento XHTML. As seguintes propriedades estão disponíveis:

" font-size: normalmente definido em pt ou %, mas pode ser expresso

com os valores: small, large, normal.

" font-style: valores possíveis: italic, oblique ou normal.

" font-weight: número de 100 a 900 (nível de negrito) ou os valores:

bold, light e normal.

" text-transform: upercase ou lowercase.

" line-height: espaçamento entre linhas; pode assumir os seguintes

valores: número de vezes o espaçamento normal, valor em porcentagem do espaçamento normal, valor em pt, ou normal.

<style type="text/css"> p {text-indent: 15%} </style>

(26)

Formulários e Folhas de Estilo em XHTML

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

vários nomes alternativos (será usada a primeira disponível no computador). Exemplo:

Definição de Estilos Próprios

! Através do atributo class é possível definir estilos personalizados, como ocorre

em processadores de texto usuais. Exemplo:

<style type="text/css">

p {font-family:Georgia, “Times New Roman”, Garamond, Vivaldi, Arial} </style>

(27)

Formulários 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; } 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%; } aula03_14.htm

(28)

Formulários 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 ladrão de jóias 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 também com David Niven e Robert Wagner no elenco.</p>

</body> </html>

Exercício. Definir uma folha de estilo externa de modo que todas as

características de apresentação da página a seguir estejam definidas nesta folha de estilo. Se necessário, defina classes para as diversas apresentações de um mesmo elemento.

(29)