__________ _ ETEC DR JOSÉ L UIZ VIANA COUT INHO - JAL ES Profª. Evelyn K. R. Matos email : [email protected] 06 – Formulários HTML5
______________________________________________________________________ETEC DR JOS LUIZ VIANA COUTINHO - JALES
Prof. Evelyn K. R. Matos
email: [email protected]
06 FormulriosHTML5
Como criar formulrios em HTML5
Em continuao a formulrios em HTML5
veremos os principais elementos e atributos
para validao e o seu comportamento
em diversos navegadores.
Vamos criar um novo formulrio chamado
formhtml5.html
OBS.: Nem todos os navegadores aceitam
o html5.
Evelyn K.R.M. | Etec Jales 2014
2
Atributos autofocus e required
autofocus que permite que o campo receba o
foco assim que a pgina for carregada.
required, que torna o preenchimento desse
campo obrigatrio. Caso o usurio se esquea de
preencher o campo assim que o formulrio for
enviado, ele interromper o envio e emitir uma
mensagem ao usurio.
Evelyn K.R.M. | Etec Jales 2014
3
Atributos autofocus e required
Evelyn K.R.M. | Etec Jales 2014
4
Elemento e-mail
o atributo type e configurado com apalavra e-mail.
Com essa simples configurao o HTML5
capaz de verificar se o e-mail digitado
um e-mail vlido.
Evelyn K.R.M. | Etec Jales 2014
5
Elemento e-mail
Evelyn K.R.M. | Etec Jales 2014
6
Elemento placeholder
a caixa de texto (input) possui um atributo
chamado de placeholder que atribui um
valor inicial ao campo e assim que o
campo receber o foco ou que digitar, esse
contedo ser apagado.
Evelyn K.R.M. | Etec Jales 2014
7
Elemento placeholder
Evelyn K.R.M. | Etec Jales 2014
8
Elementos date e datetime-local
O HTML5 prope campos especficos para
o tipo data, que o date e o datetime-
local.
Ambos possibilitam ao digitar a data um
calendrio facilitando a digitao.
A diferena que o datetime-local almda data tambm exibe um controle de
hora.
Evelyn K.R.M. | Etec Jales 2014
9
Elementos date e datetime-local
Evelyn K.R.M. | Etec Jales 2014
10
Elementos date e datetime-local
Evelyn K.R.M. | Etec Jales 2014
11
Atributos number, ranger, min, max
O HTML5 oferece campos especficos para
o tipo nmero, que o number e o ranger.
Ambos possibilitam que ao invs de digitar
um nmero, o usurio utilize os controles do
formulrio, facilitando a digitao.
Evelyn K.R.M. | Etec Jales 2014
12
A diferena que o range um controle
deslizante.
o ranger possui atributos que definem o ponto
inicial atravs do min, o ponto final atravs domax, o valor que vir selecionado atravsdo value.
Evelyn K.R.M. | Etec Jales 2014
13
Atributo URL
Exibe um campo com validao para a
insero de URLs.
Evelyn K.R.M. | Etec Jales 2014
14
Paleta de Cores
Cria uma paleta de cores, como as que
podem ser criadas usando por exemplo a
biblioteca JavaScript "jQuery UI".
Evelyn K.R.M. | Etec Jales 2014
15
Exerccio Prtico
Evelyn K.R.M. | Etec Jales 2014
16