0% acharam este documento útil (0 voto)

26 visualizações96 páginas

PW002 - CSS

O documento discute os conceitos básicos de CSS (Cascading Style Sheets), incluindo: 1) CSS é usado para adicionar estilos como fontes, cores e espaçamentos a documentos web; 2) Estilos podem ser adicionados diretamente em tags HTML ou por meio de arquivos externos; 3) Regras CSS são compostas por seletores e declarações que determinam onde e como os estilos serão aplicados.

Enviado por

Silvano Oliveira

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

26 visualizações96 páginas

PW002 - CSS

Enviado por

Silvano Oliveira

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 96

PROGRAMAÇÃO WEB

(CSS)
[email protected]
Definição
■ CSS = Cascade Style Sheet = Folha de Estilo em Cascata

■ Do site do W3C:
■ “Folhas de estilo em cascata é um mecanismo simples para
adicionar estilos (por exemplo: fontes, cores, espaçamentos) aos
documentos web”

Prof Silvano Oliveira (Programação Web) 2

Estilos dentro do HTML
■ <nometag style=“propriedade:valor;">

Cor de Fundo

<h1>Isto é um cabeçalho</h1>
<p>Isto é um parágrafo.</p>

</body>
Prof Silvano Oliveira (Programação Web) 3
Estilos dentro do HTML
■ Cor do Texto
<body>
<h1 style="color:blue;">Isto é um cabeçalho</h1>
<p style="color:red;">Isto é um parágrafo.</p>
</body>
■ Tipo da fonte
<body>
<h1 style="font-family:verdana;"> Isto é um cabeçalho </h1>
<p style="font-family:courier;"> Isto é um parágrafo.</p>
</body>
Prof Silvano Oliveira (Programação Web) 4
Estilos dentro do HTML
■ Tamanho da fonte
<h1 style="font-size:300%;"> Isto é um cabeçalho </h1>
<p style="font-size:160%;"> Isto é um parágrafo.</p>

■ Alinhamento da fonte
<h1 style="text-align:center;"> Isto é um cabeçalho </h1>
<p style="text-align:center;"> Isto é um parágrafo.</p>

Prof Silvano Oliveira (Programação Web) 5

Sintaxe CSS
•Regra CSS
Regra CSS

seletor {propriedade: valor}

Declaração

Exemplos:
body{background-color: blue}
OU
body{background-color: ligthgrey}
Prof Silvano Oliveira (Programação Web) 6
Regra CSS
■ Seletor: é o alvo da CSS, define onde será aplicada a regra
CSS
■ Declaração: determina os parâmetros da estilização
– Propriedade: define qual propriedade do elemento será
estilizado
– Valor: é a quantificação ou qualificação da propriedade

Prof Silvano Oliveira (Programação Web) 7

Prioridade dos estilos
■ As folhas de estilos podem ser inseridas de três formas:

1. Escrita diretamente na tag.

2. Escrita no cabeçalho da página web.
3. Escrita em um arquivo externo, sendo acessado pela página
web.

A ordem de prioridade é 1 – 2 – 3

Prof Silvano Oliveira (Programação Web) 8

CSS inline (embutida)
■ <h2 style="background-color:blue;">Cabeçalho estilizado</h2>

■ <p style=“font-family:Arial; color:purple”>Parágrafo bonito</p>

■ Colocar a cor da fonte do h2 como branco

Prof Silvano Oliveira (Programação Web) 9

Onde colocar isso?
<head>
<title>Exercício CSS</title>
<style type="text/css">
h1 {
text-align: center
}
</style>
</head>
<body>
<h2 style="background-color: blue; color:white">Cabeçalho
estilizado</h2>
<p style=“font-family:Arial; color:purple”>Parágrafo bonito</p>
</body>
Prof Silvano Oliveira (Programação Web) 10
Seletores podem compartilhar declarações
<head>
<title>Exercício CSS</title>
<style type="text/css">
h1, h2 {
text-align: center
}
</style>
</head>
<body>
<h2 style="background-color: blue; color:white">Cabeçalho estilizado</h2>
<p style=“font-family:Arial; color:purple”>Parágrafo bonito</p>
</body>

Prof Silvano Oliveira (Programação Web) 11

Uma declaração pode definir mais de uma
propriedade
<head>
<title>Exercício CSS</title>
<style type="text/css">
h1, h2{
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Cabeçalho H1</h1>
<h2 style="background-color: blue; color:white">Cabeçalho estilizado</h2>
<p style=“font-family:Arial; color:purple”>Parágrafo bonito</p>
</body>
Prof Silvano Oliveira (Programação Web) 12
Uma declaração pode definir mais de uma
propriedade
<head>
<title>Exercício CSS</title>
<style type="text/css">
h1, h2{
text-align: center;
color: red;
}
p {font-size: 30px; }
</style>
</head>
<body>
<h1>Cabeçalho H1</h1>
<h2 style="background-color: blue; color:white">Cabeçalho estilizado</h2>
<p style=“font-family:Arial; color:purple”>Parágrafo bonito</p>
</body>

Prof Silvano Oliveira (Programação Web) 13

Reutilizando folhas de estilo
<style type="text/css"> estilo.css
h1, h2{text-align: center;
color: red;} h1, h2{text-align: center;
h1 { color: red;}
color: sienna; h1 {
font-family: arial color: sienna;
} font-family: arial
}
h2 {margin-left: 80px}
h2 {margin-left: 80px}
ol {
ol {
color: blue;
color: blue;
font-family: verdana font-family: verdana
} }
</style>

Prof Silvano Oliveira (Programação Web) 14

Reutilizando folhas de estilo
<head>
<title>Exercício CSS</title>
<style>
...
</style>
<link type="text/css“ rel="stylesheet” href="estilo.css" />
</head>

Prof Silvano Oliveira (Programação Web) 15

Comentários em Arquivos CSS
/* formata a tag de cabeçalhos */
h1, h2 {
text-align: center; /* texto centralizado
*/
color: red; /* texto com cor vermelha */
}

Prof Silvano Oliveira (Programação Web) 16

Mais exemplos em estilo.css
h1 {
color: sienna;
font-family: arial
}
h2 {margin-left: 80px}
ol {
color: blue;
font-family: verdana
}

Prof Silvano Oliveira (Programação Web) 17

Exemplo estilo.html
<head>
<title>Exercício CSS</title>
<link type="text/css“ rel="stylesheet” href = "estilo.css" />
</head>
<body>
<h1>Cabeçalho H1</h1>
<h2 style="background-color: blue; color:white">Cabeçalho estilizado</h2>
<p style=“font-family:Arial; color:purple”>Parágrafo bonito</p>
<ol>
<li>Primeira opção</li>
<li>Segunda opção</li>
</ol>
</body>

Prof Silvano Oliveira (Programação Web) 18

Somente tag body
<body>
<h1>Cabeçalho H1</h1>
<h2 style="background-color: blue; color:white">Cabeçalho
estilizado</h2>
<p style=“font-family:Arial; color:purple”>Parágrafo bonito</p>
<ol>
<li>Primeira opção</li>
<li>Segunda opção</li>
</ol>
</body>
Prof Silvano Oliveira (Programação Web) 19
Crie uma nova página com este conteúdo:
classe.html
Disciplina Professor(es)
Programação Web Silvano
Algoritmos Joberth
Português Silveira
Matemática Jairo
Redes Silvano
Prog Estruturada Wanderson
Química Antonio
POO Joberth

Prof Silvano Oliveira (Programação Web) 20

Classes de estilo

•Não estamos restritos somente aos elementos XHTML (tags)

para aplicar regras de estilo
•Podemos “inventar” um nome e com ele criar uma classe que
definirá essas regras CSS

elemento.classe {propriedade: valor}

Prof Silvano Oliveira (Programação Web) 21

Criando a classe
h1 {
color: sienna;
font-family: arial
}
h2 {margin-left: 80px} Adicione isso na sua folha de ESTILO.CSS
ol {
color: blue;
font-family: verdana
}
tr.cor-um{background-color: gray}
tr.cor-dois{background-color: lightblue}

Prof Silvano Oliveira (Programação Web) 22

Utilizando a classe
■ <table border="1px">
<tr><th>Disciplina</th> <th>Professor(es)</th> </tr>
...
<tr class="cor-um"><td>Redes</td> <td>Débora</td></tr>
<tr class="cor-dois"><td>Eletricidade</td> <td>Jean</td></tr>
<tr class="cor-um"><td>Eletrônica</td> <td>Filipe</td></tr>
<tr class="cor-dois"><td>POO</td> <td>André</td></tr>
...
■ </table>

Adicione na sua tabela de professores

Prof Silvano Oliveira (Programação Web) 23

Classes genéricas
•Omitindo a tag XHTML, define-se uma classe que
pode ser usada com qualquer tag Adicione isso
na sua folha de
.cor-um{background-color: red} ESTILO.CSS
.cor-dois{background-color: orange}

•Adicione no Classe.html no fim do arquivo.

■<h2 class="cor-um">Objetivos</h2>
■<h2 class="cor-dois">Bases Tecnológicas</h2>

Prof Silvano Oliveira (Programação Web) 24

Seletor ID
●Pode-se também definir estilos utilizando o seletor id #
(especificando ou não a tag)

#links{text-decoration: underline}

Adicione em ESTILO.CSS

● Para usar basta ter uma tag com o atributo id=”links”

● <h2 id="links">Links Importantes</h2>

Prof Silvano Oliveira (Programação Web) 25

Seletor class ou id ?

●Um atributo id e seu respectivo nome (valor) deve ser

único no documento
●Por ser exclusivo, o atributo id é genericamente chamado
de identificador
●A especificidade de um seletor id é maior do que a de um
seletor class

Prof Silvano Oliveira (Programação Web) 26

Cascateando estilos
■ Pode-se restringir ainda mais o uso de estilos, aproveitando-se da sua
natureza em cascata
p i{
letter-spacing: 5px;
color: red; Adicione em ESTILO.CSS

}
#titulo h1 {
text-transform: capitalize
}
■ Exemplo:
<p>Bases <i>Tecnológicas</i></p>
Prof Silvano Oliveira (Programação Web) 27
Pseudoclasses
●Permitem associar efeitos especiais a seletores ou a parte de
seletores

seletor: pseudoclasse {
propriedade: valor
}

Prof Silvano Oliveira (Programação Web) 28

Pseudoclasses
■ :hover - quando o mouse passa sobre o elemento.
■ :active - ativamos o elemento, ex. clicando sem soltar o botão
do mouse sobre um link (não existe em todos os elementos).
■ :visited - quando o link é visitado.
■ :focus - quando elemento recebe foco.
■ :link - estado inicial do link.
■ Ex.: Acrescentar ao
th: hover { Estilo.css
background-color: yellow;
}

Prof Silvano Oliveira (Programação Web) 29

Pseudoclasses

Observação

■ :link e :visited: só podem ser aplicados a tag <a>

Prof Silvano Oliveira (Programação Web) 30

Exemplo
■ Para melhor visualização e exemplificação dos conceitos contidos
neste slide vamos criar uma página web bem simples constituída de:
– um cabeçalho título (<h1>);
– um cabeçalho subtítulo (<h3>) ;
– dois parágrafos (<p>) ;
■ Criar arquivo BoxCSS.html
<body>
<h1>Cabeçalho Título</h1>
<h3>Cabeçalho Subtítulo</h3>
<p>Primeiro parágrafo</p>
<p>Segundo parágrafo</p>
</body>
Prof Silvano Oliveira (Programação Web) 31
Exemplo
■ As CSS considera e trata todos dos elementos HTML
como se fossem caixas
■ Essas “caixas” são as unidades básicas de formatação
CSS

Prof Silvano Oliveira (Programação Web) 32

Entendendo as caixas CSS
■ As caixas CSS são constituídas por 04 (quatro) áreas
retangulares, listadas abaixo:
– conteúdo;
– espaçamentos (padding);
– bordas (border);
– margens (margin).

Prof Silvano Oliveira (Programação Web) 33

Crie um Estilo3.CSS

h1 { h3 {
background-color: background-color:
#cc9; #fc9;
border: 10px solid #f00; border: 20px solid #039;
padding: 5px; padding: 15px;
} }

Prof Silvano Oliveira (Programação Web) 34

Adicione ao Estilo3.CSS
p.um { p.dois {
background-color: background-color:
#ff9; #cff;
border: 5px solid #f0f; border: 2px solid #039;
padding: 5px; padding: 10px;
text-align: justify; text-align: justify;
} }

Obs.: classes .um e .dois para o primeiro e segundo

parágrafos do HTML
Prof Silvano Oliveira (Programação Web) 35
Caixas...

Prof Silvano Oliveira (Programação Web) 36

Características das caixas
■ Margens (margin): são sempre transparentes e largura
padrão definida pelo navegador
■ Bordas (border): são transparentes e larguras iguais a
zero
■ Espaçamentos (padding): transparentes e iguais a zero
■ O fundo (background): está por trás do conteúdo e do
espaçamento

Prof Silvano Oliveira (Programação Web) 37

Características das caixas
■ Margens, bordas e espaçamentos pode ter diferentes
espessuras para cada um dos lados
■ Espessura igual a zero não será exibido
■ Cores e tipos das margens podem ser diferentes para
cada lado
■ A cor ou imagem de fundo pode definida para ser
colocadas atrás do conteúdo e espaçamento

Prof Silvano Oliveira (Programação Web) 38

Margens sobrepostas

Prof Silvano Oliveira (Programação Web) 39

CORES

Prof Silvano Oliveira (Programação Web) 40

Objetivo
final

Prof Silvano Oliveira (Programação Web) 41

Começando do começo

Prof Silvano Oliveira (Programação Web) 42

Ops...

Prof Silvano Oliveira (Programação Web) 43

Tag Meta
■ Tag meta: fornece informações sobre a página

■ Exemplos de Atributos:
– name: especifica o nome da meta informação
– content: especifica o valor da meta informação
– http-equiv: especifica parâmetros do cabeçalho HTTP
Prof Silvano Oliveira (Programação Web) 44
Cores

Prof Silvano Oliveira (Programação Web) 45

Cores

Fonte: http://maujor.com/tutorial/cores.php

Prof Silvano Oliveira (Programação Web) 46

RGB
● R – Red
● G – Green
● B – Blue

Fonte: http://pt.wikipedia.org/wiki/RGB
Prof Silvano Oliveira (Programação Web) 47
Representando as cores
● Representação numérica inteira (0 a 255)
– RGB(rrr, ggg, bbb) → mistura de uma quantidade rrr de vermelho
com ggg de verde e com bbb de azul.
– Branco – RGB(255,255,255)
– Azul – RGB(0,0,255)
– Vermelho – RGB(255,0,0)
– Verde – RGB(0,255,0)
– Amarelo – RGB(255,255,0)
– Magenta – RGB(255,0,255)
– Ciano – RGB(0,255,255)
– Preto - RGB(0,0,0)
Prof Silvano Oliveira (Programação Web) 48
Representando as cores
● Representação percentual (0% a 100%)
– rgb(r%, g%, b%) → mistura de uma quantidade r% de vermelho com g% de verde e
com b% de azul.
– Branco →RGB(100%, 100%, 100%)
– Azul →RGB(0, 0, 100%)
– Vermelho →RGB(100%, 0%, 0%)
– Verde →RGB(0%, 100%, 0%)
– Amarelo →RGB(100%, 100%, 0%)
– Magenta →RGB(100%, 0%, 100%)
– Ciano →RGB(0%, 100%, 100%)
– Preto →RGB(0%, 0%, 0%)
● Não misture

Prof Silvano Oliveira (Programação Web) 49

Representando as cores
● Representação em hexadecimal (0 a F)
● 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
– #RRGGBB → mistura de uma quantidade RR de vermelho com GG de verde e com
BB de azul.
– Branco → #FFFFFF
– Azul → #0000FF
– Vermelho → #FF0000
– Verde → #00FF00
– Amarelo → #FFFF00
– Magenta → #FF00FF
– Ciano → #00FFFF
– Preto → #000000

Prof Silvano Oliveira (Programação Web) 50

Representando as cores
● Representação em hexadecimal abreviada (0 a F)
● 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
– #RGB → mistura de uma quantidade RR de vermelho com GG de verde e com BB
de azul.
– Branco → #FFF
– Azul → #00F
– Vermelho → #F00
– Verde → #0F0
– Amarelo → #FF0
– Magenta → #F0F
– Ciano → #0FF
– Preto → #000

Prof Silvano Oliveira (Programação Web) 51

Testando todas representações

Prof Silvano Oliveira (Programação Web) 52

Testando todas representações

Prof Silvano Oliveira (Programação Web) 53

Unidades de medidas

Prof Silvano Oliveira (Programação Web) 54

Unidades de Medidas
■div { margin: 1.5em; }
■h4 { margin: 2ex; }
■p { font-size: 14px; }
■.classe { padding: 90%; }
■hr { width: 14pt; }
■h1 { margin: 1pc; }
■h2 { font-size: 4mm; }
■p.classe { padding: 0.3cm; }
■h5.classe { padding: 0.5in; }

Prof Silvano Oliveira (Programação Web) 55

FORMULÁRIOS

Prof Silvano Oliveira (Programação Web) 56

Formulários
➢ Os formulários em HTML são usados para selecionar
diferentes tipos de entradas do usuário

➢ São bastante utilizados para realizar buscas e introduzir

dados pessoais

➢ São delimitados pelas tags

Prof Silvano Oliveira (Programação Web) 57

Formulários
Input (Entrada)
É a tag mais utilizada em formulário
Conjunto de campos e botões
<form>
<input>
<input>
...
<input>
</form>

Prof Silvano Oliveira (Programação Web) 58

Formulários
➢ Input (Entrada)
➢ O tipo é dado através do atributo type
<input type=“text”>
➢ Tipos da tag <input>
➢ text – quando se deseja digitar letras, números, etc
➢ radio – quando se deseja oferecer opções para escolha única
➢ checkbox – múltiplas escolhas
➢ password – campo de senha
➢ button – botão
➢ submit – botão para envio de dados
➢ reset – limpa todos os campos do formulário

Prof Silvano Oliveira (Programação Web) 59

Formulários
➢ Input (Entrada)
➢ A tag <label> pode ser usada para atribuir um título ao campo do
formulário

<label> Nome: </label>

Prof Silvano Oliveira (Programação Web) 60

Formulários
<html>
<head>
<title>Meu primeiro formulário</title>
</head>
<body>
<form>
<label> Nome: </label>
<input type=“text”>
</form>
</body>
</html>
Prof Silvano Oliveira (Programação Web) 61
Formulários
<html>
<head>
<title>Meu primeiro formulário</title>
</head>
<body>
<form>
<label> Nome: </label>
<input type=“text”> <br>
<label> Sobrenome: </label>
<input type=“text”>
</form>
</body>
</html>

Prof Silvano Oliveira (Programação Web) 62

Atributo Name

➢ Os formulários são utilizados para repassar dados para outras páginas web
➢ Quando o formulário é enviado, os dados são empacotados e enviados
para um servidor web que processará os dados através de scripts
➢ São páginas por exemplo, PHP, ASP, JSP...
➢ O atributo name identifica o dado quando ele for empacotado e
enviado através da web
➢ Por isso, cada campo do formulário deve ter este atributo

Prof Silvano Oliveira (Programação Web) 63

Formulários
<html>
<head>
<title>Meu primeiro formulário</title>
</head>
<body>
<form>
<label> Nome: </label>
<input type=“text” name=“nome”> <br>
<label> Sobrenome: </label>
<input type=“text” name=“sobrenome”>
</form>
</body>
</html>

Prof Silvano Oliveira (Programação Web) 64

Continuando com os tipos de Input
➢ No tipo de botões “radio” um outro atributo é
necessário
➢ Atributo value
➢ As opções de um conjunto de elementos rádio são
agrupadas através do atributo name
➢ Apenas uma das opções com o mesmo valor do
atributo name pode ser selecionada

...
<label> Sexo: </label>
<input type=“radio” value=“Masculino” name=“sexo”> Masculino <br>
<input type=“radio” value=“Feminino” name=“sexo”> Feminino <br>
...

Prof Silvano Oliveira (Programação Web) 65

Password

...
<label> Login: </label>
<input type=“text” name=“login”><br>
<label> Senha: </label>
<input type=“password” name=“senha”>
...

Prof Silvano Oliveira (Programação Web) 66

Checkbox – Caixas de Seleção

Do mesmo modo que os radio buttons, nos

checkbox, as opções de um conjunto de
elementos são agrupadas através do atributo
name.

...
<label>Onde estuda:</label> <br>
<input type="checkbox" name="onde_estuda" value="IEMA"> IEMA <br>
<input type="checkbox" name="onde_estuda" value="UEMA"> UEMA <br>
<input type="checkbox" name="onde_estuda" value="IFMA"> IFMA <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro...
...
Prof Silvano Oliveira (Programação Web) 67
Submit
➢ O formulário, ao ser criado, é com a intenção de enviar os dados para algum
processamento
➢ O tipo “submit” cria um botão para que os dados possam ser enviados para o
destino
...
<label>Onde estuda:</label> <br>
<input type="checkbox" name="onde_estuda" value="IEMA"> IEMA <br>
<input type="checkbox" name="onde_estuda" value="UEMA"> UEMA <br>
<input type="checkbox" name="onde_estuda" value="IFMA"> IFMA <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro... <br><br>
<input type=“submit" name=“enviar" value=“enviar“>
...

Prof Silvano Oliveira (Programação Web) 68

Submit
➢ Mas enviar para onde?
➢ Há um atributo action a ser inserido na tag <form> quando o formulário é
criado que deve indicar para onde os dados serão submetidos. Ao ser
pressionado o botão do tipo submit, os dados são enviados.
<form action=“processa_dados.html”>
...
<label>Onde estuda:</label> <br>
<input type="checkbox" name="onde_estuda" value="IEMA"> IEMA <br>
<input type="checkbox" name="onde_estuda" value="UEMA"> UEMA <br>
<input type="checkbox" name="onde_estuda" value="IFMA"> IFMA <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro... <br><br>
<input type=“submit" name=“enviar" value=“enviar“>
</form>

Prof Silvano Oliveira (Programação Web) 69

Submit
➢ Mas enviar para onde?
➢ Outro atributo que é importante para o envio de dados é o parâmetro method.
Ele indica de que modo os dados do formulário serão empacotados.

<form action=“processa_dados.html” method=“GET”>

Prof Silvano Oliveira (Programação Web) 70

Submit
➢ Os métodos existentes são GET e POST. Ambos cumprem a mesma tarefa, mas de
maneiras diferentes
➢ POST: empacota as variáveis e as envia de forma oculta para o servidor
➢ GET: também empacota as variáveis, porém anexa os valores antes de enviá-
las para o servidor
http://www.cinemark.com.br/horarios/?cidade=22&cine1=681&filme1=&x=22&y=1
2

http://www.teste.com.br/processa_dados.php?nome=Alba&sobrenome=Lopes

Prof Silvano Oliveira (Programação Web) 71

Reset
➢ O tipo “reset” faz com que o formulário volte ao estado
inicial (vazio ou com o valor que for especificado no
atributo value)

<form action=“processa_dados.html” method=“GET”>

<input type=“reset" name=“limpar" value=“limpar“>

</form>

Prof Silvano Oliveira (Programação Web) 72

Image
➢ O tipo “image” tem a mesma função que o submit, porém ao
invés do botão, pode-se utilizar uma imagem
➢ Mesmos atributos do elemento <img>
<form action=“processa_dados.html” method=“GET”>
...
<label>Onde estuda:</label> <br>
<input type="checkbox" name="onde_estuda" value="IEMA"> IEMA <br>
<input type="checkbox" name="onde_estuda" value="UEMA"> UEMA <br>
<input type="checkbox" name="onde_estuda" value="IFMA"> IFMA <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro... <br><br>
<input type=“reset" name=“limpar" value=“limpar“>

<input type=“image" src=“imagens/botao_enviar.png” name=“enviar" alt=“enviar>

</form>

Prof Silvano Oliveira (Programação Web) 73

Textarea

➢ O elemento <textarea> cria um elemento de texto com mais de uma linha de

digitação
<form action=“processa_dados.html” method=“GET”>
...
<label>Onde estuda:</label> <br>
<input type="checkbox" name="onde_estuda" value="IEMA"> IEMA <br>
<input type="checkbox" name="onde_estuda" value="UEMA"> UEMA <br>
<input type="checkbox" name="onde_estuda" value="IFMA"> IFMA <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro... <br><br>
Observações<br>
<textarea name=“observacoes”></textarea>
<input type=“submit" name=“enviar" value=“enviar“>
</form>

Prof Silvano Oliveira (Programação Web) 74

Textarea

➢ O elemento <textarea> cria um elemento de texto

com mais de uma linha de digitação
<form action=“processa_dados.html” method=“GET”>
...
<label>Onde estuda:</label> <br>
<input type="checkbox" name="onde_estuda" value="IEMA"> IEMA <br>
<input type="checkbox" name="onde_estuda" value="UEMA"> UEMA <br>
<input type="checkbox" name="onde_estuda" value="IFMA"> IFMA <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro... <br><br>
Observações<br>
<textarea name=“observacoes” rows=“4” cols=“20”></textarea>
<input type=“submit" name=“enviar" value=“enviar“>
</form>

Prof Silvano Oliveira (Programação Web) 75

Textarea

➢ Para iniciar o campo com algum texto, basta colocar

entre as tags de abertura e fechamento

<form action=“processa_dados.html” method=“GET”>

<label>Onde estuda:</label> <br>
<input type="checkbox" name="onde_estuda" value="IEMA"> IEMA <br>
<input type="checkbox" name="onde_estuda" value="UEMA"> UEMA <br>
<input type="checkbox" name="onde_estuda" value="IFMA"> IFMA <br>
<input type="checkbox" name="onde_estuda" value="Outro"> Outro... <br><br>
Observações<br>
<textarea name=“observacoes” rows=“4” cols=“20”>Texto inicial qualquer...
</textarea>
<input type=“submit" name=“enviar" value=“enviar“>
</form>
Prof Silvano Oliveira (Programação Web) 76
Select
 O elemento <select> cria um controle de menu na
página web
 <select> e </select> delimita o bloco de opções (cria a caixinha do menu)
 <option> e </option> cria cada uma das opções

Prof Silvano Oliveira (Programação Web) 77

Select
<form action=“processa_dados.html”
method=“GET”>

...
<select>
<option> Nova Cruz </option>
<option> Serrinha </option>
<option> Montanhas </option>
<option> Brejinho</option>
<option> Monte Alegre</option>
<option> Natal</option>
</select>
...
</form> Prof Silvano Oliveira (Programação Web) 78
Fieldset e Legend

• Os elementos <fieldset> e
<legend> criam uma borda
que contorna o formulário e
uma legenda, respectivamente

Prof Silvano Oliveira (Programação Web) 79

Fieldset e Legend
<form action=“processa_dados.html” method=“GET”>
<fieldset>
<legend>Exemplo de Formulário </legend>
...
<select>
<option> Nova Cruz </option>
<option> Serrinha </option>
<option> Montanhas </option>
<option> Brejinho</option>
<option> Monte Alegre</option>
<option> Natal</option>
</select>
...
</fieldset>
</form>
Prof Silvano Oliveira (Programação Web) 80
Fieldset e Legend
• Criar uma página processa_dados.html que exiba uma
mensagem:
• “Seus dados foram recebidos com sucesso!”
• Testar a submissão do formulário.
• A página processa_dados.html deve estar no action do
formulário criado
• Ao clicar no botão Enviar, a página deve ser redirecionada para
processa_dados.html

Prof Silvano Oliveira (Programação Web) 81

Fieldset e Legend

Prof Silvano Oliveira (Programação Web) 82

Exercício de Fixação
• Você foi contratado para construir
um site de uma empresa de
pesquisa de opinião.
• A empresa está atualmente
trabalhando com opiniões para os
próximos candidatos a prefeito da
sua cidade.
• Você deve criar um formulário para
coletar os dados da pesquisa
como o modelo seguinte:

Prof Silvano Oliveira (Programação Web) 83

Exercício de Fixação
• Crie uma página para ser
redirecionada quando o botão de
“Enviar” for pressionado.

Prof Silvano Oliveira (Programação Web) 84

Prof Silvano Oliveira (Programação Web) 85
Novidades de HTML 5 para formulários
 Nova versão de HTML
 Trouxe inovações como validação automática de campos de
formulário
 Inclui novos tipos de campo (type)
 email
 url
 Datas e horas
 Number
 tel

Prof Silvano Oliveira (Programação Web) 86

Novos tipos de dados e atributos
 Atributo: required
 Define que um campo de deve ser obrigatoriamente preenchido antes
de realizar submit do form
 Ex: type=“text”

Prof Silvano Oliveira (Programação Web) 87

Novos tipos de dados e atributos
 Atributo: required
 Define que um campo de deve ser obrigatoriamente preenchido antes
de realizar submit do form
 Ex: type=“radio”

Prof Silvano Oliveira (Programação Web) 88

Novos tipos de dados e atributos
 Tipo: email
 Define que o campo receberá um valor referente a um e-mail e faz
validação caso o valor digitado não tenha todas as características de um
e-mail

Prof Silvano Oliveira (Programação Web) 89

Novos tipos de dados e atributos
 Tipo: number
 Define que o valor do campo deve ser numérico

Prof Silvano Oliveira (Programação Web) 90

Novos tipos de dados e atributos
 Atributo: min
 Define que um valor mínimo para um campo numérico

Prof Silvano Oliveira (Programação Web) 91

Novos tipos de dados e atributos
 Atributo: max
 Define que um valor máximo para um campo numérico

Prof Silvano Oliveira (Programação Web) 92

Novos tipos de dados e atributos
 Tipo: date
 Formata o campo em estilo de data

Prof Silvano Oliveira (Programação Web) 93

Novos tipos de dados e atributos
 Atributo: placeholder
 Informa um texto inicial de auxílio de preenchimento de um campo

Prof Silvano Oliveira (Programação Web) 94

Novos tipos de dados e atributos

Campo de telefone

<label>Telefone</label>
<input type="tel" name="telefone" size="20" maxlength="20" />

Prof Silvano Oliveira (Programação Web) 95

Exercício de Fixação
Criar uma página HTML com um formulário de matrícula de alunos em uma escola
(matricula.html). Este formulário deve conter os seguintes campos:
Nome do Aluno (texto de máximo 50 caracteres)
Data de nascimento
E-mail
Telefone (máximo 8 caractere numéricos + DDD + ramal)
Série (select de 1º ao 4º ano do Ensino Médio)
Turno preferencial (botão de rádio manhã / tarde / noite)
Atividades extra-curriculares (checkbox com teatro / música / ballet / pintura / judô / futebol)
Todos os campos devem ser de preenchimento obrigatório.
Utilize legend e fieldset para organizar seu formulário
Ao clicar no botão Submit, a página deve ser direcionada para uma página de
confirmação (sucesso.html)