06 - formulários html5
TRANSCRIPT
-
______________________________________________________________________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