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: <form action= mailto:elfsenne@feg.unesp.br ELFS, 2003 52
" 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 enviados ao servidor. ELFS, 2003 53
" 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: aula03_01.htm <html> <head><title>formulário 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
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. " password: o texto digitado não é mostrado. ELFS, 2003 55
" 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: aula03_02.htm <html> <head> <title>formulário 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
<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 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. ELFS, 2003 57
Exercício: Reproduzir a página ao lado. aula03_03.htm 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_04.htm ELFS, 2003 58
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: <input type="button" disabled="true" /> 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. ELFS, 2003 59
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. aula03_05.htm ELFS, 2003 60
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 documento é definida separadamente, pode-se criar para um mesmo ELFS, 2003 61
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 elemento ao qual o estilo se aplica ponto-e-vírgula separando as propriedades p {font-size:12; font-style: italic; color:blue} propriedade valor da propriedade ELFS, 2003 62
! 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: aula03_06.htm <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> ELFS, 2003 63
! 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: aula03_07.htm <html> <head><title>estilos Locais</title></head> <body> <h1>estilos Locais</h1> <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>! 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: ELFS, 2003 64
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 parágrafo.</p> <p>este é o segundo. Note que o mesmo estilo se aplica a ambos os parágrafos.</p> </div> </body> </html> 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: 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
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> ELFS, 2003 66
! É 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: Note que este documento não tem informações de estilo. O estilo é importado de um arquivo externo. aula03_10.htm <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> </html> ELFS, 2003 67
p {font-family:arial; font-style:italic; font-size:90%} h1 {color:blue} h2 {color:red; font-size:120%} b {color:green} meu_estilo.css! 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. ELFS, 2003 68
p {font-family:arial; font-size:150%} h1 {color:blue} h2 {color:red; font-size:120%} b {color:green} um_estilo.css aula03_11.htm <html> <head> <title>herança de Estilos</title> <link rel="stylesheet" href="um_estilo.css" /> Note que estilos <style type="text/css"> definidos externamente body {font-style: italic} são redefinidos como p {color: red} estilo interno e mesmo como estilo local. </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> ELFS, 2003 69
<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> 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(arquivode-imagem). Exemplo: body {background-image:url(gato.gif)}. ELFS, 2003 70
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). Exemplo: ELFS, 2003 71
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 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>! Exercício: Testar outras combinações de valores para as propriedades background-position e background-repeat. ELFS, 2003 72
! 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. margem borda conteúdo! 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-topwidth, border-right-width, border-bottom-width, border-leftwidth ou border-width. ELFS, 2003 73
! Exercício: Estabelecer um estilo conveniente para o elemento img de modo a obter o efeito mostrado na página abaixo. aula03_13.htm ELFS, 2003 74
! 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: <style type= text/css > body {margin-left:10%; margin-right:10%} h1 {margin-top:20%; margin-bottom:5%} </style>! É possível também a definição de classes para a definição de estilos. Por exemplo: <style type= text/css > h2.secao {margin-top:3em; margin-bottom:2em} </style>... <h2 class= secao >Título da seção</h2> Medidas relativas Medidas absolutas em altura da fonte do elemento in polegadas ex altura da letra x cm centímetros px pixels mm milímetros % porcentagem pt pontos (1 ponto = 1/72 polegadas) ELFS, 2003 75
! 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: <style type="text/css"> p {text-indent: 15%} </style>! 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. ELFS, 2003 76
" 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: <style type="text/css"> p {font-family:georgia, Times New Roman, Garamond, Vivaldi, Arial} </style> Definição de Estilos Próprios! Através do atributo class é possível definir estilos personalizados, como ocorre em processadores de texto usuais. Exemplo: ELFS, 2003 77
<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
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. ELFS, 2003 79
aula03_15.htm ELFS, 2003 80