Académique Documents
Professionnel Documents
Culture Documents
ELFS, 2003
52
"
"
"
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
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
55
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
57
aula03_03.htm
58
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
ELFS, 2003
60
61
ponto-e-vrgula separando
as propriedades
valor da propriedade
62
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
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
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>
<html>
<head>
<title>Estilos Internos</title>
<style type="text/css">
p {font-family:Arial; font-style:italic; font-size:90%}
ELFS, 2003
65
ELFS, 2003
66
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.
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
ELFS, 2003
68
{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
70
ELFS, 2003
71
<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>
ELFS, 2003
72
ELFS, 2003
73
ELFS, 2003
74
ELFS, 2003
Medidas absolutas
em
in
polegadas
ex
altura da letra x
cm
centmetros
px
pixels
mm
milmetros
porcentagem
pt
ELFS, 2003
76
<style type="text/css">
p {font-family:Georgia, Times New Roman, Garamond, Vivaldi, Arial}
</style>
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
79
ELFS, 2003
aula03_15.htm
80