HTML e CSS Desenvolvimento web básico

Prévia do material em texto

2
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
2
AGENDA
DO
MÓDULO
{Formulários e campos de texto} 
{Inputs HTML5}
{Botões e controladores de ação}
{Validando inputs}
Agenda do módulo
Anotações
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 W
eb
 b
ás
ic
o
3
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
MISSÃO DO 
MÓDULO
Desenvolver uma página web com 
formulário, aplicando na prática os 
elementos e inputs HTML5.
4
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
Formulários e 
campos de texto
{01.}
A tag usada para formulários é a tag . 
Tag elementos
5
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
 input = entrada
É no input que as informações são efetivamente inseridas pelo usuário. 
Dentro do input, podemos criar campos para texto, senhas, e-mails, upload 
de arquivos, botões e outros. 
O elemento utilizado é o mesmo, o que muda é o tipo. 
Os dados definem o 
ato do .
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 W
eb
 b
ás
ic
o
6
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
Dentro da tag , vamos inserir o tipo através 
do atributo “type“ e colocar o valor neste atributo 
conforme a entrada de dado desejada. 
Então, se queremos que o usuário insira um texto, 
inserimos o atributo “type” com o valor “text”.
 
 
 
 Formulário HTML
 
 
 
 ‹!-- Elemento input --›
 
 
 Resultado na página web
7
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
Precisamos deixar claro para o usuário qual 
informação estamos solicitando. 
Para isso, é importante dar um nome para o campo, 
utilizando o elemento . 
Formulário HTML
Digite um texto: !-- Rótulo - >
 !-- Elemento - >
 Quando precisar de um campo de 
texto com mais caracteres, utilize o 
elemento .
MÃO 
NA MASSA
Crie um formulário HTML:
 > Insira três inputs: nome, senha e um campo de texto “Fale um pouco 
sobre você”. 
 > Estabeleça a propriedade “name” dos inputs da seguinte forma: name, 
password e description.
 > Use labels para que o usuário saiba o que ele deve preencher em cada 
campo.
Semelhante ao texto simples, 
temos o campo senhas. 
 
O elemento do tipo 
password fornece uma maneira 
segura para o usuário inserir a 
senha. 
Geralmente substitui cada 
caractere por um símbolo como 
o asterisco ou um ponto.
8
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
9
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
Inputs HTML5
{02.}
Pesquisar: 
Os elementos do tipo “search” são campos 
de texto projetados para o usuário inserir termos de 
pesquisa. 
O campo e-mail utiliza os elementos do 
tipo “email”, que permitem que o usuário insira um 
texto, informando o endereço postal. 
O valor de entrada é validado automaticamente para 
garantir que se trata de um texto no formato padrão 
de e-mail.
Pesquisar:
PULO DO
GATO
 > Definir atributos “min” e “max” no 
input tipo “number” evita erros e limita 
escolhas. 
10
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
No campo telefone, os elementos são do tipo “tel”, usados para 
permitir que o usuário insira e edite um número de telefone. 
Digite seu e-mail:
Digite o número de telefone: 
 
 
 Formulário Simples-Captação de E-mail
 
 
 ‹!-- TAG form,informando que é um formulário --›
 Digite seu e-mail: ‹!-- Texto --›
 
 
 
Digite seu e-mail:
Resultado na página web
O atributo max define o valor máximo a ser aceito 
no input do tipo “number”. Esse valor deve ser maior 
ou igual ao valor do atributo min.
Já o atributo “min” define o valor mínimo a ser 
aceito no input do tipo “number”. Esse valor deve 
ser menor ou igual ao valor do atributo max.
O elemento do tipo ”range” é utilizado 
para limitar um número ou valor que será inserido 
pelo usuário, através de um elemento de “arrastar e 
soltar” ou “controle deslizante”, em vez de uma caixa 
de entrada de texto do tipo numérico. 
Esse tipo também utiliza os atributos de “min” e 
“max” em seu funcionamento. 
MÃO 
NA MASSA
Insira no seu formulário HTML os elementos do tipo:
 > “tel”, chamado “WhatsApp”, para que o usuário possa inserir o número 
do telefone. 
 > “range”, chamado “Qual seu nível de conhecimento sobre HTML”, para 
que o usuário possa informar o seu nível de conhecimento. 
11
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
 
12
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
Botões e 
controladores 
de ação
{03.}
Os campos de seleção oferecem ao usuário 
um conjunto de opções e alternativas para 
que ele escolha
 
Veremos três possibilidades:
 > menu suspenso;
 > checkboxes;
 > botões de opção. 
O elemento HTML representa um 
controle que mostra um menu de opções. 
As opções dentro do menu são representadas 
pelo elemento . 
As opções podem ser pré-selecionadas para o 
usuário com o atributo selected. 
“selected”
>
>
MÃO 
NA MASSA
No seu formulário HTML, insira um campo chamado 
“Gênero”, do tipo . 
Ele deve ter no mínimo 3 opções. 
Dado extra:
 > name = gender
Elementos do tipo checkbox, por padrão, são 
renderizados como caixas quadradas. 
Quando ativadas com o atributo “checked”, podem ser 
marcadas pelo usuário com um ícone de verificação. 
 
A aparência exata do símbolo de check depende do 
navegador e do sistema operacional. 
13
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
 
MÃO 
NA MASSA
Insira no seu formulário HTML um input do tipo 
“checkbox” com o texto “Concordo com os Termos de 
Privacidade”.
Dados extras:
 > name = rememberMe
 > classe = checkbox-wrapper
O elemento do tipo “radio” também é 
conhecido como botes de opção. 
Geralmente é usado em grupos de radio, quando o 
usuário pode escolher apenas uma opção. 
Esses botões são renderizados como pequenos 
círculos, que são preenchidos ou destacados 
quando selecionados.
14
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
 
MÃO 
NA MASSA
Insira no seu formulário HTML um input do tipo “radio”, 
com o texto “Qual das tecnologias abaixo você tem mais 
conhecimento”.
Forneça três opções de escolha.
Dados extras:
 > name = technology
O elemento input do tipo button () representa um botão clicável com 
valor vazio por padrão.
 
Para colocar um texto no botão, utilizamos o atributo 
“value”.
Muito semelhante ao elemento button é o submit. 
A diferença entre eles está na confirmação da ação 
pelo usuário.
 
15
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
O elemento input do tipo “reset” também é um 
botão. 
Ele é utilizado para redefinir todos os dados 
existentes no formulário.
Ao clicar neste botão, o formulário é redefinido ao 
valor inicial.
Mas atenção à usabilidade,pois o usuário pode 
clicar por engano e perder tudo o que já havia 
digitado.
 
16
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
PULO DO
GATO
 > Quando você desejar ocultar algum 
campo do formulário, utilize o 
atributo “hidden”.
MÃO 
NA MASSA
Adicione no seu formulário HTML os elementos do tipo:
 > “reset”, para que o usuário possa limpar os dados inseridos. O campo 
deve se chamar “Limpar dados”.
 > “submit”, para que o usuário possa enviar os dados informados. O 
campo deve se chamar “Enviar”.
17
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
Tente uma, duas, três vezes e se 
possível tente a quarta, a quinta 
e quantas vezes for necessário. 
Só não desista nas primeiras 
tentativas, a persistência é 
amiga da conquista.
Bill Gates
18
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
Validando 
inputs
{04.}
Ao criar formulários em uma página web, é 
importante aplicar algumas validações para evitar 
ameaças de segurança e dados indesejados nos 
campos do formulário. 
O HTML nativamente já possui algumas validações 
iniciais que podem ajudar nesse sentido, que são 
aplicadas por meio de atributos do formulário.
O atributo pattern aplica algumas validações, 
principalmente para filtrar informações.
Funciona com os elementos de entrada do tipo: 
text date
url tel
search
email password
MÃO 
NA MASSA
Crie validações para seu formulário HTML:
 > Insira o atributo “pattern” no campo “senha” e defina uma regra de 
validação, como, por exemplo: ter mais que 6 caracteres. 
 > Torne os campos “nome” e “e-mail” obrigatórios de serem 
preenchidos, utilizando o atributo “required”.
19
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
PULO DO
GATO
 > Aprender Expressões Regulares é 
um bom investimento de tempo.
Outra forma de validação é por meio do 
uso do atributo “required”. 
Com ele, é possível criar uma validação de preenchimento de 
formulários, informando quais campos são obrigatórios.
Caso não seja preenchido, o formulário não poderá ser enviado. 
20
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
DESAFIO CONQUER
Crie um formulário contendo os seguintes campos:
 > Nome completo*
 > E-mail*
 > Idade*
 > Para qual matéria você está se candidatando para lecionar*
Opções de matérias vque o professor pode lecionar*:
 > Matemática
 > Português
 > Biologia
 > Ciências
 > História
 > Geografia
 > Artes
Lembrando que ele pode escolher só uma opção.
Quais os turnos disponíveis (múltipla escolha)*
Qual o seu nível de escolaridade*: 
 > Ensino Superior completo
 > Cursando mestrado
 > Mestrado completo
 > Cursando doutorado
 > Doutorado completo
Breve descrição sobre si mesmo (campo com no máximo 200 caracteres)
[tópico]
O form deve ter id e nome de “form”.
[box]
Os nomes dos campos devem ser, respectivamente: name, email, age, 
subject, availableShifts, schooling, description.
[box]
O campo com as opções de matérias deve ter um id de “subject-input”, 
para que os estilos sejam aplicados a ele.
21
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
QUERO MAIS
if (interested)
 // gimmemore
Para mais possibilidades de 
atributos para o elemento range, 
leia o artigo:
Para saber mais sobre expressões 
regulares e mais validações 
possíveis de serem utilizadas no 
atributo pattern, veja este artigo 
em inglês:
Elemento rangeAtributo pattern
22
H
TM
L 
e 
C
SS
: 
D
es
en
vo
lv
im
en
to
 w
eb
 b
ás
ic
o
22
Anotações
	{01.} Formulários e campos de texto
	{02.} Inputs HTMLS
	{03.} Botões e controladores de ação
	{04.} Validando inputs
	Agenda do módulo
	Anotações
	Botão 6: 
	Page 2: 
	Page 3: 
	Page 4: 
	Page 5: 
	Page 6: 
	Page 7: 
	Page 8: 
	Page 9: 
	Page 10: 
	Page 11: 
	Page 12: 
	Page 13: 
	Page 14: 
	Page 15: 
	Page 16: 
	Page 17: 
	Page 18: 
	Page 19: 
	Page 20: 
	Page 21: 
	Page 22: 
	Botão 5: 
	Page 2: 
	Page 3: 
	Page 4: 
	Page 5: 
	Page 6: 
	Page 7: 
	Page 8: 
	Page 9: 
	Page 10: 
	Page 11: 
	Page 12: 
	Page 13: 
	Page 14: 
	Page 15: 
	Page 16: 
	Page 17: 
	Page 18: 
	Page 19: 
	Page 20: 
	Page 21: 
	Page 22: 
	Botão 14: 
	Botão 15: 
	Botão 9: 
	Botão 10: 
	Botão 11: 
	Botão 12: 
	Text Field 127: