6formulariohtml5dw (1)
TRANSCRIPT
-
Desenvolvimento de Sistemas Web FormulariosHTML5
Eduardo Gondo
-
Agenda
Revisao
Formularios HTML5
Novos atributos
Eduardo Gondo ([email protected]) Desenvolvimento de Sistemas Web Formularios HTML59 de marco de 2014 2 / 1
-
Formularios review
vimos tres tags para formularios:
dentre estas a possui varios tipos diferentes:
text, password, hidden, radio, checkbox, button, submit,file, image
novos tipos da tag foram adicionados no HTML5
nem todos os novos tipos sao suportados por todos os navegadores
caso o navegador nao de suporte ao novo tipo, ele mostrara comouma caixa de texto
nos proximos eslaides veremos alguns desses novo tipos
Eduardo Gondo ([email protected]) Desenvolvimento de Sistemas Web Formularios HTML59 de marco de 2014 3 / 1
-
date
uma das mais uteis e o tipo data, infelizmente apenas o chrome,safari e o opera oferecem suportefirefox e ie interpretam este tipo como uma caixa de textoveja abaixo um exemplo:
1
Figura: Calendario no chrome
Eduardo Gondo ([email protected]) Desenvolvimento de Sistemas Web Formularios HTML59 de marco de 2014 4 / 1
-
email
ha o tipo email que espera receber um emailinfelizmente a validacao e apenas a existencia do @os principais navegadores oferecem suporte a este campoveja abaixo um exemplo:
1
2
3 email principal:
4
5
6
7
Figura: email no chromeEduardo Gondo ([email protected]) Desenvolvimento de Sistemas Web Formularios HTML59 de marco de 2014 5 / 1
-
tag datalist
a tag caracteriza uma lista de opcoes pre-definidaspara um elemento
ela adiciona uma caracterstica de auto completar a` tag
veja um exemplo de associado a`
1
2
3
4
5
6
7
8
9
10
11
12
Eduardo Gondo ([email protected]) Desenvolvimento de Sistemas Web Formularios HTML59 de marco de 2014 6 / 1
-
Novas propriedades required
alem das novas tags, o HTML5 introduziu algumas novaspropriedadesa propriedade required pode ser muito util quando queremosgarantir que um determinado campo do formulario seja preenchidoeste atributo pode ser aplicado nas tags: , e
veja abaixo um exemplo:1
quase todos os navegadores oferecem suporte a este atributo,menos o safari e o internet explorer ate a versao 9
Figura: campo obrigatorio
Eduardo Gondo ([email protected]) Desenvolvimento de Sistemas Web Formularios HTML59 de marco de 2014 7 / 1
-
Novas propriedades placeholder
considere que voce tera que montar um formulario onde uma dasinformacoes e a placa de um carro
um recurso que pode indicar para o usuario como ele deve digitar aplaca e o placeholder
atributo aplicavel somente a` tag
1
o placeholder e suportado em todos os navegadores, menos ointernet explorer ate a versao 9
quando comecamos a colocar o texto dentro da caixa de texto elesubstitui o valor especificado no placeholder
Figura: placeholder para placa do carro
Eduardo Gondo ([email protected]) Desenvolvimento de Sistemas Web Formularios HTML59 de marco de 2014 8 / 1
-
Novas propriedades pattern e title
infelizmente o placeholder nao impede que o usuario digite algofora do modelo exibido
para fazer a validacao de formato foi introduzido a propriedadepattern
no pattern podemos definir uma expressao regular (regexp) quesera utilizada para validar o conteudo do campo
caso o valor inserido nao satisfaca a expressao e exibido umamensagem informando o erro
note que a mensagem de erro pode ser definida com a propriedadetitle, veja abaixo um exemplo de placa de carro:
1
Eduardo Gondo ([email protected]) Desenvolvimento de Sistemas Web Formularios HTML59 de marco de 2014 9 / 1
-
Novas propriedades pattern e title
o pattern e suportado em todos os navegadores, menos o internetexplorer ate a versao 9 e o safari
ele e aplicado somente na tag
veja abaixo a imagem de um campo texto com o atributo pattern
Figura: pattern para placa do carro
voce pode conseguir mais informacoes sobre expressoes regularesem http://aurelio.net/regex/
durante nossos exemplos e exerccios vamos colocar expressoesregulares onde for possvel
Eduardo Gondo ([email protected]) Desenvolvimento de Sistemas Web Formularios HTML59 de marco de 2014 10 / 1
-
Exerccios
1) Crie uma pagina HTML que representa um formulario parainclusao de advogado para um sistema de uma empresa deadvocacia. Os dados do advogado sao: nome, cpf, numero da oab,data da expedicao da oab, especialidades (criminal, trabalhista,cvel, internacional e economica), telefone residencial, celular eemail. Note que um advogado pode ter varias especialidades.Utilize a propriedade pattern para cpf, telefone e celular, faca umabusca na internet a` procura das expressoes regulares.
2) Ainda dentro de um escritorio de advocacia, crie uma paginaHTML para cadastramento de processo. Os dados do processo sao:numero (fornecido pelo forum), nome do cliente, advogadoresponsavel, tipo da causa, data de abertura do processo, forum,cidade e uf. Use um componente select para advogado, forum e uf.
Eduardo Gondo ([email protected]) Desenvolvimento de Sistemas Web Formularios HTML59 de marco de 2014 11 / 1
-
Copyleft
Copyleft 2014 Prof. Eduardo Gondo Todos direitos liberados. Reproducao
ou divulgacao total ou parcial deste documento e liberada.
Eduardo Gondo ([email protected]) Desenvolvimento de Sistemas Web Formularios HTML59 de marco de 2014 12 / 1