7/24/2019 JavaScript - Aula03
1/29
ELFS, 2003 52
3. Formulrios e Folhas de Estilo em XHTML
! Formulrios introduzem em pginas XHTML a possibilidade de interao comusurio. A informao introduzida em um formulrio pode ser submetida paratratamento por um servidor Web ou ser tratada diretamente no lado clientepor uma linguagem descript , como JavaScript.
! O primeiro padro para tratamento de informao pelo lado servidor foi oCGI(Common Gateway Interface ), para servidores baseados em Unix. Emboraqualquer linguagem possa ser usada para escrever programas CGI, a maisutilizada a linguagemPerl(http://www.perl.com/).
! Atualmente, as linguagens ASP( Active Server Pages ) e JSP(Java ServerPages ) e PHPpermitem que programas sejam includos em pginas de forma
similar a scripts. A linguagem ASP suportada pelo servidor IIS (InternetInformation Server ), enquanto JSP e PHP so suportadas pelos servidores IISe Apache.
! Para incluir um formulrio em uma pgina XHTML devem ser usados osmarcadores e dentro do elemento . O elemento 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, masno precisa, necessariamente, usar o protocolo HTTP. Por exemplo:
7/24/2019 JavaScript - Aula03
2/29
ELFS, 2003 53
Formulrios e Folhas de Estilo em XHTML
" method : define o mtodo usado para envio do formulrio; valorespossveis: 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 seremenviados.
Submisso de Formulrios! Normalmente, um formulrio contm um boto do tiposubmit 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 caixade texto, um boto de rdio, etc) evalor corresponde ao valor atribudo aocomponente (o contedo de uma caixa de texto, o valor de um boto derdio, etc). Para transmitir mais de um valor utilizado o smbolo & entrecada par (nome, valor). Espaos em branco so codificados como +. Oscaracteres (exceto: @ _ . *) so codificados como seu valor hexadecimalprecedido do smbolo % (por exemplo: ! = %21).
! Existem duas maneiras de enviar dados ao servidor:" Omtodo GET: os dados codificados so adicionados ao final da URL e
enviados ao servidor.
7/24/2019 JavaScript - Aula03
3/29
ELFS, 2003 54
Formulrios e Folhas de Estilo em XHTML
" Omtodo POST: os dados codificados so enviados juntamente com ocabealho HTTP da pgina.! O mtodo POST prefervel em relao ao mtodo GET pelas razes:
" POST pode tratar uma quantidade ilimitada de informao, enquanto GETest 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 nocache do navegador (pois os dados fazem parte da URL).Exemplo:
Formulrio XHTML
Digite seu nome:
aula03_01.htm
7/24/2019 JavaScript - Aula03
4/29
ELFS, 2003 55
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 permitem que as informaes possam ser fornecidasde diversas maneiras. Os diversos tipos associados ao elemento so
conhecidos comocontroles de formulrios. Os controles de formulrios podemusar 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 pode assumir os seguintes tipos:text , password ,file , submit , reset , button , image , checkbox , radio , hidden .
Controle 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 com oatributotype assumindo um dos seguintes valores:
" text : uma caixa de texto simples." password : o texto digitado no mostrado.
7/24/2019 JavaScript - Aula03
5/29
ELFS, 2003 56
Formulrios e Folhas de Estilo em XHTML
" file : inroduz no formulrio uma caixa de texto (onde deve-se digitar onome de um arquivo) e um botoBrowse com cdigo embutido, quepode 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:
Formulrio XHTML
Controles de Texto
Digite seu login:
aula03_02.htm
7/24/2019 JavaScript - Aula03
6/29
ELFS, 2003 57
Formulrios e Folhas de Estilo em XHTML
Controle do tipo boto! Pode assumir os seguintes tipos (valor do atributotype ):
" 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 atributovalue define o texto da face);no envia nada ao servidor (para ser til deve ser usado comscripts )" image : deve ter os atributossrc e alt ; ao ser clicado, envia ao servidor
todos os pares (nome, valor) juntamente com a coordenada do pontoonde houve o clique na imagem.
Digite sua senha:Selecione um arquivo:
7/24/2019 JavaScript - Aula03
7/29
ELFS, 2003 58
Formulrios e Folhas de Estilo em XHTML
Exerccio:Reproduzir a pgina ao lado.Controle do tipo boto de rdio! Pode ser dos seguintes tipos:
" checkbox : caixa de seleo; oatributochecked=checked podeser usado para que a caixa de seleoaparea selecionada inicialmente; emum formulrio vrios elementoscheckbox podem ter o mesmo nomee, neste caso, todas as caixasselecionadas sero enviadas aoservidor.
" radio : diferentemente dos elementoscheckbox , se diversos elementosradio tiverem o mesmo nome esteselementos sero mutuamenteexclusivos, ou seja, somente um par(nome, valor) ser enviado ao servidor.
Exerccio: Reproduzir a pgina ao lado.
aula03_03.htm
aula03_04.htm
7/24/2019 JavaScript - Aula03
8/29
ELFS, 2003 59
Formulrios e Folhas de Estilo em XHTML
Controle do tipo hidden! Elementos do tipohidden tm um papel importante em
formulrios. Estes elementos no podem ser vistos ou editados pelosusurios, mas podem armazenar informao em um formulrio.
Desabilitao de elementos ! Qualquer elemento pode ser desabilitado utilizando-se o atributodisabled . Por exemplo:
Elemento ! Este elemento corresponde a uma grande caixa onde o usurio poder digitarum texto que ocupa vrias linhas. O tamanho da caixa definido pelosatributoscols e rows . Barras de rolagem sero acrescentadasautomaticamente se o texto for maior do que o tamanho da caixa.
Elementos e ! Os elementos e so usados para definir uma caixa de
seleo. A caixa de seleo ter tantos itens quantos forem os elementos existentes entre os elementos e . Oatributosize do elemento define quantas escolhas sero exibidasao usurio e se h necessidade de barra de rolagem para exibir as demais.
7/24/2019 JavaScript - Aula03
9/29
ELFS, 2003 60
Formulrios e Folhas de Estilo em XHTML
O atributomultiple do elemento indica se mais de umaseleo possvel(multiple=true ).
Exerccio:! Reproduzir o formulrio ao lado.
Note que o Ramo de Atividade Indstria deve estar selecionadoinicialmente. Considere que as
opes de Estado so: SP, RJ, MG e RS.
aula03_05.htm
7/24/2019 JavaScript - Aula03
10/29
ELFS, 2003 61
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 ( ) sejamapresentados usando fonte Arial de tamanho 18 e na cor azul.
! A linguagem mais utilizada para definir estilos em um documento XHTML aCSS (Cascading Style Sheets ).! Vantagens em utilizar folhas de estilo:
" Pode-se alterar completamente a aparncia de um documento com poucoesforo, pois estilos permitem a separao da parte funcional de umdocumento de seus aspectos de apresentao, definidos nas folhas deestilo.
" 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 emmarcadores XHTML.
" Melhor adaptao a diferentes navegadores, pois como a apresentao do
documento definida separadamente, pode-se criar para um mesmo
7/24/2019 JavaScript - Aula03
11/29
ELFS, 2003 62
Formulrios e Folhas de Estilo em XHTML
documento, estilos especficos para diferentes navegadores. Por exemplo,para navegadores clssicos (como Netscape e Internet Explorer) pode-seenfatizar as cores, fontes ou tamanhos, enquanto que para umsintetizador 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 propriedadesdefinidas em uma folha de estilo para ser apresentado com fonte Arial detamanho 14 e na cor azul for includo um atributo ou uma outrapropriedade para que o texto seja apresentado em negrito, o texto serapresentado 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 defolhas de estilo interpretadas pelos navegadores pode-se consultar:http://webreview.com/pub/guides/style/style.html
Criao e Definio de Folhas de Estilo
p {font-size:12; font-style: italic; color:blue}
elemento ao qual oestilo se aplica
ponto-e-vrgula separandoas propriedades
propriedade valor da propriedade
7/24/2019 JavaScript - Aula03
12/29
ELFS, 2003 63
Formulrios e Folhas de Estilo em XHTML
! A criao de estilos feita utilizando a seguinte sintaxe: elemento ao qual oestilo se aplica, seguido da lista de propriedades e seus respectivos valores aserem aplicadas ao elemento delimitada por chaves { e }. Dentro da lista, ospares propriedade:valor so separados por pontos-e-vrgulas. Para folhas deestilo, no existe diferena entre letras maisculas e minsculas.
!
Estilos podem ser definidos em trs nveis: local, interno e externo. Umdocumento pode usar estilos de qualquer nvel. Estilos locais anulam estilosinternos e estilos internos anulam estilos externos.
Definio de Estilos Locais! Estilo local o definido dentro de elementos de uma pgina. Por exemplo:
Estilos Locais
Estilos Locais
Pargrafo mostrado com fonte maior do que o
normal.
Pargrafo mostrado com fonte de tamanho normal,
mas na cor azul.
aula03_06.htm
7/24/2019 JavaScript - Aula03
13/29
ELFS, 2003 64
Formulrios e Folhas de Estilo em XHTML
! A definio de estilos locais pode ser feita com o elemento paraindicar que o estilo se aplica apenas a uma parte de um elemento. Porexemplo:
! A definio de estilos locais pode ser feita tambm com o elementopara indicar que o estilo se aplica a todos os elementos internos diviso. Porexemplo, a pgina:
Estilos Locais
Estilos Locais
Este pargrafo mostra que estilos podem ser aplicados a
apenas algumas partesdo elemento.
aula03_07.htm
7/24/2019 JavaScript - Aula03
14/29
ELFS, 2003 65
Formulrios e Folhas de Estilo em XHTML
pode ser obtida com:
Definio de Estilos Internos! A definio de estilos internos deve ser feita entre os elementos e
e dentro do elemento da pgina. Por exemplo:
Estilos Locais
Estilos Locais
Este o primeiro pargrafo.
Este o segundo. Note que o mesmo estilo se aplica a
ambos os pargrafos.
aula03_08.htm
Estilos Internos
p {font-family:Arial; font-style:italic; font-size:90%}
aula03_09.htm
7/24/2019 JavaScript - Aula03
15/29
ELFS, 2003 66
Formulrios e Folhas de Estilo em XHTML
h1 {color:blue}h2 {color:red; font-size:120%}
b {color:green}
Apresentao de Documentos
definida em folha de estilo
Ttulo de nvel 2
Este o primeiro pargrafo.
Este o segundo. Note que o mesmo estilo se aplica a
ambos os pargrafos.
7/24/2019 JavaScript - Aula03
16/29
ELFS, 2003 67
Formulrios e Folhas de Estilo em XHTML
! possvel atribuir uma mesma definio de estilo para vrios elementos. Porexemplo:h1, h2, h3 { color:blue } , faz com que os ttulos de nveis1, 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 deve ser utilizadopara aplicar uma folha de estilo ao documento, com a atributohref definindoa URL da folha de estilos externa. Por exemplo:
Estilos Externos
Apresentao de Documentos
definida em folha de estiloTtulo de nvel 2
Este o primeiro pargrafo.
Este o segundo. Note que o mesmo estilo
se aplica a ambos os pargrafos.
aula03_10.htm
Note que estedocumentono teminformaesde estilo. Oestilo importado deum arquivoexterno.
7/24/2019 JavaScript - Aula03
17/29
ELFS, 2003 68
Formulrios e Folhas de Estilo em XHTML
! Exerccio: Verificar o resultado obtido pela pginaaula03_10.htm , que usao arquivo de folha de estilomeu_estilo.css , e compare com a pginaobtida pelo documentoaula03_09.htm .
Herana de Propriedades em Folhas de Estilo! A pgina a seguir ser construda 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}
meu_estilo.css
7/24/2019 JavaScript - Aula03
18/29
7/24/2019 JavaScript - Aula03
19/29
ELFS, 2003 70
Formulrios e Folhas de Estilo em XHTML
Algumas Propriedades de Folhas de Estilo! Cores . A maneira mais fcil de estabelecer o valor da propriedadecolor
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 elementosa:link , a:visited e a:activeestabelecem a apresentao de ligaes no visitadas, visitadas e que se esttentando visitar no momento. Exemplos:text-decoration:none (suprimeo sublinhado de uma ligao),background-color:uma-cor (adiciona umacor de fundo a uma ligao).
! Textura de Fundo . Estabelecida pela propriedadebackgound-image doelementobody . O valor da propriedade deve ser escrito comourl (arquivo-de-imagem). Exemplo:body {background-image:url(gato.gif)} .
Este o segundo pargrafo. Note que a ele se aplicam somenteos estilos interno e externo no havendo definio deestilo local ao pargrafo.
7/24/2019 JavaScript - Aula03
20/29
ELFS, 2003 71
Formulrios e Folhas de Estilo em XHTML
Outras propriedades:background-position (valores possveis:top ,bottom , left , center , right , podendo haver combinaes consistentes devalores, como:top left ou bottom center ) e background-repeat(valores possveis:repeat , repeat-x , repeat-y , no-repeat ).
Exemplo:
7/24/2019 JavaScript - Aula03
21/29
ELFS, 2003 72
Formulrios e Folhas de Estilo em XHTML
! Exerccio: Testar outras combinaes de valores para as propriedadesbackground-position e background-repeat .
Textura de Fundo
body {background-image:url(pantera.gif);
background-position:bottom center; background-repeat:repeat-x}
Textura de Fundo
A aplicao de uma textura a um documento requer adefinio de uma imagem que deve ser utilizada comofundo do documento. Se a imagem no ocupar a totalidadeda pgina ela poder ser repetida quantas vezes forem necessrias para ocupar toda a pgina.
aula03_12.htm
7/24/2019 JavaScript - Aula03
22/29
ELFS, 2003 73
Formulrios e Folhas de Estilo em XHTML
! Bordas e Margens . A figura a seguir mostra como so entendidos osconceitos de borda e margem em relao a um elemento qualquer de umdocumento XHTML.
! Para a margem, os valores:auto , um-tamanho , uma-porcentagem devem seratribudos s propriedades:margin-top , margin-right , margin-bottom ,margin-left ou margin .
! A borda estabelecida pela propriedade border, que pode assumir um dosseguintes 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-top-width , border-right-width , border-bottom-width , border-left-width ou border-width .
contedo
margem
borda
7/24/2019 JavaScript - Aula03
23/29
7/24/2019 JavaScript - Aula03
24/29
ELFS, 2003 75
Formulrios e Folhas de Estilo em XHTML
!
As propriedadesmargin-top e margin-bottom podem ser usadas tambmpara definir o espaamento acima e abaixo de ttulos em um documentoXHTML. Por exemplo:
! possvel tambm a definio declassespara a definio de estilos. Porexemplo:
body {margin-left:10%; margin-right:10%}
h1 {margin-top:20%; margin-bottom:5%}
h2.secao {margin-top:3em; margin-bottom:2em}
...Ttulo da seo
pontos (1 ponto = 1/72 polegadas)ptporcentagem%milmetrosmmpixelspxcentmetroscmaltura da letra xexpolegadasinaltura da fonte do elementoem
Medidas absolutasMedidas relativas
7/24/2019 JavaScript - Aula03
25/29
ELFS, 2003 76
Formulrios e Folhas de Estilo em XHTML
!Indentao de Pargrafos . A propriedadetext-indent usada paraestabelecer um recuo na primeira linha de um pargrafo (indentao). Porexemplo:
! Controle de Fontes de Caracteres . As propriedades de folhas deestilo tambm devem ser usadas para controlar como os caracteres seroapresentados em um documento XHTML. As seguintes propriedades estodisponveis:
" font-size : normalmente definido empt ou %, mas pode ser expressocom 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 porcentagemdo espaamento normal, valor empt , ou normal .
p {text-indent: 15%}
7/24/2019 JavaScript - Aula03
26/29
ELFS, 2003 77
Formulrios e Folhas de Estilo em XHTML
"
font-family : define os nomes das fontes a serem usadas; pode definirvrios nomes alternativos (ser usada a primeira disponvel nocomputador). Exemplo:
Definio de Estilos Prprios! Atravs do atributoclass possvel definir estilos personalizados, como ocorre
em processadores de texto usuais. Exemplo:
p {font-family:Georgia, Times New Roman, Garamond, Vivaldi, Arial}
7/24/2019 JavaScript - Aula03
27/29
ELFS, 2003 78
Formulrios e Folhas de Estilo em XHTML
Textura de Fundo
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
7/24/2019 JavaScript - Aula03
28/29
7/24/2019 JavaScript - Aula03
29/29
ELFS, 2003 80
Formulrios e Folhas de Estilo em XHTML aula03_15.htm